@extends('app')
@section('content')
    <link href="{{ asset('assets/plugins/jquery-notifications/css/messenger.css')}}" rel="stylesheet" type="text/css" media="screen"/>
    <link href="{{ asset('assets/plugins/jquery-notifications/css/messenger-theme-flat.css')}}" rel="stylesheet" type="text/css" media="screen"/>

    @if(session('flash_message'))
        <div class="alert {{ session('flash_message_status') ? 'alert-error' : 'alert-success' }}" style="text-align: center;">
            <button class="close" data-dismiss="alert"></button>
            {{ session('flash_message') }}
        </div>
    @endif

    <div class="grid simple vertical mobile-scroll">
        <div class="grid-body no-border"><br>
            <div class="row">
                <div class="col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">

                    <div class='row control' style="margin-bottom: 10px; margin-top: 10px; background-color: #fff;">
                        <div class="col-sm-4 col-xs-12">
                            <div class="pull-right markaction">
                                @can('countries-destroy')
                                    <a id="del" href="javascript:void(0)" class="btn btn-danger"
                                       data-msg="هل أنت متأكد من الحذف؟"
                                       data-url="{{ route('admin.countries.bulkdelete') }}">حذف</a>
                                @endcan
                            </div>
                        </div>

                        <div class="col-sm-4 col-xs-12" style="text-align: center;">
                            <span class="bold" style="font-size: 20px;">البلد</span>
                        </div>

                        <div class="col-sm-4 col-xs-12">
                            @can('countries-create')
                                <a href="javascript:void(0)" data-target="#imageModal" data-toggle='modal'
                                   class="btn btn-primary" style="margin-right: -2px">أضف بلد</a>
                            @endcan

                            @cannot('countries-create')
                                @can('countries-destroy')
                                    <a href="#" class="btn btn-primary" style="visibility: hidden;">no visibility</a>
                                @endcan
                            @endcannot
                        </div>
                    </div>

                    <table class="table table-hover" id="datatable-example">
                        <thead>
                        <tr style="color: white;">
                            <th><input type="checkbox" class="group-checkable" data-set="#datatable-example .checkboxes" /></th>
                            <th>Id</th>
                            <th>إسم البلد</th>
                            <th></th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Country Modal -->
    <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form class="labels-align-verticle" method="POST" action="{{ route('countries.store') }}" id="form_albumimage">
                    @csrf
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel">إضافة بلد</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group row">
                            <div class="input-with-icon right col-md-5 col-md-offset-3 col-sm-12">
                                <input type="text" name="name" class="form-control" required maxlength="30">
                            </div>
                            <div class="col-md-2 col-sm-12 text-left">
                                <label for="name" class="form-label">إسم البلد</label>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" onclick='closeModal("#imageModal")'>
                            <span aria-hidden="true">إلغاء</span>
                        </button>
                        <button type="submit" class="btn btn-primary">تحديث</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Edit Country Modal -->
    <div class="modal fade" id="RowEditModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content" style="margin-top: 70px">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">تحرير بلد</h4>
                </div>
                <form class="labels-align-verticle" id="form_row_edit" method="POST" action="{{ route('admin.countries.editcountry') }}">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" id="id_field" name="request_id" class="form-control">

                        <div class="form-group row">
                            <div class="right col-md-5 col-md-offset-3 col-sm-12">
                                <input type="text" id="name_field" name="name" class="form-control" required maxlength="30">
                            </div>
                            <div class="col-md-2 col-sm-12 text-left">
                                <label for="name" class="form-label text-right">إسم البلد</label>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">إلغاء</button>
                        <button type="submit" class="btn btn-primary btn-cons" id="submit_row_edit_form" style="font: 18px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:bold;">
                            تحديث
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Bulk Action Form -->
    <form method="POST" class="inline" id="bulkaction">
        @csrf
        <input type="hidden" value="" name="ids" id="ids">
    </form>

@endsection

@section('page_script')
    <script type="text/javascript">
        function closeModal(id) {
            $(id).modal('hide');
        }

        $(document).on("click", "#request", function () {
            var request = $(this).data('request');
            console.log(request)
            $("#name_field").val(request.name);
            $('#id_field').val(request.id);
        });

        jQuery(document).ready(function ($) {
            $('#datatable-example').DataTable({
                processing: true,
                serverSide: true,
                order: [[1, "desc"]],
                language: {
                    search: "",
                    searchPlaceholder: "بحث",
                    zeroRecords: "لا يوجد محتوى",
                    processing: "<img src='{{ url('/') }}/assets/img/Webp.net-resizeimage.gif' />"
                },
                ajax: {
                    url: "{{ route('admin.countries.datatable') }}",
                    type: "POST",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                },
                columns: [
                    { data: 'check', name: 'check' },
                    { data: 'id', name: 'id' },
                    { data: 'name', name: 'name' },
                    { data: 'actions', name: 'actions' }
                ],
                iDisplayLength: 50,
                columnDefs: [
                    { targets: [1], visible: false, searchable: false },
                    { targets: [0, 1, 3], searchable: false },
                    { targets: [0, 1, 2, 3], orderable: false }
                ]
            });

            $('#datatable-example_wrapper .dataTables_filter input').addClass("input-medium");
            $('#datatable-example_wrapper .dataTables_length select').addClass("select2-wrapper span12").removeClass("form-control");
            $('#datatable-example input').click(function () {
                $(this).closest('tr').toggleClass('row_selected');
            });

            $(".select2-wrapper").select2({ minimumResultsForSearch: -1 });
        });
    </script>
@endsection