@extends('tenant.layouts.master')

@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.representative_settings') => '#',
            __('breadcrumb.delivery_cars') => '#',
        ],
    ])
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'settings.representatives.delivery-cars'])
@endsection

@section('content')
    <div class="inner-content-layout form-bg-color p-4 rounded-form">
        <div class="d-flex align-items-center justify-content-between">
            <h4>@lang('settings/representatives/delivery-cars.delivery_cars')</h4>

            <button class="btn btn-sm orange-btn" type="button" title="{{__('general.add')}}" data-bs-toggle="modal"
                data-bs-target="#addDeliveryCarModal">
                <i class="fas fa-plus-circle"></i> @lang('settings/representatives/delivery-cars.add_cars')
            </button>
        </div>

        <div>
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th class="xs-td">#</th>
                        <th class="md-td"> @lang('settings/representatives/delivery-cars.car_number')</th>
                        <th class="sm-td"></th>
                    </tr>
                </thead>

                <tbody>
                    @forelse ($delivery_cars as $delivery_car)
                        <tr>
                            <td class="xs-td">{{ $loop->iteration }}</td>
                            <td class="md-td">{{ $delivery_car->number }}</td>
                            <td class="sm-td">
                                <x-operations-btn>
                                    <li>
                                        <button class="btn edit-delivery-car-btn" type="button"
                                            data-car="{{ json_encode($delivery_car) }}" data-bs-toggle="modal"
                                            data-bs-target="#editDeliveryCarModal">
                                            <i class="fas fa-edit"></i>  @lang('general.edit')
                                        </button>
                                    </li>

                                    <li>
                                        <button class="btn delete-delivery-car-btn" type="button">
                                            <i class="fas fa-trash-alt"></i> @lang('settings/representatives/delivery-cars.delete')
                                        </button>

                                        <form
                                            action="{{ route('tenant.settings.representatives.delivery-cars.destroy', ['delivery_car' => $delivery_car->id]) }}"
                                            method="post" class="delete-delivery-car-form">
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                    </li>
                                </x-operations-btn>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="100%">
                                @lang('settings/representatives/delivery-cars.no_delivery_cars_yet')
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Add new delivery car modal --}}
        <div class="modal fade" id="addDeliveryCarModal" tabindex="-1" role="dialog" aria-labelledby="addDeliveryCarModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addDeliveryCarModalLabel"> @lang('settings/representatives/delivery-cars.add_car')</h5>
                        <button type="button" class="btn-close ms-0" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form action="{{ route('tenant.settings.representatives.delivery-cars.store') }}" method="post"
                            id="addDeliveryCarForm">
                            @csrf

                            <div>
                                <label for="number" class="rs">@lang('settings/representatives/delivery-cars.car_number')</label>
                                <input type="text" name="number" id="number" class="form-control"
                                    placeholder="{{__('settings/representatives/delivery-cars.car_number')}}" required>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" form="addDeliveryCarForm" class="btn orange-btn form-btn">@lang('general.add')</button>
                        <button type="button" class="btn white-btn" data-bs-dismiss="modal">@lang('general.cancel')</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Edit the delivery car modal --}}
        <div class="modal fade" id="editDeliveryCarModal" tabindex="-1" role="dialog" aria-labelledby="editBankModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editBankModalLabel">@lang('settings/representatives/delivery-cars.edit_car')</h5>
                        <button type="button" class="btn-close ms-0" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form action="#" method="post" id="editDeliveryCarForm">
                            @csrf
                            @method('PUT')

                            <div>
                                <label for="editCarNumber" class="rs"> @lang('settings/representatives/delivery-cars.car_number')</label>
                                <input type="text" name="number" id="editCarNumber" class="form-control"
                                    placeholder="{{__('settings/representatives/delivery-cars.car_number')}}" required>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" form="editDeliveryCarForm" class="btn orange-btn form-btn">@lang('general.edit')</button>
                        <button type="button" class="btn white-btn" data-bs-dismiss="modal">@lang('general.cancel')</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script type="module">
        import {
            confirmAndSubmit
        } from '/tenancy/assets/js/helpers.js';

        $(() => {
            $('#addDeliveryCarForm').on('submit', function(e) {
                e.preventDefault();
                confirmAndSubmit('addDeliveryCarForm', {
                    type: 'green'
                });
            });

            $('#editDeliveryCarForm').on('submit', function(e) {
                e.preventDefault();
                confirmAndSubmit('editDeliveryCarForm', {
                    type: 'green'
                });
            });

            $('.edit-delivery-car-btn').on('click', function() {
                const car = JSON.parse($(this).attr('data-car'));
                const link = `/settings/representatives/delivery-cars/${car.id}`;
                $('#editDeliveryCarModal form').prop('action', link);
                $('#editDeliveryCarModal form #editCarNumber').val(car.number);
            });

            $('.delete-delivery-car-btn').on('click', function() {
                $.confirm({
                    title: 'هل أنت متأكد من حذف السيارة ؟',
                    content: '',
                    type: 'red',
                    buttons: {
                        ok: {
                            text: "نعم",
                            btnClass: 'btn orange-btn',
                            keys: ['enter'],
                            action: () => {
                                $(this).closest('li').find('form.delete-delivery-car-form').trigger(
                                    'submit');
                            }
                        },
                        cancel: {
                            text: "الغاء",
                            btnClass: 'btn-default',
                            keys: ['esc']
                        }
                    }
                });
            });
        });
    </script>
@endpush