@extends('admin.layouts.master-index')

@section('title', 'قائمة الموديلات')

@section('table')
    <table class="table align-middle table-row-dashed fs-4 gy-5" id="table">
        <thead>
            <tr class="text-start text-muted fw-bolder fs-5 text-uppercase gs-0">
                <th class="w-10px pe-2">
                    <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                        <input class="form-check-input" type="checkbox" data-kt-check="true"
                            data-kt-check-target="#table .form-check-input" value="1" />
                    </div>
                </th>
                <th class="min-w-125px">الاسم العربي</th>
                <th class="min-w-125px">الاسم الإنجليزي</th>
                <th class="min-w-125px">العلامة التجارية</th>
                <th class="min-w-100px">الإجراءات</th>
            </tr>
        </thead>
    </table>
@endsection

<div class="modal fade" id="modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered mw-650px">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="fw-bolder" id="modal_title"></h2>
                <div class="btn btn-icon btn-sm btn-active-icon-primary" data-bs-dismiss="modal">
                    <span class="svg-icon svg-icon-1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none">
                            <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                transform="rotate(-45 6 17.3137)" fill="black" />
                            <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                transform="rotate(45 7.41422 6)" fill="black" />
                        </svg>
                    </span>
                </div>
            </div>
            <div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
                <form id="modal_form" class="form" method="post">
                    @csrf
                    @method('POST')

                    <div class="d-flex flex-column scroll-y me-n7 pe-7" id="modal_scroll" data-kt-scroll="true"
                        data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto"
                        data-kt-scroll-dependencies="#modal_header" data-kt-scroll-wrappers="#modal_scroll"
                        data-kt-scroll-offset="300px">

                        <x-form.input id="ar_name" name="ar[name]" label="اسم الموديل" required />
                        <x-form.input id="en_name" name="en[name]" label="Model Name" required />
                        <x-form.select id="brand_id" name="brand_id" label="العلامة التجارية" :options="$brands"
                            required />
                    </div>

                    <div class="text-center pt-15">
                        <button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal">إلغاء</button>
                        <button type="submit" class="btn btn-primary" data-kt-users-modal-action="submit">
                            <span class="indicator-label">حفظ</span>
                            <span class="indicator-progress">برجاء الانتظار
                                <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                            </span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@section('script')
    <script type="text/javascript">
        $(function() {
            var table = $('#table').DataTable({
                processing: true,
                serverSide: true,
                autoWidth: false,
                responsive: true,
                aaSorting: [],
                dom: "<'card-header border-0 p-0 pt-6'<'card-title' <'d-flex align-items-center position-relative my-1'f> r> <'card-toolbar' <'d-flex justify-content-end 'B> r>>  <'row'l r> <''t><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
                lengthMenu: [
                    [10, 25, 50, 100, 250, -1],
                    [10, 25, 50, 100, 250, "الكل"]
                ],
                language: {
                    search: '<i class="fa fa-eye" aria-hidden="true"></i>',
                    searchPlaceholder: 'بحث سريع',
                    url: "{{ url('admin/assets/ar.json') }}"
                },
                buttons: [{
                        extend: 'print',
                        className: 'btn btn-light-primary me-3',
                        text: '<i class="bi bi-printer-fill fs-2x"></i>'
                    },
                    {
                        extend: 'excel',
                        className: 'btn btn-light-primary me-3',
                        text: '<i class="bi bi-file-earmark-spreadsheet-fill fs-2x"></i>'
                    },
                    {
                        text: '<i class="bi bi-plus-circle-fill fs-2x"></i>',
                        className: 'btn btn-light-primary me-3',
                        action: function() {
                            $('#modal_title').text('إضافة جديدة');
                            $('#modal_form').attr('method', 'POST');
                            $('#modal_form').attr('action', '{{ route('vehicle.models.store') }}');
                            $('#ar_name').val('');
                            $('#en_name').val('');
                            $('#brand_id').val('').trigger('change');
                            $('#modal').modal('show');
                        }
                    }
                ],
                ajax: {
                    url: '{{ route('vehicle.models.datatable') }}',
                },
                columns: [{
                        data: 'checkbox',
                        name: 'checkbox',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'ar_name',
                        name: 'ar_name'
                    },
                    {
                        data: 'en_name',
                        name: 'en_name'
                    },
                    {
                        data: 'brand',
                        name: 'brand.name'
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false
                    }
                ],
            });

            $('#modal').on('submit', '#modal_form', function(e) {
                e.preventDefault();
                var form = $(this);
                $.ajax({
                    type: form.attr('method'),
                    url: form.attr('action'),
                    data: form.serialize(),
                    success: function(response) {
                        table.ajax.reload();
                        $('#modal').modal('hide');
                        toastr.success(response.message);
                    },
                    error: function(xhr) {
                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                            var errors = xhr.responseJSON.errors;
                            $.each(errors, function(key, value) {
                                value.forEach(function(errorMessage) {
                                    toastr.error(errorMessage);
                                });
                            });
                        } else {
                            toastr.error('حدث خطأ');
                        }
                    }
                });
            });

            $('#table').on('click', '.editBtn', function() {
                var url = $(this).attr('href');
                $('#modal_title').text('تعديل الموديل');
                $('#modal_form').attr('method', 'PUT');
                $('#modal_form').attr('action', url);
                $.get(url, function(data) {
                    $('#ar_name').val(data.ar.name);
                    $('#en_name').val(data.en.name);
                    $('#brand_id').val(data.brand_id).trigger('change');
                    $('#modal').modal('show');
                });
                return false;
            });
        });
    </script>
@endsection