@extends('layouts.main')

@section('container')

<!-- Add Map for Get Address of the Project -->
<style>
    a {
        cursor: pointer;
    }
</style>
<div class="page-title">
    <h1>
        {{$row[$id]['company']}}
    </h1>
</div>
<!-- DataTables Example -->
<div class="container-fluid main-content">

    <!-- DataTables Example -->
    @php

    $detail=$row[$id]['subcategory'];

    @endphp


    <div class="row">

        <div class="col-lg-12">
            <div class="widget-container fluid-height clearfix">

                <div class="widget-content padded clearfix">
                    <details>
                        <summary>
                            <div class="btn-group btn btn-sm btn-info-outline pull-left"><i class="fa fa-plus"></i>Add
                                sub cat category</div>
                        </summary>
                        <div class="row">
                            <div class="col-md-12 col-sm-12 col-xs-12">
                                <div class="x_panel">
                                    <div class="x_title">
                                        <h2>Add Sub New Category</h2>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="x_content">
                                        <br />
                                        <form action="{{url('panel/company-detail')}}" method="post"
                                            enctype="multipart/form-data" id="demo-form2" data-parsley-validate=""
                                            class="form-horizontal form-label-left">
                                            {{csrf_field()}}
                                            <div class="form-group">
                                                <label class="control-label col-md-3 col-sm-3 col-xs-12"
                                                    for="first-name">Header Name*<span class="required">*</span>
                                                </label>
                                                <div class="col-md-6 col-sm-6 col-xs-12">
                                                    <input type="text" id="first-name" required="required" name="title"
                                                        class="form-control col-md-7 col-xs-12">
                                                </div>
                                            </div>

                                            <style>
                                                .image-preview-input {
                                                    position: relative;
                                                    overflow: hidden;
                                                    margin: 0px;
                                                    color: #333;
                                                    background-color: #fff;
                                                    border-color: #ccc;
                                                }

                                                .image-preview-input input[type=file] {
                                                    position: absolute;
                                                    top: 0;
                                                    right: 0;
                                                    margin: 0;
                                                    padding: 0;
                                                    font-size: 20px;
                                                    cursor: pointer;
                                                    opacity: 0;
                                                    filter: alpha(opacity=0);
                                                }

                                                .image-preview-input-title {
                                                    margin-left: 2px;
                                                }
                                            </style>
                                            <script>
                                                $(document).on('click', '#close-preview', function(){ 
    $('.image-preview').popover('hide');

    // Hover befor close the preview

    $('.image-preview').hover(
        function () {
           $('.image-preview').popover('show');
        }, 
         function () {
           $('.image-preview').popover('hide');
        }
    );    
});

$(function() {

    // Create the close button

    var closebtn = $('<button/>', {
        type:"button",
        text: 'x',
        id: 'close-preview',
        style: 'font-size: initial;',
    });
    closebtn.attr("class","close pull-right");

    // Set the popover default content

    $('.image-preview').popover({
        trigger:'manual',
        html:true,
        title: "<strong>Preview</strong>"+$(closebtn)[0].outerHTML,
        content: "There's no image",
        placement:'bottom'
    });

    // Clear event

    $('.image-preview-clear').click(function(){
        $('.image-preview').attr("data-content","").popover('hide');
        $('.image-preview-filename').val("");
        $('.image-preview-clear').hide();
        $('.image-preview-input input:file').val("");
        $(".image-preview-input-title").text("Browse"); 
    }); 

    // Create the preview image

    $(".image-preview-input input:file").change(function (){     
        var img = $('<img/>', {
            id: 'dynamic',
            width:250,
            height:200
        });      
        var file = this.files[0];
        var reader = new FileReader();

        // Set preview image into the popover data-content

        reader.onload = function (e) {
            $(".image-preview-input-title").text("Change");
            $(".image-preview-clear").show();
            $(".image-preview-filename").val(file.name);            
            img.attr('src', e.target.result);
            $(".image-preview").attr("data-content",$(img)[0].outerHTML).popover("show");
        }        
        reader.readAsDataURL(file);
    });  
});
                                            </script>
                                            <div class="form-group">
                                                <label class="control-label col-md-3 col-sm-3 col-xs-12"
                                                    for="first-name">Upload Image <span class="required">*</span>
                                                </label>
                                                <div class="col-md-6 col-sm-6 col-xs-12">
                                                    <input type="file" name="upload[]" id="filer_input"
                                                        multiple="multiple" required="">

                                                </div>
                                            </div>
                                            <input type="hidden" value="company" name="title1">
                                            <input type="hidden" class="form-control" name="id" value="">
                                            <div class="form-group">
                                                <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">

                                                    <button class="btn btn-primary" type="reset">Reset</button>
                                                    <button type="submit" class="btn btn-success">Submit</button>
                                                </div>
                                            </div>

                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </details>

                    <table class="table table-bordered table-striped" id="dataTable1">
                        <thead>
                            <th class="check-header hidden-xs">
                                Sr
                            </th>
                            <th>
                                Image
                            </th>
                            <th>
                                Title
                            </th>
                            <th>
                                Url
                            </th>
                            <th class="hidden-xs">
                                Date Added
                            </th>
                            <th class="hidden-xs">
                                Status
                            </th>

                        </thead>
                        <tbody>

                            @if(!empty($detail))
                                                        @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- end DataTables Example -->
</div>
<div class="row" style="display:none">
    <div class="col-lg-1"></div>
    <div class="col-lg-10">
        <div class="widget-container fluid-height clearfix">
            @if (session('message'))
            <div class="alert alert-success flash">
                {{ session('message') }}
            </div>
            @endif
            <div class="widget-content padded clearfix">
                <div class="row">
                    <!-- <div class="col-md-2">
                         <div class="btn-group">
                             <a class="btn btn-danger-outline" data-toggle="modal" href="#delete_multiple" id="add-row" disabled=""><i class="fa fa-trash-o"></i>Delete Selected</a>
                            </div>
                     </div> -->
                    <div class="col-md-2">
                        <div class="btn-group">
                            <a class="btn btn-sm btn-info-outline pull-right" data-toggle="modal" href="#staticc"
                                id="add-row"><i class="fa fa-plus"></i>Add Company category</a>
                        </div>
                    </div>
                    <!--<div class="col-md-4">
                        <div class="btn-group">
                            <a class="btn btn-sm btn-primary-outline pull-right" data-toggle="modal" href="#dragHeader" id="add-row"><i class="fa fa-plus"></i>Sort Detail</a>
                        </div>
                    </div>-->
                </div>
                <div class="modal-shiftfix" id="companyRecord">
                    <div class="container-fluid main-content">
                                                        </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
</div>

<style>
    .feed-back ul {
        padding: 0;
        position: relative;
        top: -9px;
    }

    .social-icons .col-87 li a {
        color: #fff;
    }

    .social-icons {
        height: 100px;
        width: 295px;
        margin-top: 20px;
    }

    .feed-back {

        color: #fff;
        cursor: pointer;
        position: relative;
        text-align: center;
        width: 30px;
        -webkit-box-shadow: -5px 0px 3px -3px rgba(0, 0, 0, 0.32);
        -moz-box-shadow: -5px 0px 3px -3px rgba(0, 0, 0, 0.32);
        box-shadow: -5px 0px 3px -3px rgba(0, 0, 0, 0.32);
    }

    .col-87 {
        background: none repeat scroll 0 0 #fff;
        display: none;
        float: left;
        height: 100px;
        width: 265px;
        -webkit-box-shadow: -6px 2px 5px 1px rgba(0, 0, 0, 0.37);
        -moz-box-shadow: -6px 2px 5px 1px rgba(0, 0, 0, 0.37);
        box-shadow: -6px 2px 5px 1px rgba(0, 0, 0, 0.37);
    }

    .col-87 ul {
        float: left;
        padding: 24px 16px 14px;
    }

    .col-87 ul li {
        background: #162983;
        border-radius: 35px;
        float: left;
        height: 50px;
        list-style: outside none none;
        margin-right: 8px;
        width: 50px;
        -webkit-box-shadow: inset 1px -7px 5px 0px rgba(0, 0, 0, 0.37);
        -moz-box-shadow: inset 1px -7px 5px 0px rgba(0, 0, 0, 0.37);
        box-shadow: inset 1px -7px 5px 0px rgba(0, 0, 0, 0.37);
    }

    .col-87 ul li:hover {
        background: #777676;
        cursor: pointer;
    }

    .trash1 {
        left: 19px;
        position: relative;
        top: 15px;
    }
</style>

<!-- end DataTables Example -->

<!--Facilties Confirmation model-->
<div id="staticc" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="container">
            <div class="row">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i
                                class="fa fa-times"></i></button>
                        <h4 class="modal-title">Create a New Company List</h4>
                    </div>
                    <form action="{{url('company')}}" method="post" enctype="multipart/form-data">


                        {!! csrf_field() !!}
                        <div class="modal-body">
                            <div class="picture-container">
                                <div class="picture">

                                    <img src="{{URL::asset('images/logo.png')}}" class="picture-src"
                                        id="wizardPicturePre" title="">
                                    <input type="file" id="wizard-pic" class="" name="upload[]">
                                </div>
                                <h6 class="">Choose Picture</h6>

                            </div>
                            <div class="form-group">
                                <label for="userEmail">Add New Category</label>
                                <input type="text" class="form-control" name="company">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <input type="hidden" value="company" name="title">
                        <div class="modal-footer">
                            <button type="submit" name="submit" class="btn btn-success btn-icon"><i
                                    class="fa fa-check"></i>Submit</button>
                            <button type="button" class="btn btn-default btn-icon" data-dismiss="modal"><i
                                    class="fa fa-times-circle"></i> Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Delete Multiple confirmation -->
<div id="delete_multiple" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="delete_property" method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">Confirmation</h4>
                </div>
                <div class="modal-body">
                    <p> Would you like to Delete the Record? </p>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn dark btn-outline">Cancel</button>
                    <button type="button" onclick="multiDelete();" class="btn green">Continue Task</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!--script for getting checkbox value-->
<script src="{{ URL::asset('drag/j/dropMe1.js') }}"></script>
<script type="text/javascript">
    function multiDelete()
    {	var token = $("input[name=_token]").val();
        var favorite = [];
        $.each($("input[name='multidelete']:checked"), function()
        {
            favorite.push($(this).val());


        });
    }
</script>

<!--end Script here-->
<script>
    function  disable(val){

        if(val==""){

            $("#header_val").show();
        }
        else{
            $("#header_val").hide();

        }

    }
</script>
<script>
    $(document).ready(function() {
        $("#userform1").validate({
            rules: {
                property_header1: {},
                property_header: {
                    required: true
                },
                property_type: {
                    required: true
                }

            },
            messages: {
                property_header1: "",
                property_header: "Please enter a valid property header ",
                property_type: {
                    required: "Please enter your property type"
                }
            }
        });
    });
</script>
<script>
    $('.dropme').dropme('enable');
    $('.exclude').dropme({
        items: ':not(.disabled)'
    });
    $('.connected').dropme({
        linkTo: '.connected'
    });



</script>
<!--script for image Preview-->


<style>
    /*Profile Pic Start*/
    .picture-container {
        position: relative;
        cursor: pointer;
        text-align: center;
    }

    .picture {
        width: 106px;
        height: 106px;
        background-color: #999999;
        border: 4px solid #CCCCCC;
        color: #FFFFFF;
        border-radius: 50%;
        margin: 0px auto;
        overflow: hidden;
        transition: all 0.2s;
        -webkit-transition: all 0.2s;
    }

    .picture:hover {
        border-color: #2ca8ff;
    }

    .content.ct-wizard-green .picture:hover {
        border-color: #05ae0e;
    }

    .content.ct-wizard-blue .picture:hover {
        border-color: #3472f7;
    }

    .content.ct-wizard-orange .picture:hover {
        border-color: #ff9500;
    }

    .content.ct-wizard-red .picture:hover {
        border-color: #ff3b30;
    }

    .picture input[type="file"] {
        cursor: pointer;
        display: block;
        height: 100%;
        left: 0;
        opacity: 0 !important;
        position: absolute;
        top: 0;
        width: 100%;
    }

    .picture-src {
        width: 100%;

    }

    /*Profile Pic End*/
</style>




<style>
    /*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
* Add "left" or "right" in modal parent div, after class="modal".
* Get free snippets on bootpen.com
*******************************/
    .modal.left .modal-dialog,
    .modal.right .modal-dialog {
        position: fixed;

        width: 320px;
        height: 100%;
        -webkit-transform: translate3d(0%, 0, 0);
        -ms-transform: translate3d(0%, 0, 0);
        -o-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0);
    }

    .modal.left .modal-content,
    .modal.right .modal-content {
        height: 100%;
        overflow-y: auto;
    }

    .modal.left .modal-body,
    .modal.right .modal-body {
        padding: 15px 15px 80px;
    }

    /*Left*/
    .modal.left.fade .modal-dialog {
        left: -320px;
        -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
        -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
        -o-transition: opacity 0.3s linear, left 0.3s ease-out;
        transition: opacity 0.3s linear, left 0.3s ease-out;
    }

    .modal.left.fade.in .modal-dialog {
        left: 0;
    }

    /*Right*/
    .modal.right.fade .modal-dialog {
        right: -320px;
        -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
        -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
        -o-transition: opacity 0.3s linear, right 0.3s ease-out;
        transition: opacity 0.3s linear, right 0.3s ease-out;
    }

    .modal.right.fade.in .modal-dialog {
        right: 0;
    }

    /* ----- MODAL STYLE ----- */
    .modal-content {
        border-radius: 0;
        border: none;
    }

    .modal-header {
        border-bottom-color: #EEEEEE;
        background-color: #FAFAFA;
    }

    /* ----- v CAN BE DELETED v ----- */

    .demo {
        padding-top: 60px;
        padding-bottom: 110px;
    }

    .btn-demo {
        margin: 15px;
        padding: 10px 15px;
        border-radius: 0;
        font-size: 16px;
        background-color: #FFFFFF;
    }

    .btn-demo:focus {
        outline: 0;
    }

    .demo-footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: 15px;
        background-color: #212121;
        text-align: center;
    }

    .demo-footer>a {
        text-decoration: none;
        font-weight: bold;
        font-size: 16px;
        color: #fff;
    }
</style>
<script>
    $(document).ready(function(){


        // Prepare the preview for profile picture

        $("#wizard-pic").change(function(){

            readURL(this);
        });
    });
    function readURL(input) {


        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {

                $('#wizardPicturePre').attr('src', e.target.result).fadeIn('slow');
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>
@stop