@extends("admin.layout.app",["page_title" => "Admin | Caption List "])
@push('style')
    <link href="{{ asset('admin-assets/css/quill.snow.css') }}" rel="stylesheet">
@endpush
@section('admin-content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center">
                <h4 class="mb-sm-0 font-size-18"></h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item "><a
                                href="{{route('admin.dashboard')}}">{{__('admin.dashboard')}}</a></li>
                        <li class="breadcrumb-item active">{{__('admin.caption')}}</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="main-title mb-0">
                        <div class="row">
                            <div class="col-12">
                                <div
                                    class="page-title-box d-sm-flex align-items-center justify-content-between">
                                    <h3 class="text-black">{{__('admin.caption')}}</h3>
                                    <div style="float: right;display: flex">
                                        <form method="get" id="per-page-dropdown" class="choose-search-box">
                                            <input type="hidden" name="search" id="hidden_search_value"
                                                   value="{{$keyword}}">
                                            <div class="search-input custom-pagination-dropdown">
                                                <select class="select2  bg-transparent input-custom"
                                                        name="per_page" id="per_page">
                                                    <option value="{{10}}" {{request('per_page') == 10 ? "selected" : ''}}>{{ 10 }}</option>
                                                    <option value="{{25}}" {{request('per_page') == 25 ? "selected" : ''}}>{{ 25 }}</option>
                                                    <option value="{{50}}" {{request('per_page') == 50 ? "selected" : ''}}>{{ 50 }}</option>
                                                    <option value="{{100}}" {{request('per_page') == 100 ? "selected" : ''}}>{{ 100 }}</option>
                                                </select>
                                            </div>
                                        </form>
                                        <form method="get" id="level-2-dropdown" class="choose-search-box">
                                            <div class="input-group search-input">
                                                <input type="text" name="search" class="form-control bg-transparent" placeholder="{{ __('admin.search') }}" value="{{ $keyword }}" id="search_value">
                                                <input type="hidden" name="per_page" value="{{request('per_page') ?? 10}}">
                                                <button type="submit" class="btn btn-success " style="margin: 0px;">{{ __('admin.go') }}</button>
                                            </div>
                                        </form>
                                        <div class="reset-button">
                                            <a href="{{route('admin.caption.index')}}" class="btn btn-success"
                                               style="margin-left: 10px;">{{ __('admin.reset') }}</a>

                                            <a href="javascript:void(0);"
                                               onclick="openCaptionModal('{{ route('get.caption.popup') }}')"
                                               class="btn btn-success"
                                               style="margin-left: 10px;" title="Create">{{ __('admin.create') }}</a>

                                            <a href="{{ route('admin.caption.export') }}"
                                               class="btn btn-success"
                                               style="margin-left: 10px;" title="download">{{ __('admin.download') }}</a> 

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
       
                    @include('admin.paginate', [
                        'records' => $captions,
                        'no_data' => 'No records found',
                        'columns' => [
                            [
                                'name' => __('admin.caption'),
                                'field' => function(App\Models\Caption $caption){
                                        return \Illuminate\Support\Str::limit($caption->content, 50, '...');
                                },
                                'align' => 'text-center',
                                  'sortField' => 'content',
                                 'isSortable' => 1,
                            ],
                            [
                                'name' => __('admin.created_at'),
                                'field' => function(App\Models\Caption $caption){
                                        return ($caption->created_at->timezone('America/Los_Angeles')->format('d M Y h:i A'));
                                },
                                'align' => 'text-center',
                                  'sortField' => 'created_at',
                                 'isSortable' => 1,
                            ],
                            [
                               'name' => 'Action',
                               'field' => function(App\Models\Caption $caption) {
                                           $button = '
                                                       <a href="javascript:void(0);"
                                                       style="margin-left:5px;"
                                                       onclick="openCaptionModal(`'.route("get.caption.popup").'`,`'.$caption->id.'`)"
                                                       class="btn btn-outline-secondary btn-sm edit" title="Edit"><i class="fa fa-edit"></i></a>';
                                            $button .= '
                                                <a href="'.route('admin.caption.delete' , $caption->id).'"
                                                    class="btn btn-outline-danger btn-sm delete delete-record delete_data"
                                                    title="Delete">
                                                        <i class="fas fa-trash"></i>
                                                </a>';
                                           return $button;
                               },
                                'isSortable' => 0,
                                'align' => 'text-center action-heading',
                           ],
                        ]
                    ])
                </div>
            </div>
        </div>
    </div>                       
    <div id="caption_popup"></div>
@endsection

@push('script')
    <script>
        // Check Unique Communicate Way
        jQuery(document).ready(function () {

        window.openCaptionModal = function(action, id = null) {
            $.ajax({
                method: "post",
                url: action,
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    id: id
                },
                success: function (result) {
                    $('#caption_popup').html(result);

                    const caption_modal = $('#caption_modal');
                    caption_modal.modal('show');

                    validator = $('#caption_form').validate({
                        ignore: [],
                        rules: {
                            content: {
                                required: true,
                            },
                        },
                        onkeyup: false,
                        onfocusout: false,
                        onclick: false,
                        submitHandler: function (form) {
                            $(form).find(':input[type=submit]').prop('disabled', true)
                            form.submit();
                        },
                        messages: {
                            title: {
                                required: "{{ __('admin.caption_required') }}",
                            },
                        },
                        showErrors: function(errorMap, errorList) {
                            if (errorList.length) {
                                flasher.error(errorList[0].message); // show first error
                            }
                        },
                    });

                    //Destroy Validation when modal is closed
                    $("#caption_modal").on('hidden.bs.modal', function () {
                        validator.destroy();
                    })
                },
                error: function (error) {

                }
            });
        }
    });
    </script>
@endpush