<?php
if (Auth('admin')->User()->dashboard_style == 'light') {
    $text = 'dark';
} else {
    $text = 'light';
}
?>
@extends('layouts.app')
@section('content')
    @include('admin.topmenu')
    @include('admin.sidebar')
    <div class="main-panel">
        <div class="content">
            <div class="page-inner">
                <div class="page-header">
                    <h4 class="page-title text-{{ $text }}">Edit Car: {{ $car->name }}</h4>
                    <ul class="breadcrumbs">
                        <li class="nav-home"><a href="{{ route('admin.dashboard') }}"><i class="flaticon-home"></i></a></li>
                        <li class="separator"><i class="flaticon-right-arrow"></i></li>
                        <li class="nav-item"><a href="{{ route('admin.cars.index') }}">Cars</a></li>
                        <li class="separator"><i class="flaticon-right-arrow"></i></li>
                        <li class="nav-item"><span class="text-{{ $text }}">Edit</span></li>
                    </ul>
                </div>

                @if($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show">
                        {{ session('success') }}
                        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                    </div>
                @endif

                <form action="{{ route('admin.cars.update', $car) }}" method="POST" enctype="multipart/form-data">
                    @csrf @method('PUT')
                    <div class="row">
                        <div class="col-md-8">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title text-{{ $text }}">Car Details</h4>
                                </div>
                                <div class="card-body">
                                    <div class="form-group">
                                        <label>Name <span class="text-danger">*</span></label>
                                        <input type="text" name="name" class="form-control" value="{{ old('name', $car->name) }}" required>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Make <span class="text-danger">*</span></label>
                                                <input type="text" name="make" class="form-control" value="{{ old('make', $car->make) }}" required>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Model <span class="text-danger">*</span></label>
                                                <input type="text" name="model" class="form-control" value="{{ old('model', $car->model) }}" required>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Year <span class="text-danger">*</span></label>
                                                <input type="number" name="year" class="form-control" value="{{ old('year', $car->year) }}" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Color <span class="text-danger">*</span></label>
                                                <input type="text" name="color" class="form-control" value="{{ old('color', $car->color) }}" required>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Engine</label>
                                                <input type="text" name="engine" class="form-control" value="{{ old('engine', $car->engine) }}">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Transmission</label>
                                                <select name="transmission" class="form-control">
                                                    <option value="automatic" {{ old('transmission', $car->transmission) == 'automatic' ? 'selected' : '' }}>Automatic</option>
                                                    <option value="manual" {{ old('transmission', $car->transmission) == 'manual' ? 'selected' : '' }}>Manual</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Price ($)</label>
                                                <input type="number" name="price" class="form-control" value="{{ old('price', $car->price) }}" step="0.01" min="0" required>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Quantity</label>
                                                <input type="number" name="quantity" class="form-control" value="{{ old('quantity', $car->quantity) }}" min="0" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>Description</label>
                                        <textarea name="description" class="form-control" rows="5">{{ old('description', $car->description) }}</textarea>
                                    </div>
                                </div>
                            </div>

                            {{-- Existing Photos --}}
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title text-{{ $text }}">Existing Photos</h4>
                                </div>
                                <div class="card-body">
                                    <div class="row" id="photo-gallery">
                                        @foreach($car->photos as $photo)
                                            <div class="col-md-3 mb-3" id="photo-{{ $photo->id }}">
                                                <div class="position-relative">
                                                    <img src="{{ asset('dash/' . $photo->photo_path) }}" class="img-fluid rounded" style="height:120px;width:100%;object-fit:cover;">
                                                    @if($photo->is_primary)
                                                        <span class="badge badge-success position-absolute" style="top:5px;left:10px;">Primary</span>
                                                    @endif
                                                    <button type="button" class="btn btn-danger btn-sm position-absolute" style="top:5px;right:10px;" onclick="deletePhoto({{ $photo->id }})">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                    <hr>
                                    <div class="form-group">
                                        <label>Add More Photos</label>
                                        <input type="file" name="photos[]" class="form-control-file" multiple accept="image/*">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title text-{{ $text }}">Settings</h4>
                                </div>
                                <div class="card-body">
                                    <div class="form-group">
                                        <label>Status</label>
                                        <select name="status" class="form-control">
                                            <option value="available" {{ old('status', $car->status) == 'available' ? 'selected' : '' }}>Available</option>
                                            <option value="unavailable" {{ old('status', $car->status) == 'unavailable' ? 'selected' : '' }}>Unavailable</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="featured" name="featured" value="1" {{ old('featured', $car->featured) ? 'checked' : '' }}>
                                            <label class="custom-control-label" for="featured">Featured Car</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title text-{{ $text }}">Specs</h4>
                                </div>
                                <div class="card-body">
                                    <div class="spec-row mb-2">
                                        <label class="small">Range</label>
                                        <input type="text" name="specs[range]" class="form-control" value="{{ old('specs.range', $car->specs['range'] ?? '') }}" placeholder="e.g. 348 mi">
                                    </div>
                                    <div class="spec-row mb-2">
                                        <label class="small">0-60 mph</label>
                                        <input type="text" name="specs[acceleration]" class="form-control" value="{{ old('specs.acceleration', $car->specs['acceleration'] ?? '') }}" placeholder="e.g. 2.5s">
                                    </div>
                                    <div class="spec-row mb-2">
                                        <label class="small">Top Speed</label>
                                        <input type="text" name="specs[top_speed]" class="form-control" value="{{ old('specs.top_speed', $car->specs['top_speed'] ?? '') }}" placeholder="e.g. 163 mph">
                                    </div>
                                    <div class="spec-row mb-2">
                                        <label class="small">Horsepower</label>
                                        <input type="text" name="specs[horsepower]" class="form-control" value="{{ old('specs.horsepower', $car->specs['horsepower'] ?? '') }}" placeholder="e.g. 1,020 hp">
                                    </div>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary btn-lg btn-block">
                                <i class="fas fa-save"></i> Update Car
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        function deletePhoto(photoId) {
            if (!confirm('Delete this photo?')) return;
            fetch("{{ url('admin/dashboard/cars/photos') }}/" + photoId, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            }).then(res => res.json()).then(data => {
                if (data.success) {
                    document.getElementById('photo-' + photoId).remove();
                }
            });
        }
    </script>
@endsection
