@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"> Add Vehicle Type</h3>
        </div>
        {{-- @if (session('error'))
            <h6 class="alert alert-danger">
                {{ session('error') }}
            </h6>
        @endif --}}
        {{-- @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif --}}
        <form method="POST" id="add_vehicle_type" role="form" action="{{ route('vehicle_type.store') }}"
            class="jqueryValidation" enctype="multipart/form-data">
            @csrf

            <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') }}" 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') }}" required />
                       {{-- Image preview --}}
                        <div id="imagePreviewContainer" style="position: relative; margin-top: 10px; display: none;">
                            <span id="removeImagePreview"
                                style="position: absolute; top: -10px; left: -10px; background: red; color: white; border-radius: 50%; width: 20px; height: 20px; text-align: center; line-height: 20px; cursor: pointer; font-weight: bold;">×</span>
                            <img id="imagePreview" src="#" alt="Image Preview" style="max-width: 200px; height: auto;" />
                        </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">Submit</button>
                </div>


            </div>
        </form>
    </div>
@stop

@push('js')
<script>
    const fileInput = document.getElementById('vehicle_type_image');
    const previewContainer = document.getElementById('imagePreviewContainer');
    const previewImage = document.getElementById('imagePreview');
    const removeBtn = document.getElementById('removeImagePreview');

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

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

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

            reader.readAsDataURL(file);
        } else {
            previewContainer.style.display = 'none';
        }
    });

    removeBtn.addEventListener('click', function () {
        // Clear preview
        previewImage.src = '#';
        previewContainer.style.display = 'none';

        // Clear input
        fileInput.value = '';
    });
</script>
@endpush