@extends('template.layouts.template-base')
@section('title', 'Add Vehicle')

@section('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
    <script src="https://cdn.ckeditor.com/4.21.0/standard/ckeditor.js"></script>
    <script>
        CKEDITOR.config.removePlugins = 'notification,notificationaggregator';
    </script>

@endsection

@section('content')
    <section class="product-page master-add-vehicle">
        <!-- Header -->
        <div class="page-header">
            <div class="container-fluid">
                <div class="row align-items-center">
                    <div class="col">
                        <div class="page-title">
                            <a href="{{ route('backend.master.index-vehicle-type') }}">Master / <span
                                    class="breadcrumb-link">Add Vehicle Type</span></a>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <!-- Main Container -->
        <div class="container-fluid p-0">
            <form id="productForm" method="POST" action="{{ route('backend.master.store-vehicle-type') }}"
                enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="status" value="{{ old('status', (int) $vehicleType->status) }}">
                <!-- Section 1: Product -->
                <div class="add-product-section">
                    <h2 class="section-title">Vehicle Information</h2>

                    <div class="row">

                        <div class="col-lg-4">
                            <label>Vehicle Type <span class="required">*</span></label>
                            <input type="text" name="name" placeholder="Enter Vehicle Type"
                                value="{{ old('name', $vehicleType->name) }}" />
                        </div>
                        <div class="col-lg-4">
                            <label>Capacity</label>
                            <div class="input-with-prefix">
                                <span class="input-prefix">Kg</span>
                                <input type="text" name="default_capacity_kg" placeholder="Enter Capacity (Kg)"
                                    value="{{ old('default_capacity_kg', $vehicleType->default_capacity_kg) }}" />
                            </div>
                        </div>
                        <div class="col-lg-4">
                        <label>Status <span class="error">*</span></label>
                        <div class="d-flex gap-3">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="status" id="statusActive" value="1"
                                    {{ old('status', $vehicleType->status) == 1 ? 'checked' : '' }}>
                                <label class="form-check-label" for="statusActive">Active</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="status" id="statusInactive" value="0"
                                    {{ old('status', $vehicleType->status) == 0 ? 'checked' : '' }}>
                                <label class="form-check-label" for="statusInactive">Inactive</label>
                            </div>
                        </div>
                    </div>
                        <div class="col-md-12">
                            <div class="d-flex flex-column mt-3">
                                <label class="form-label">Notes</label>
                                <textarea name="description" class="w-100" placeholder="Enter Here" id="delivery-note" rows="5">{{ old('description', $vehicleType->description) }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <!-- Action Buttons -->
        <div class="action-buttons py-4">
            <button type="button" class="btn btn-secondary"
                onclick="window.location.href='{{ route('backend.master.index-vehicle-type') }}'">Cancel</button>
            <button type="submit" form="productForm" class="btn btn-primary show-toast"
                data-toast-target="#deleteVehicleToast">Save</button>
        </div>

    </section>

    <div class="modal fade remove-role-name forgot-popup-screen" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content rounded-4">

                <div class="modal-header">
                    <div class="modal-icon-box">
                        <i class="bx bxs-trash"></i>
                    </div>
                    <h5>Delete Role Name?</h3>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body inquiry-preview-modal p-4">

                    <div class="row form-row edit-category">

                        <div class="col-lg-12 col-md-12">
                            <p>Are you sure you want to delete role name? These role name will be permanently removed from
                                the roles list. This action cannot be undone. If any users are assigned to this role, you
                                must reassign them before deleting.</p>
                        </div>
                    </div>

                    <!-- Buttons -->
                    <div class="hstack gap-2 w-100 mt-4 justify-content-end">

                        <button type="button" data-bs-dismiss="modal" class="btn cancel-btn">
                            Cancel
                        </button>
                        <button type="button" class="btn delete-btn show-toast" data-toast-target="#deleteUserNameToast">
                            Delete
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
        <div id="deleteUserNameToast" class="toast login-success-toast" role="alert" aria-live="assertive"
            aria-atomic="true">

            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">
                        ✓
                    </div>
                </div>
                <div class="toast-right">
                    <h6>Deleted Successful</h6>
                    <p>These roles has been deleted successfully.</p>
                </div>
            </div>
        </div>
    </div>


    <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
        <div id="deleteVehicleToast" class="toast login-success-toast" role="alert" aria-live="assertive"
            aria-atomic="true">

            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">
                        ✓
                    </div>
                </div>
                <div class="toast-right">
                    <h6>Created Successfully</h6>
                    <p>The vehicle type has been created successfully.</p>
                </div>
            </div>
        </div>
    </div>
    @include('template.layouts.error-modal')
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            if (!$.fn.validate) {
                return;
            }

            $('#productForm').validate({
                ignore: [],
                rules: {
                    name: {
                        required: true,
                        minlength: 2,
                        maxlength: 255
                    },
                    default_capacity_kg: {
                        number: true,
                        min: 0
                    }
                },
                messages: {
                    name: {
                        required: 'Please enter vehicle type name',
                        minlength: 'Vehicle type name must be at least 2 characters long',
                        maxlength: 'Vehicle type name must be less than 255 characters'
                    },
                    default_capacity_kg: {
                        number: 'Please enter valid capacity',
                        min: 'Capacity cannot be negative'
                    }
                },
                errorElement: 'span',
                errorClass: 'text-danger validation-error',
                highlight: function(element) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element) {
                    $(element).removeClass('is-invalid');
                },
                errorPlacement: function(error, element) {
                    error.insertAfter(element);
                }
            });
        });
    </script>
@endsection