<body class="vertical-layout vertical-menu-modern  content-detached-left-sidebar ecommerce-application  2-columns {{ $configData['blankPageClass'] }} {{ $configData['bodyClass'] }}  {{($configData['theme'] === 'light') ? '' : $configData['theme'] }}  {{ $configData['navbarType'] }} {{ $configData['sidebarClass'] }} {{ $configData['footerType'] }}" data-menu="vertical-menu-modern" data-col="2-columns"  data-layout="{{ $configData['theme'] }}">
    {{-- Include Sidebar --}}
    @include('admin.panels.sidebar')

    <!-- BEGIN: Content-->
    <div class="app-content content">
        <!-- BEGIN: Header-->
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>

        {{-- Include Navbar --}}
        @include('admin.panels.navbar')

        @if(!empty($configData['contentLayout']))
        <div class="content-area-wrapper">
            <div class="{{ $configData['sidebarPositionClass'] }}">
                <div class="sidebar">
                    {{-- Include Sidebar Content --}}
                    @yield('content-sidebar')
                </div>
            </div>
            <div class="{{ $configData['contentsidebarClass'] }}">
                <div class="content-wrapper">
                    <div class="content-body">
                        {{-- Include Page Content --}}
                        @yield('content')
                    </div>
                </div>
            </div>
        </div>
        @else
        <div class="content-wrapper">
            {{-- Include Breadcrumb --}}
            @if($configData['pageHeader'] == true)
            @include('admin.panels.breadcrumb')
            @endif

            <div class="content-body">
                {{-- Include Page Content --}}
                @yield('content')
            </div>
        </div>
        @endif

    </div>
    <!-- End: Content-->

    @if($configData['blankPage'] == false)
    @include('admin/pages/customizer')

    @include('admin/pages/buy-now')
    @endif

    <div class="sidenav-overlay"></div>
    <div class="drag-target"></div>

    {{-- include footer --}}
    @include('admin.panels/footer')
    
    
     <div class="modal fade media-modal " id="media-model" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Media Gallery</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form class="kt-form" id="fileUploadForm" action="{{url("/admin/media/upload")}}" method="POST" enctype="multipart/form-data">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <input type="hidden" name="media_action" id="media_action" value="<?php isset($action) ? $action : "page" ?>" />
                        <div class="col-xl-12">
                            <div class="form-group row">
                                <label class="col-xl-2 col-lg-2 col-form-label"> File Upload</label>
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input " id="file" name="file" multiple="" required="">
                                    <label class="custom-file-label LabeliconFile" for="file">Choose File </label>
                                </div>


                                <div class="kt-form__actions" style="margin-top:10px;">
                                    <input type="submit" value="Upload" class="btn btn-danger btn-sm btn-wide kt-font-bold kt-font-transform-u">
                                </div>

                            </div>
                        </div>

                    </form>
                    <form id="fileSearchModel" action="{{url("admin/media/get")}}">
                        <div class="row">
                            <div class="col-sm-10">
                                <input type="text" name="search" class="form-control search-product" id="iconLeft5" placeholder="Search here">
                                <div id="test">
                                    <input type='hidden' value='grid-view' name='activeClass'>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <input type="submit"  class="search btn btn-primary mr-1 mb-1 waves-effect waves-light" value="search"/>
                            </div>
                        </div> 
                    </form>

                    <div class="progress" style="margin-bottom:15px">
                        <div class="progress-bar" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                            0%
                        </div>
                    </div>


                    <div class="allMediaContent" style="width:100%;max-height: 300px;overflow-y: auto;    overflow-x: hidden;" id="mediadata">
                    </div>

                </div>
                <div class="modal-footer">
                    <input type="text" class="form-control" id="selectFileName" value="" readonly/>
                    <input type="hidden" id="targetControl" value="" />
                    <button type="button" class="btn btn-primary closeFileModel" data-dismiss="modal">Submit</button>
                </div>
            </div>
        </div>
    </div>

    {{-- include default scripts --}}
    @include('admin/panels/scripts')

    {{-- Include page script --}}
    @yield('myscript')
    @yield('faqscript')
    
    <script>

        var VideoTags = ["webm", "mkv", "flv", "vob", "ogv", "ogg", "drc", "mng", "avi", "mov", "qt", "wmv", "yuv", "amv", "mp4", "mp2", "mpeg", "mpe", "mpv", "m4v", "svi", "3gp", "3g2", "mxf", "roq", "nsv", "flv", "f4v", "f4p", "f4a", "f4b"];
        var Pdf = ["pdf"];

        $(document).ready(function () {

            var count = 0;
            $('#fileUploadForm').ajaxForm({
                beforeSend: function () {
                    $('#success').empty();
                    $('.progress-bar').text('0%');
                    $('.progress-bar').css('width', '0%');
                    $('.uploadClose').hide();
                },
                uploadProgress: function (event, position, total, percentComplete) {
                    $('.progress-bar').text(percentComplete + '%');
                    $('.progress-bar').css('width', percentComplete + '%');
                },
                success: function (data)
                {
//                    console.log(data);
                    if (data.error == false) {
                        $('.progress-bar').text('Uploaded');
                        $('.progress-bar').css('width', '100%');
                        $('.uploadClose').show();
                        $('#selectFileName').val(data.file);
                        var fullFilepath = "<?php echo url("/") ?>/uploads/media/" + data.file;

                        $newBlock = '<div class="col-md-3">' +
                                '<img class="selectFile" src="' + fullFilepath + '"  width="100px" height="100px" data-file="' + data.file + '" data-url="'+data.file+'" data-type="'+data.type+'" data-fileName="'+data.fileName+'" data-title="'+data.title+'" data-category="'+data.category+'" data-description="'+data.description+'" data-thumbnails="'+data.thumbnailsDimensions+'" data-dimensions="'+data.dimensions+'"/> ' +
                                '<span class="kt-header__topbar-welcome" style="word-break: break-word;">' + data.file + '</span>' +
                                '</div>';


                        $(".finali").prepend($newBlock);
                    } else {
                        $('.progress-bar').text('Upload Fail');
                        $('.progress-bar').css('width', '100%');
                        $('.uploadClose').show();
                    }
                }
            });


            $(document).on("click", ".selectFile", function () {
                console.log($(this).val());
                $(".selectFile").removeAttr('style');
                $(this).css("border", "5px solid");
                $('#selectFileName').val($(this).data('file'));
                $('#menu3').show();
                var base = $(document).find('.base').val();
                var name = "<?php echo url("/") ?>/" + "uploads/media/thumbnails/" + $(this).data('file');
                var name2 = "<?php echo url("/") ?>/" + "uploads/media/" + $(this).data('file');
				var name3 = "<?php echo url("/") ?>/" + "uploads/media/" + $(this).data('file');
                $('#imageurl').val(name);
               
                document.getElementById('selectedimage').src = $(this).attr('src');
                $('#title').html("<strong>Title: </strong>"+$(this).data('title'));
                   $('#fileName').html("<strong>File Name: </strong> "+$(this).data('file'));
                   $('#type').html("<strong>Type : </strong>"+$(this).data('type'));
                   $('#dimensions').html("<strong>Dimensions : </strong>"+$(this).data('dimensions'));
                   $('#thumbnailsDimensions').html("<strong>Thumbnails Dimensions: </strong>"+$(this).data('thumbnails'));
                   $('#category').html("<strong>Category : </strong>"+$(this).data('category'));
                   $('#url').html("<strong>URL: </strong>"+name2);
                   $('#thumbnailsurl').html("<strong>Thumbnails URL: </strong>"+name);

                
                  
                
               
            });

            $(document).on("click", ".mediaModel", function () {
                $("#targetControl").val($(this).data('control'));
            });

            $(document).on("click", ".closeFileModel", function () {


                $("#" + $("#targetControl").val()).val($("#selectFileName").val());
            });

            $('#fileSearchModel').ajaxForm({
                beforeSend: function () {

                },
                uploadProgress: function (event, position, total, percentComplete) {

                },
                success: function (data)
                {
//                    alert(data);
                    console.log(data);
                    $('.allMediaContent').html(data);

                }
            });




        });
    </script>

</body>
</html>
