@extends('template.layouts.template-base')
@section('title', 'Edit 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">Edit 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.update-vehicle-type', $vehicleType->id) }}" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <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="error">*</span></label>
                            <input type="text" name="name" placeholder="Enter Vehicle Type"
                                value="{{ old('name', $vehicleType->name) }}" />
                        </div>
                        <div class="col-lg-4">
                            <label>Capacity <span class="error">*</span></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">Update</button>
        </div>

    </section>
    @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);
        },
        submitHandler: function (form) {
            $('#loading-image').show();
            $(':submit', form).prop('disabled', true);
            form.submit();
        }
    });
});
    </script>
@endsection