@extends('admin.layouts.sub-layout.app')

@section('content')
    <div class="container-fluid">
        <div class="row page-titles">
            <div class="col-md-5 align-self-center">
                <h3 class="text-themecolor">Sliders Gallery</h3>
            </div>
            <div class="col-md-7 align-self-center">
                <a href="javascript:void(0);" class="btn waves-effect waves-light btn-success pull-right"
                   title="Add" data-toggle="modal" data-target="#sliderModal">
                    <i class="fa fa-plus"></i>&nbsp;
                    Add
                </a>
            </div>
        </div>

        <div class="row el-element-overlay">
            <div class="col-md-12">
                <h6 class="card-subtitle m-b-20 text-muted">you can make your slider gallery like this</h6>
            </div>
            @forelse($sliders as $slider)
                <div class="col-lg-3 col-md-6">
                    <div class="card">
                        <div class="el-card-item">
                            <div class="el-card-avatar el-overlay-1">
                                <img src="{{ $slider->file_url }}" id="fix-img" alt="{{ $slider->title }}"/>
                                <div class="el-overlay">
                                    <ul class="el-info">
                                        <li>
                                            <a class="btn default btn-sm btn-outline image-popup-vertical-fit"
                                               href="{{ $slider->file_url }}">
                                                <i class="icon-magnifier"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0)" class="btn btn-sm default btn-outline"
                                                onclick="updateSlider('{{ route('admin.slider.edit', $slider->id) }}')">
                                                <i class="fa fa-pencil"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="btn btn-sm default btn-outline btn-delete"
                                                href="javascript:void(0);"
                                                data-url="{{ route('admin.slider.show', $slider->id) }}"
                                                data-token="{{ csrf_token() }}"
                                                data-confirm="You will delete this slide: {{ $slider->title }}"
                                                title="Delete">
                                                <i class="fa fa-trash"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="el-card-content">
                                <h3 class="box-title">{{ $slider->title }}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-md-12 col-xs-12">
                    <div class="card">
                        <div class="el-card-item">
                            <h2 class="box-title text-center empty-content">Data Not Found.</h2>
                        </div>
                    </div>
                </div>
            @endforelse

            <div style="text-align: center">
                {{ $sliders->links('vendor.pagination.bootstrap-4') }}
            </div>
        </div>
    </div>

    @include('admin.slider.create')
    <div id="updateSlider"></div>
@endsection

@section('stylesheet')
    @parent
    <link href="{{ asset('asset/plugins/Magnific-Popup-master/dist/magnific-popup.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('asset/plugins/dropify/dist/css/dropify.min.css') }}">
    <!--alerts CSS -->
    <link href="{{ asset('asset/plugins/sweetalert/sweetalert.css') }}" rel="stylesheet" type="text/css">
    <style>
        #fix-img{
            height: 242px;
            width: auto;
            margin: 0 auto;
        }
        .empty-content{
            min-height: 50px;
            margin-top: 70px;
            margin-bottom: 30px;
        }
    </style>
@endsection

@section('javascript')
   @parent
   <script src="{{ asset('asset/plugins/Magnific-Popup-master/dist/jquery.magnific-popup.min.js') }}"></script>
   <script src="{{ asset('asset/plugins/Magnific-Popup-master/dist/jquery.magnific-popup-init.js') }}"></script>
   <script src="{{ asset('asset/plugins/dropify/dist/js/dropify.min.js') }}"></script>
   <!-- Sweet-Alert  -->
   <script src="{{ asset('asset/plugins/sweetalert/sweetalert.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            // Basic
            $('.dropify').dropify({
                tpl: {
                    message: '<div class="dropify-message"><span class="file-icon"/><p class="text-center">Drag and drop file here or click</p></div>'
                }
            });
        });

        function updateSlider(url) {
            getForm(url, "#updateSlider", "#updateSliderModal");
        }

        function getForm(url, location, modal){
            $.get(url,
            function(result){
                $(location).html(result);
                $(modal).modal('show');
            });
        }
    </script>
@endsection