@php
    $option_selected = isset($option_selected)?$option_selected:null;
     $option_overlay=isset($option_overlay)?$option_overlay:1;

@endphp

        <!-- title  -->
<div class="modal-header">
    <h4 class="modal-title">
        <i class="ti-gallery"></i>
        Minhas Imagens
    </h4>

    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<!-- ./title  -->
<!-- body  -->
<div class="modal-res">
    <div class="modal-body">
        <!--  Content   -->
        {{--        @php--}}
        {{--            dump($record);--}}
        {{--        @endphp--}}

        <div class="btn-group dropleft pull-right">
            <button type="button" class="btn btn-secondary btn-rounded  " data-toggle="dropdown" aria-haspopup="true"
                    style="border-radius: 20px; "
                    aria-expanded="false">
                <i class="fa fa-ellipsis-v"></i>
            </button>
            <div class="dropdown-menu font-14" style="">
                <button type="button" class="dropdown-item list-card" value="12">
                    <i class="mdi mdi-view-list"></i> <span class="font-12">Em Detalhes</span></button>
                <button type="button" class="dropdown-item list-column" value="12">
                    <i class="mdi mdi-view-agenda"></i> <span class="font-12">1 Colunas</span></button>
                <button type="button" class="dropdown-item list-column" value="6">
                    <i class="mdi mdi-view-grid"></i> <span class="font-12">2 Colunas</span></button>
                <button type="button" class="dropdown-item list-column" value="4">
                    <i class="mdi mdi-view-module"></i><span class="font-12"> 3 colunas</span></button>

            </div>
        </div>

        <div class="row m-b-10" id="actionSideSearchFileImage">
            <input name="optionListColumnValue" id="optionListColumnValue" value="6" type="hidden">
            <input name="optionList" id="optionList" value="1" type="hidden">
            <input name="optionSelected" id="optionSelected" value="{{$option_selected}}" type="hidden">
            <input name="optionOverlay" id="optionOverlay" value="{{$option_overlay}}" type="hidden">


            <div class="col-sm-9">
                <input type="text" name="sideBarSearchStringFileImages" id="sideBarSearchStringFileImages"
                       class="form-control form-control-line"
                       value="" placeholder="Pesquisar" style="height: 25px;font-size: 14px; margin-left: -20px;">
            </div>

            <div class="col-sm-2 text-center">
                <small>
                    Qtdd:<span
                            class="font-weight-bold"> {{count($record)}}</span>
                </small>
            </div>
        </div>

        @include('mod-file.tools-button-file-image-upload')

        <hr>
        <div id="indexSearchSideBar">
            @include('mod-file.tools-image-list-card')

        </div>

        <!-- ./ Content  -->
    </div>
    <!--  button   -->
    <div class="modal-footer clear">
        <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Fechar</button>
    </div>
    <!-- ./ button  -->

</div>
<!-- ./ body  -->


<script>
    //COLUNAS
    $('.list-column').click(function () {

        var col = $(this).val();
        $('#listColumn ').children().removeClass();


        $('#listColumn ').children().addClass('col-sm-' + col);
        $('#optionListColumnValue').val(col);
        $('#optionList').val(2);
        //pesquisa
        searhLoadFileImage();
    });
    //LINHAS
    $('.list-card').click(function () {
        $('#optionList').val(1);
        searhLoadFileImage();
    });


</script>


<script>
    $(document).ready(function () {
        {{--$("#sideBarSearchBtn").click(function () {--}}
        {{--    var value = $(this).val().toLowerCase();--}}
        {{--    loadsDataForm('#indexSearchSideBar', '{{asset("file/myfile-searchload")}}', '#indexFormSideSearch', ['#_token',]);--}}

        {{--});--}}
        $('#sideBarSearchStringFileImages').keypress(function (event) {
            var keycode = (event.keyCode ? event.keyCode : event.which);
            if (keycode == '13') {
                searhLoadFileImage();
            }
        });

        {{--$('#paginatorNext').click(function () {--}}
        {{--    var pag = $(this).val();--}}

        {{--    loadsDataForm('#indexSearchSideBar', '{{url("file/myfile-searchload")}}?page=' + pag, '#indexFormSideSearch', ['#_token', '#paginatorNumber'], 1);--}}

        {{--});--}}
    });


    function searhLoadFileImage() {

        loadsDataForm('#indexSearchSideBar', '{{asset("file/myfile-image-search")}}', '#actionSideSearchFileImage', ['#_token', '#optionList', 'optionListColumnValue']);

    }


    $('#btnSendFile').click(function () {
        oziLoadData(data = {
            ldDestinyId: 'indexSearchSideBar',
            ldCatchGroupId: ['actionFileImage'],
            ldCatchItenName: ['_token','optionSelected'],
            ldUrl: '{{asset("file/myfile-image-add")}}',
        });
    });

</script>