@extends(branchMenu())
@section('content')
    <style>
        .cards-list {
            z-index: 0;
            width: 100%;
            flex-wrap: wrap;
        }
        .card {
            width: 100%;
            height: 130px;
            border-radius: 5px;
            box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.25);
            cursor: pointer;
            transition: 0.4s;
            margin-bottom: 70px;
        }
        .card input{
            position: absolute;
            top: 5px;
            height: 30px;
            width: 30px;
        }
        .card .card_image {
            width: inherit;
            height: inherit;
            border-radius: 5px;
        }

        .card .card_image img {
            width: inherit;
            height: inherit;
            border-radius: 5px;
            object-fit: cover;
        }

        .card .card_title {
            text-align: center;
            border-radius: 0px 0px 40px 40px;
            font-family: sans-serif;
            font-weight: bold;
            font-size: 15px;
            margin-top: 5px;
            height: 40px;
            color: #2c3e50;

        }
        .card:hover {
            box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.25);
        }

        @media all and (max-width: 500px) {
            .card-list {
                /* On small screens, we are no longer using row direction but column */
                flex-direction: column;
            }
        }

    </style>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs 12 col-sm-12 col-md-12 col-lg-12">
                <div class="col-xs 12 col-sm-12 col-md-12 col-lg-12">
                    <button type="button" data-href="{{route('products-image-list')}}" class="button_danger btn_delete pull-right">
                        <span class="fa fa-trash"></span> {{__('administrator.delete')}}
                    </button>
                    <button type="button" data-full_name="Upload Image" data-href="{{route('products-upload-image')}}" class="button_info getHtmlForm pull-right">
                        <span class="fa fa-image"></span> {{__('administrator.upload')}}
                    </button>
                    <button type="button" class="button_warning pull-right" onclick="window.location.replace('{{route('products.index')}}')">
                        <span class="fa fa-arrow-left"></span> {{__('administrator.back')}}
                    </button>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <form class="delete_id">
                    <fieldset>
                        <legend>{{__('administrator.image')}}</legend>
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 getImg"></div>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script type="text/javascript">
        let getImg = $('.getImg');
        $(document).ready(function () {
            getTable();
            disBtn();
            getImg.on('click','a.page-link',function (e) {
                e.preventDefault();
                disBtn();
                getTable($(this).attr('href'));
            });
            $('.btn_delete').on('click',function (e) {
                let delete_id = $('.delete_id').serialize();
                confirmForm($(this).data('href')+'?'+delete_id, 'ប្រាកដដែរឬទេ?', 'រូបភាពដែល គូសធិក(<i class="fa fa-check"></i>) និងត្រូវលុប។', 'danger');
            });
            getImg.on('click','input[type=checkbox]',function (e) {
                let delete_id = $('.delete_id').serialize();
                if(delete_id){
                    $('.btn_delete').prop('disabled',false);
                }else{
                    disBtn();
                }
            });
        });
        function disBtn() {
            console.log(1);
            $('.btn_delete').prop('disabled', true);
        }
        function getTable(href=null) {
            href = href?href:'{{route('products-image-list')}}';
            $.get(href, function (res) {
                $('.getImg').html(res);
            })
        }
    </script>
@endsection


