@extends('admin.master')

@section('title')
    Latest Car
@endsection

@section('content')
    <div class="mt-4">
        <div class="row g-4">
            <div class="col-md-12">
                <div class="row g-3 mb-4">
                    <div class="col-auto">
                        <h2 class="mb-0">Latest Car</h2>
                    </div>
                </div>

                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">{{ $latestCar->title }}</h5>
                    </div>
                    <div class="card-body">
                        {!! Form::open(['id' => 'latestCarForm']) !!}
                        {!! Form::hidden('id', $latestCar->id, ['id' => 'latestCarId']) !!}

                        <div class="mb-3">
                            {!! Form::label('title', 'Title', ['class' => 'form-label']) !!}
                            {!! Form::text('title', $latestCar->title, [
                                'class' => 'form-control form-control-sm',
                                'id' => 'latestCarTitle',
                                'required' => true,
                                'placeholder' => 'Enter Title',
                            ]) !!}
                        </div>

                        <div class="mb-3">
                            {!! Form::label('car_ids', 'Select Cars', ['class' => 'form-label']) !!}
                            <select class="form-control form-control-sm select2" id="carSelect" name="car_ids[]" multiple="multiple" style="width: 100%;">
                                @foreach($cars as $car)
                                    <option value="{{ $car->id }}" {{ in_array($car->id, $latestCar->car_ids ?? []) ? 'selected' : '' }}>
                                        {{ $car->title }} - {{ $car->brand->brand_name ?? '' }} {{ $car->carModel->model_name ?? '' }}
                                    </option>
                                @endforeach
                            </select>
                            <small class="text-muted">Select multiple cars to display in the latest cars section</small>
                        </div>

                        <div class="d-flex gap-2 justify-content-end mt-4">
                            <button type="button" class="btn btn-outline-secondary" id="discardBtn">Discard</button>
                            <button type="submit" id="saveLatestCarBtn" class="btn btn-primary">Save changes</button>
                        </div>
                        {!! Form::close() !!}
                    </div>
                </div>

                <!-- Selected Cars List -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">Selected Cars</h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3" id="selectedCarsList">
                            @if(!empty($latestCar->car_ids))
                                @php
                                    $selectedCars = \App\Models\Car::whereIn('id', $latestCar->car_ids)->with(['brand', 'carModel'])->get();
                                @endphp
                                @foreach($selectedCars as $car)
                                    <div class="col-md-3 col-sm-6">
                                        <div class="card h-100">
                                            <div class="card-body">
                                                <h6 class="card-title">{{ $car->title }}</h6>
                                                <p class="card-text small text-muted mb-1">
                                                    <strong>Brand:</strong> {{ $car->brand->brand_name ?? 'N/A' }}<br>
                                                    <strong>Model:</strong> {{ $car->carModel->model_name ?? 'N/A' }}<br>
                                                    @if($car->price)
                                                        <strong>Price:</strong> ₹{{ number_format($car->price, 2) }}
                                                    @endif
                                                </p>
                                                <div class="d-flex gap-2 mt-2">
                                                    <a href="{{ route('admin.cars.edit', $car->id) }}" class="btn btn-sm btn-primary">
                                                        <i class="fas fa-pencil-alt"></i> Edit
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <div class="col-12">
                                    <p class="text-muted text-center">No cars selected yet.</p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection

@section('javascript')
    <script>
        $(document).ready(function() {
            // Initialize Select2 for multi-select
            $('#carSelect').select2({
                width: '100%',
                placeholder: 'Select cars...',
                allowClear: true,
                dropdownParent: $('#latestCarForm').closest('.card-body')
            });

            // Handle form submission
            $('#latestCarForm').on('submit', function(e) {
                e.preventDefault();

                let formData = {
                    title: $('#latestCarTitle').val(),
                    car_ids: $('#carSelect').val() || [],
                    _token: '{{ csrf_token() }}'
                };

                $.ajax({
                    url: "{{ route('admin.home-page.latest-cars.store') }}",
                    type: 'POST',
                    data: formData,
                    success: function(res) {
                        if (res.code == '1') {
                            successToast(res.message);
                            setTimeout(function() {
                                window.location.reload();
                            }, 1000);
                        } else {
                            dangerToast(res.message || 'Something went wrong.');
                        }
                    },
                    error: function(xhr) {
                        let errors = xhr.responseJSON?.errors;
                        let msg = '';
                        if (errors) {
                            $.each(errors, function(key, value) {
                                msg += value[0] + '\n';
                            });
                            alert(msg);
                        } else {
                            alert('Something went wrong.');
                        }
                    }
                });
            });

            // Discard button
            $('#discardBtn').on('click', function() {
                window.location.reload();
            });
        });
    </script>
@endsection