@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h1>Edit Vehicles</h1>
    {{-- <small>Manage Vehicles</small> --}}
@stop

@section('content')
    <div class="card card-dark">
        <div class="card-header">
            <h3 class="card-title"> edit Vehicle </h3>
        </div>
<form method="POST" id="add_vehicle" role="form" action="{{ route('update.cargo.vehicle',$cargo_vehicle->id) }}" enctype="multipart/form-data" class="jqueryValidation">
    @csrf
    <div class="card-body editCard_body">

        {{-- Transporter --}}
        <div class="form-group row">
            <div class="col-md-6">
                <label for="group">Transporter</label>
                <select class="form-control select2" name="transporter_id" required>
                    <option value="">--Select--</option>
                    @foreach ($transporters as $key)
                        <option value="{{ $key->id }}"
                            {{ old('transporter_id', $cargo_vehicle->transporter_id ?? '') == $key->id ? 'selected' : '' }}>
                            {{ $key->get_user->name }} {{ $key->get_user->last_name }}
                        </option>
                    @endforeach
                </select>
            </div>

            {{-- Image Upload --}}
            <div class="col-md-6">
                <label for="cargo_vehicle_image">Image</label>
                <input class="form-control" id="cargo_vehicle_image" name="cargo_vehicle_image" type="file" />
                {{-- Always show the container, but hide it by default via style --}}
                <div id="imagePreviewContainer" style="margin-top:10px; position:relative; display: {{ $cargo_vehicle->getFirstMedia('cargo_vehicle_image') ? 'block' : 'none' }};">
                    <img
                        id="imagePreview"
                        src="{{ $cargo_vehicle->getFirstMediaUrl('cargo_vehicle_image') }}"
                        alt="Image Preview"
                        style="max-width: 20%; height: auto; border:1px solid #2e2c2c; padding:5px;" />

                    <span id="removeImage"
                        style="position:absolute; top:5px; right:5px; background:#fff; border-radius:50%; padding:2px 6px; cursor:pointer; color:red; font-weight:bold;">
                        &times;
                    </span>
                </div>
            </div>
        </div>

        {{-- Brand and Model --}}
        <div class="form-group row">
            <div class="col-md-6">
                <label for="cargo_brand_id">Brand</label>
                <select class="form-control select2" name="cargo_brand_id" id="cargo_brand_id" required>
                    <option value="">--Select Brand--</option>
                    @foreach ($cargo_brands as $brand)
                        <option value="{{ $brand->id }}"
                            {{ old('cargo_brand_id', $cargo_vehicle->cargo_brand_id ?? '') == $brand->id ? 'selected' : '' }}>
                            {{ $brand->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-6">
                <label for="cargo_model_id">Model</label>
                <select class="form-control select2" name="cargo_model_id" id="cargo_model_id" required>
                    @foreach ($cargo_models as $model)
                        <option value="{{ $model->id }}"
                            {{ old('cargo_model_id', $cargo_vehicle->cargo_model_id ?? '') == $model->id ? 'selected' : '' }}>
                            {{ $model->name }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>

        {{-- Type and Fuel --}}
        <div class="form-group row">
            <div class="col-md-6">
                <label for="cargo_type_id">Vehicle Type</label>
                <select class="form-control select2" name="cargo_type_id" required>
                    <option value="">--Select--</option>
                    @foreach ($cargo_types as $type)
                        <option value="{{ $type->id }}"
                            {{ old('cargo_type_id', $cargo_vehicle->cargo_type_id ?? '') == $type->id ? 'selected' : '' }}>
                            {{ $type->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-6">
                <label for="fuel_type">Fuel Type</label>
                <select name="fuel_type" id="fuel_type" class="form-control" required>
                    <option value="">--Select--</option>
                    @foreach (App\Models\CargoVehicle::fuel_type as $key => $label)
                        <option value="{{ $key }}"
                            {{ old('fuel_type', $cargo_vehicle->fuel_type ?? '') == $key ? 'selected' : '' }}>
                            {{ $label }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>

        {{-- Body Type & Ramp --}}
        <div class="form-group row">
            <div class="col-md-6">
                <label for="body_type">Body Type</label>
                <select name="body_type" id="body_type" class="form-control" required>
                    <option value="">--Select--</option>
                    @foreach (App\Models\CargoVehicle::body_type as $key => $label)
                        <option value="{{ $key }}"
                            {{ old('body_type', $cargo_vehicle->body_type ?? '') == $key ? 'selected' : '' }}>
                            {{ $label }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-6">
                <label for="loading_ramp_available">Loading Ramp Available</label>
                <select name="loading_ramp_available" id="loading_ramp_available" class="form-control" required>
                    <option value="">--Select--</option>
                    @foreach (App\Models\CargoVehicle::loading_ramp_available as $key => $label)
                        <option value="{{ $key }}"
                            {{ old('loading_ramp_available', $cargo_vehicle->loading_ramp_available ?? '') == $key ? 'selected' : '' }}>
                            {{ $label }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>

        {{-- Weight & Unit --}}
        <div class="form-group row">
            <div class="col-md-6">
                <label for="weight_capacity">Weight Capacity</label>
                <input type="number" class="form-control" id="weight_capacity" name="weight_capacity"
                    value="{{ old('weight_capacity', $cargo_vehicle->weight_capacity ?? '') }}" placeholder="Enter Weight Capacity" required />
            </div>

            <div class="col-md-6">
                <label for="weight_unit">Weight Unit</label>
                <select name="weight_unit" id="weight_unit" class="form-control" required>
                    <option value="">--Select--</option>
                    @foreach (App\Models\CargoVehicle::weight_unit as $key => $label)
                        <option value="{{ $key }}"
                            {{ old('weight_unit', $cargo_vehicle->weight_unit ?? '') == $key ? 'selected' : '' }}>
                            {{ $label }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>

        {{-- Permit & Length --}}
        <div class="form-group row">
            <div class="col-md-6">
                <label for="permit_type">Permit Type</label>
                <select name="permit_type" id="permit_type" class="form-control" required>
                    <option value="">--Select--</option>
                    @foreach (App\Models\CargoVehicle::permit_type as $key => $label)
                        <option value="{{ $key }}"
                            {{ old('permit_type', $cargo_vehicle->permit_type ?? '') == $key ? 'selected' : '' }}>
                            {{ $label }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-6">
                <label for="length_in">Length</label>
                <input type="number" class="form-control" id="length_in" name="length_in" step="0.01"
                    value="{{ old('length_in', $cargo_vehicle->length_in ?? '') }}" placeholder="Enter length" required />
            </div>
        </div>

        {{-- Width & Depth --}}
        <div class="form-group row">
            <div class="col-md-6">
                <label for="width_in">Width</label>
                <input type="number" class="form-control" id="width_in" name="width_in" step="0.01"
                    value="{{ old('width_in', $cargo_vehicle->width_in ?? '') }}" placeholder="Enter width" required />
            </div>

            <div class="col-md-6">
                <label for="depth_in">Depth</label>
                <input type="number" class="form-control" id="depth_in" name="depth_in" step="0.01"
                    value="{{ old('depth_in', $cargo_vehicle->depth_in ?? '') }}" placeholder="Enter depth" required />
            </div>
        </div>

        {{-- Bed Unit & Status --}}
        <div class="form-group row">
            <div class="col-md-6">
                <label for="bed_dimension_unit">Bed Dimension Unit</label>
                <select name="bed_dimension_unit" id="bed_dimension_unit" class="form-control" required>
                    <option value="">--Select--</option>
                    @foreach (App\Models\CargoVehicle::bed_dimension_unit as $key => $label)
                        <option value="{{ $key }}"
                            {{ old('bed_dimension_unit', $cargo_vehicle->bed_dimension_unit ?? '') == $key ? 'selected' : '' }}>
                            {{ $label }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-6">
                <label for="status">Status</label>
                <select name="status" id="status" class="form-control">
                    @foreach (App\Models\Vehicles::status as $key => $status)
                        <option value="{{ $key }}"
                            {{ old('status', $cargo_vehicle->status ?? '') == $key ? 'selected' : '' }}>
                            {{ $status }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>

        {{-- Inactive Reason --}}
        <div class="form-group row">
            <div class="col-md-6" id="inactive_reason_group" style="display: none;">
                <label for="inactive_reason">Reason</label>
                <x-adminlte-textarea class="form-control" id="inactive_reason" name="inactive_reason"
                    placeholder="Enter Inactive or Banned Reason">{{ old('inactive_reason', $cargo_vehicle->inactive_reason ?? '') }}</x-adminlte-textarea>
            </div>
        </div>

        <div class="card-footer d-flex justify-content-end">
            <a href="{{ route('vehicle.index') }}" class="btn btn-danger mx-1">Cancel</a>
            <button type="submit" class="btn btn-dark mx-1">Submit</button>
        </div>
    </div>
</form>
    </div>
@stop

@section('js')
<script>
    $(document).ready(function () {
        var selectedBrandId = "{{ $cargo_vehicle->cargo_brand_id }}";
        var selectedModelId = "{{ $cargo_vehicle->cargo_model_id }}";

        function loadModelsByBrand(brandId, preselectedModelId = null) {
            if (brandId) {
                $.ajax({
                    url: '{{ route("get.models.by.brand") }}',
                    type: 'GET',
                    data: { brand_id: brandId },
                    success: function (data) {
                        $('#cargo_model_id').empty().append('<option value="">--Select Model--</option>');
                        $.each(data, function (key, model) {
                            $('#cargo_model_id').append(
                                '<option value="' + model.id + '"' +
                                (model.id == preselectedModelId ? ' selected' : '') +
                                '>' + model.name + '</option>'
                            );
                        });
                    }
                });
            } else {
                $('#cargo_model_id').empty().append('<option value="">--Select Model--</option>');
            }
        }

        // Load on page load
        if (selectedBrandId) {
            $('#cargo_brand_id').val(selectedBrandId).trigger('change');
            loadModelsByBrand(selectedBrandId, selectedModelId);
        }

        // Load on brand change
        $('#cargo_brand_id').on('change', function () {
            var brandId = $(this).val();
            loadModelsByBrand(brandId);
        });
    });

    // image preview code
        document.addEventListener('DOMContentLoaded', function () {
        const input = document.getElementById('cargo_vehicle_image');
        const previewContainer = document.getElementById('imagePreviewContainer');
        const preview = document.getElementById('imagePreview');
        const removeBtn = document.getElementById('removeImage');

        input.addEventListener('change', function (event) {
            const file = event.target.files[0];

            if (file) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    preview.src = e.target.result;
                    previewContainer.style.display = 'block';
                };
                reader.readAsDataURL(file);
            }
        });

        if (removeBtn) {
            removeBtn.addEventListener('click', function () {
                preview.src = '';
                input.value = '';
                previewContainer.style.display = 'none';
            });
        }
    });

// For banned and inactive reason
function toggleInactiveReason() {
    const value = $('#status').val();
    if (value === "0" || value === "2") {
        $('#inactive_reason_group').show();
    } else {
        $('#inactive_reason_group').hide();
        $('#inactive_reason').val('');
    }
}

$('#status').on('change', toggleInactiveReason);
toggleInactiveReason();

</script>
@endsection