@extends('layouts.app')

@section('content')

<div class="d-flex justify-content-between align-items-center mb-3">
    <h5 class="mb-0" style="font-weight:600;">
        <i class="fas fa-car me-2" style="color:var(--admin-primary)"></i>
        {{ isset($vehicle) ? 'Edit Vehicle' : 'Create Vehicle' }}
    </h5>

    <a href="{{ route('vehicles.index') }}" class="btn-admin-outline">
        <i class="fas fa-arrow-left me-1"></i> Back
    </a>
</div>


<div class="admin-card">
    <div class="admin-card-body">

        @include('partials.errors')

        <form action="{{ isset($vehicle) ? route('vehicles.update', $vehicle->id) : route('vehicles.store') }}"
              method="POST"
              enctype="multipart/form-data"
              class="admin-form">

            @csrf

            @if(isset($vehicle))
                @method('PUT')
            @endif


            <div class="row">

                <!-- Vehicle Name -->
                <div class="col-md-6 mb-3">
                    <label class="form-label">
                        Vehicle Name <span class="text-danger">*</span>
                    </label>

                    <input type="text"
                           name="name"
                           class="form-control"
                           placeholder="e.g. Shukrana Travels"
                           value="{{ old('name', $vehicle->name ?? '') }}"
                           required>
                </div>

                       <!-- Url Key -->
                <div class="col-md-6 mb-3">

                    <label class="form-label">
                        Url Key <span class="text-danger">*</span>
                    </label>

                    <input
                        type="text"
                        name="url_key"
                        id="url_key"
                        class="form-control"
                        value="{{ old('url_key', $vehicle->url_key ?? '') }}"
                        placeholder="e.g. shukrana-travels"
                        required>

                    <small class="text-muted">
                        Only lowercase letters, numbers and hyphens (-) are allowed.
                    </small>

                </div>


                <!-- Category -->
                <div class="col-md-6 mb-3">
                    <label class="form-label">
                        Category <span class="text-danger">*</span>
                    </label>

                    <select name="category_id"
                            class="form-control"
                            required>

                        <option value="">Select Category</option>

                        @foreach($categories as $category)
                            <option value="{{ $category->id }}"
                                {{ old('category_id', $vehicle->category_id ?? '') == $category->id ? 'selected' : '' }}>
                                {{ $category->name }}
                            </option>
                        @endforeach

                    </select>
                </div>


                <!-- Vehicle Type -->
                <div class="col-md-6 mb-3">
                    <label class="form-label">
                        Vehicle Type <span class="text-danger">*</span>
                    </label>

                    <input type="text"
                           name="vehicle_type"
                           class="form-control"
                           placeholder="e.g. Luxury AC Deluxe (2+2) Pushback Seater"
                           value="{{ old('vehicle_type', $vehicle->vehicle_type ?? '') }}"
                           required>
                </div>


               

                <!-- Departure Time -->
                <div class="col-md-6 mb-3">
                    <label class="form-label">
                        Departure Time <span class="text-danger">*</span>
                    </label>

                    <input type="time"
                           name="departure_time"
                           class="form-control"
                           value="{{ old('departure_time', $vehicle->departure_time ?? '') }}"
                           required>
                </div>


                <!-- Return Time -->
                <div class="col-md-6 mb-3">
                    <label class="form-label">
                        Return Time <span class="text-danger">*</span>
                    </label>

                    <input type="time"
                           name="return_time"
                           class="form-control"
                           value="{{ old('return_time', $vehicle->return_time ?? '') }}"
                           required>
                </div>


                <!-- Starting From Price -->
                <div class="col-md-6 mb-3">
                    <label class="form-label">
                        Starting From Price <span class="text-danger">*</span>
                    </label>

                    <input type="number"
                           step="0.01"
                           min="0"
                           name="price"
                           class="form-control"
                           placeholder="e.g. 700"
                           value="{{ old('price', $vehicle->price ?? '') }}"
                           required>
                </div>


                <!-- Status -->
                <div class="col-md-6 mb-3">
                    <label class="form-label">
                        Status <span class="text-danger">*</span>
                    </label>

                    <select name="status"
                            class="form-control"
                            required>

                        <option value="">Select Status</option>

                        <option value="1"
                            {{ old('status', $vehicle->status ?? '1') == '1' ? 'selected' : '' }}>
                            Active
                        </option>

                        <option value="0"
                            {{ old('status', $vehicle->status ?? '') == '0' ? 'selected' : '' }}>
                            Inactive
                        </option>

                    </select>
                </div>

                <!-- Vehicle Image -->
                <div class="col-md-6 mb-3" style="display:none;">

                    <label class="form-label">
                        Vehicle Image
                    </label>

                    <input type="file" name="image"  class="form-control" accept="image/*">


                    @if(isset($vehicle) && !empty($vehicle->image))

                        <div class="mt-2">

                            <img src="{{ asset('storage/vehicles/'.$vehicle->image) }}"
                                 style="height:90px;border-radius:6px;border:1px solid #ddd;">

                        </div>

                    @endif

                </div>

                 <!-- Pickup Points -->
                <div class="col-md-12 mb-3">

                    <label class="form-label">
                        Pickup Points <span class="text-danger">*</span>
                    </label>

                    @php

                        $pickupPoints = old(
                            'pickup_points',
                            $vehicle->pickup_points ?? []
                        );

                        if (is_string($pickupPoints)) {
                            $pickupPoints = json_decode($pickupPoints, true) ?? [];
                        }

                        if (empty($pickupPoints)) {
                            $pickupPoints = [''];
                        }

                    @endphp

                    <div id="pickup-wrapper">

                        @foreach($pickupPoints as $index => $pickup)

                            <div class="pickup-item border rounded p-3 mb-2">

                                <div class="row">

                                    <div class="col-md-10 mb-2">

                                        <label class="form-label">
                                            Pickup Location
                                        </label>

                                        <input type="text"
                                            name="pickup_points[]"
                                            class="form-control"
                                            placeholder="e.g. Karol Bagh Metro Station"
                                            value="{{ is_array($pickup) ? ($pickup['name'] ?? '') : $pickup }}"
                                            required>

                                    </div>

                                    <div class="col-md-2 mb-2 d-flex align-items-end">

                                        <button type="button"
                                                class="btn btn-danger remove-pickup"
                                                style="width:100%;">

                                            <i class="fas fa-trash"></i>

                                        </button>

                                    </div>

                                </div>

                            </div>

                        @endforeach

                    </div>

                    <button type="button"
                            class="btn btn-sm btn-admin-outline"
                            id="add-pickup">

                        <i class="fas fa-plus me-1"></i>
                        Add Pickup Point

                    </button>

                </div>

                            <!-- Drop Points -->
                <div class="col-md-12 mb-3">

                    <label class="form-label">
                        Drop Points <span class="text-danger">*</span>
                    </label>

                    @php

                        $dropPoints = old(
                            'drop_points',
                            $vehicle->drop_points ?? []
                        );

                        if (is_string($dropPoints)) {
                            $dropPoints = json_decode($dropPoints, true) ?? [];
                        }

                        if (empty($dropPoints)) {
                            $dropPoints = [''];
                        }

                    @endphp

                    <div id="drop-wrapper">

                        @foreach($dropPoints as $index => $drop)

                            <div class="drop-item border rounded p-3 mb-2">

                                <div class="row">

                                    <div class="col-md-10 mb-2">

                                        <label class="form-label">
                                            Drop Location
                                        </label>

                                        <input type="text"
                                            name="drop_points[]"
                                            class="form-control"
                                            placeholder="e.g. Agra Cantt Railway Station"
                                            value="{{ is_array($drop) ? ($drop['name'] ?? '') : $drop }}"
                                            required>

                                    </div>

                                    <div class="col-md-2 mb-2 d-flex align-items-end">

                                        <button type="button"
                                                class="btn btn-danger remove-drop"
                                                style="width:100%;">

                                            <i class="fas fa-trash"></i>

                                        </button>

                                    </div>

                                </div>

                            </div>

                        @endforeach

                    </div>

                    <button type="button"
                            class="btn btn-sm btn-admin-outline"
                            id="add-drop">

                        <i class="fas fa-plus me-1"></i>
                        Add Drop Point

                    </button>

                </div>

              



            </div>


            <button type="submit" class="btn-admin-primary">

                <i class="fas fa-save me-1"></i>

                {{ isset($vehicle) ? 'Update Vehicle' : 'Add Vehicle' }}

            </button>


        </form>

    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {

    /*
    |--------------------------------------------------------------------------
    | Pickup Points
    |--------------------------------------------------------------------------
    */

    const pickupWrapper = document.getElementById('pickup-wrapper');
    const addPickup = document.getElementById('add-pickup');

    addPickup.addEventListener('click', function () {

        const html = `
            <div class="pickup-item border rounded p-3 mb-2">

                <div class="row">

                    <div class="col-md-10 mb-2">

                        <label class="form-label">
                            Pickup Location
                        </label>

                        <input type="text"
                               name="pickup_points[]"
                               class="form-control"
                               placeholder="e.g. Karol Bagh Metro Station"
                               required>

                    </div>

                    <div class="col-md-2 mb-2 d-flex align-items-end">

                        <button type="button"
                                class="btn btn-danger remove-pickup"
                                style="width:100%;">

                            <i class="fas fa-trash"></i>

                        </button>

                    </div>

                </div>

            </div>
        `;

        pickupWrapper.insertAdjacentHTML('beforeend', html);
    });


    pickupWrapper.addEventListener('click', function (e) {

        const button = e.target.closest('.remove-pickup');

        if (!button) {
            return;
        }

        const items = pickupWrapper.querySelectorAll('.pickup-item');

        if (items.length > 1) {
            button.closest('.pickup-item').remove();
        }

    });


    /*
    |--------------------------------------------------------------------------
    | Drop Points
    |--------------------------------------------------------------------------
    */

    const dropWrapper = document.getElementById('drop-wrapper');
    const addDrop = document.getElementById('add-drop');

    addDrop.addEventListener('click', function () {

        const html = `
            <div class="drop-item border rounded p-3 mb-2">

                <div class="row">

                    <div class="col-md-10 mb-2">

                        <label class="form-label">
                            Drop Location
                        </label>

                        <input type="text"
                               name="drop_points[]"
                               class="form-control"
                               placeholder="e.g. Agra Cantt Railway Station"
                               required>

                    </div>

                    <div class="col-md-2 mb-2 d-flex align-items-end">

                        <button type="button"
                                class="btn btn-danger remove-drop"
                                style="width:100%;">

                            <i class="fas fa-trash"></i>

                        </button>

                    </div>

                </div>

            </div>
        `;

        dropWrapper.insertAdjacentHTML('beforeend', html);
    });


    dropWrapper.addEventListener('click', function (e) {

        const button = e.target.closest('.remove-drop');

        if (!button) {
            return;
        }

        const items = dropWrapper.querySelectorAll('.drop-item');

        if (items.length > 1) {
            button.closest('.drop-item').remove();
        }

    });

});
</script>
<script>
document.getElementById('url_key').addEventListener('input', function () {

    let value = this.value;

    value = value
        .toLowerCase()              // lowercase
        .replace(/\s+/g, '-')       // spaces → hyphen
        .replace(/[^a-z0-9-]/g, '')  // special characters remove
        .replace(/-+/g, '-')        // multiple hyphens → single
        .replace(/^-+|-+$/g, '');   // starting/ending hyphen remove

    this.value = value;
});
</script>
@endsection