@extends('adminlte::page')

@section('title', 'Dashboard')

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

@section('content')
    <div class="card card-dark">
        <div class="card-header">
            <h3 class="card-title">Edit Vehicle Types</h3>
        </div>
        <form method="POST" id="edit_vehicle_type" role="form"
            action="{{ route('vehicle_type.update', $vehicle_type->id) }}" class="jqueryValidation" enctype="multipart/form-data">
            @csrf
            @method('PATCH')
            <div class="card-body">
                <div class="card-body">
                    <div class="form-group">
                        <label for="name">Name</label>
                        <x-adminlte-input class="form-control" id="name" name="name" placeholder="Enter Name"
                            value="{{ old('name') ?? $vehicle_type->name }}" required />
                    </div>
                    <div class="form-group">
                        <label for="vehicle_type_image">Vehicle Type Icon</label>
                        <x-adminlte-input type="file" class="form-control" id="vehicle_type_image"
                            name="vehicle_type_image" value="{{ old('vehicle_type_image') }}" />
                              {{-- Existing image preview --}}  
                        <div id="preview-container" style="margin-top: 10px;">
                            @if(!empty($imageUrl))
                                <img id="image-preview" src="{{ $imageUrl }}" alt="Vehicle Type Image" style="max-width: 150px; max-height: 150px;">
                            @else
                                <img id="image-preview" src="#" alt="Preview" style="display: none; max-width: 150px; max-height: 150px;">
                            @endif
                        </div>
                    </div>
                    <div class="card-footer d-flex justify-content-end">
                        <a href="{{ route('vehicle_type.index') }}" class="btn btn-danger mx-1">Cancel</a>
                        <button type="submit" class="btn btn-dark mx-1">Update</button>
                    </div>
        </form>
    </div>
@stop
@push('js')
<script>
    document.getElementById('vehicle_type_image').addEventListener('change', function (e) {
        const file = e.target.files[0];
        const preview = document.getElementById('image-preview');

        if (file) {
            const reader = new FileReader();

            reader.onload = function (e) {
                preview.src = e.target.result;
                preview.style.display = 'block';
            };

            reader.readAsDataURL(file);
        } else {
            preview.src = '#';
            preview.style.display = 'none';
        }
    });
</script>
@endpush