@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('cities-destroy')
                                    <a id="del" href="javascript:void(0)" class="btn btn-danger"
                                        data-url="{{ URL::to('admin/cities/bulkdelete') }}">حذف</a>
                                @endcan
                            </div>
                        </div>

                        <div class="col-sm-4 col-xs-12">
                            <div class="c-page-title">
                                <span> المدينة </span>
                            </div>


                        </div>

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

                            @cannot('cities-create')
                                @can('cities-destroy')
                                    <a href="#" class="btn btn-primary" style="visibility: hidden;">no visibilty</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>
                                <th></th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Add City 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 method="POST" action="{{ route('cities.store') }}" id="form_albumimage"
                    class="labels-align-verticle">
                    @csrf
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel">إضافة مدينة</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group row">
                            <div class="right col-md-5 col-md-offset-3 col-sm-12">
                                <select name="country_id" id="country_select2" class="select_country" required
                                    style="width:100%" dir="rtl">
                                    <option value="">-- اختر --</option>
                                    @foreach ($countries as $id => $name)
                                        <option value="{{ $id }}">{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-2 col-sm-12 text-left">
                                <label for="country" class="form-label">البلد</label>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="right col-md-5 col-md-offset-3 col-sm-12">
                                <input type="text" name="name" class="form-control" required maxlength="20">
                            </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")'>إلغاء</button>
                        <button type="submit" class="btn btn-primary">تحديث</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Edit City 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 method="POST" action="{{ route('admin.cities.editcity') }}" id="form_row_edit"
                    class="labels-align-verticle">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" id="id_field" name="request_id">
                        <div class="form-group row">
                            <div class="right col-md-5 col-md-offset-3 col-sm-12">
                                <select name="country_id" id="country_select" class="form-control select_country"
                                    required style="width:100%;">
                                    <option value="">-- اختر --</option>
                                    @foreach ($countries as $id => $name)
                                        <option style="text-align: right" value="{{ $id }}">{{ $name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-2 col-sm-12 text-left">
                                <label for="country" class="form-label">البلد</label>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="right col-md-5 col-md-offset-3 col-sm-12">
                                <input type="text" name="name" id="name_field" class="form-control" required
                                    maxlength="20">
                            </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" style="font-weight:bold;">تحديث</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

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

@endsection

@section('page_script')
    <script type="text/javascript" language="javascript" class="init">
        $("select").select2({
            dir: "rtl",
            placeholder: "اضغط"
        });

        function closeModal(id) {
            $(id).modal('hide');
        }

        // Open edit modal and populate fields
        $(document).on("click", "#request", function(e) {
            e.preventDefault();
            let request = $(this).data('request');

            $("#name_field").val(request.name);
            $('#country_select').val(request.country_id).trigger('change');
            $('#id_field').val(request.id);
        });

        // DataTable initialization
        $(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.cities.datatable') }}",
                    type: "POST",
                    data: {
                        _token: '{{ csrf_token() }}'
                    }
                },
                columns: [{
                        data: 'check',
                        name: 'check'
                    },
                    {
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'country_name',
                        name: 'countries.name'
                    },
                    {
                        data: 'name',
                        name: 'cities.name'
                    },
                    {
                        data: 'actions',
                        name: 'actions'
                    }
                ],
                iDisplayLength: 50,
                columnDefs: [{
                        targets: [1],
                        visible: false,
                        searchable: false
                    },
                    {
                        targets: [0, 4],
                        searchable: false
                    },
                    {
                        targets: [0, 1, 2, 3, 4],
                        orderable: false
                    },
                ]
            });
        });
    </script>
    <script src="{{ asset('assets/plugins/jquery-notifications/js/messenger.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/plugins/jquery-notifications/js/messenger-theme-future.js') }}" type="text/javascript">
    </script>
@endsection