@extends('dashboard.admin.layout')

@section('title', 'Inventory Cars')
@section('page_subtitle', 'Inventory table first, with add-car flow moved into a modal.')

@section('content')
<div class="admin-inner">
  <div class="card">
    <div class="card-header">
      <div class="management-toolbar">
        <div class="management-copy">
          <h5>Inventory List</h5>
          <p>Review all vehicles first, then create new inventory records from the action button.</p>
        </div>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createCarModal">
          <i class="icon ion-md-add"></i> Add Car
        </button>
      </div>
    </div>
    <div class="card-body pt-0 table-responsive">
      <table class="table">
        <thead><tr><th>ID</th><th>Preview</th><th>Name</th><th>Price</th><th>Available</th><th>Status</th><th>Actions</th></tr></thead>
        <tbody>
        @forelse($cars as $car)
          <tr>
            <td>{{ $car->id }}</td>
            <td>
              @if($car->hero_image)
                <img src="{{ $car->hero_image }}" alt="{{ $car->name }}" class="admin-thumb">
              @else
                <span class="admin-thumb-empty">No image</span>
              @endif
            </td>
            <td>{{ $car->name }} ({{ $car->year }})</td>
            <td>${{ number_format($car->price, 2) }}</td>
            <td>{{ $car->is_available ? 'Yes' : 'No' }}</td>
            <td>{{ $car->trashed() ? 'Deleted' : 'Active' }}</td>
            <td>
              @if(!$car->trashed())
                <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#editCar{{ $car->id }}">Edit</button>
                <form method="POST" action="{{ route('admin.cars.delete', $car) }}" style="display:inline;">@csrf<button class="btn btn-sm btn-outline-danger" onclick="return confirm('Delete this car?')">Delete</button></form>
              @else
                <form method="POST" action="{{ route('admin.cars.restore', $car->id) }}" style="display:inline;">@csrf<button class="btn btn-sm btn-success">Restore</button></form>
              @endif
            </td>
          </tr>

          @if(!$car->trashed())
          <div class="modal fade" id="editCar{{ $car->id }}" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
              <div class="modal-content">
                <div class="modal-header"><h5 class="modal-title">Edit {{ $car->name }}</h5><button type="button" class="close" data-dismiss="modal">&times;</button></div>
                <form method="POST" action="{{ route('admin.cars.update', $car) }}" enctype="multipart/form-data">
                  @csrf
                  <div class="modal-body">
                    <div class="row">
                      <div class="col-md-12 form-group">
                        <label>Current Images</label>
                        <div class="admin-thumb-grid">
                          @if($car->hero_image)
                            <img src="{{ $car->hero_image }}" alt="{{ $car->name }}" class="admin-thumb admin-thumb--lg">
                          @else
                            <span class="admin-thumb-empty" style="width:120px;height:90px;">No hero image</span>
                          @endif
                          @foreach((array) $car->gallery_images as $galleryImage)
                            @if($galleryImage)
                              <img src="{{ $galleryImage }}" alt="{{ $car->name }} gallery image" class="admin-thumb">
                            @endif
                          @endforeach
                        </div>
                      </div>
                      <div class="col-md-4 form-group"><label>Name</label><input class="form-control" name="name" value="{{ $car->name }}" required></div>
                      <div class="col-md-2 form-group"><label>Make</label><input class="form-control" name="make" value="{{ $car->make }}" required></div>
                      <div class="col-md-2 form-group"><label>Model</label><input class="form-control" name="model" value="{{ $car->model }}" required></div>
                      <div class="col-md-2 form-group"><label>Year</label><input type="number" class="form-control" name="year" value="{{ $car->year }}" required></div>
                      <div class="col-md-2 form-group"><label>Color</label><input class="form-control" name="color" value="{{ $car->color }}"></div>
                      <div class="col-md-3 form-group"><label>Price</label><input type="number" step="0.01" class="form-control" name="price" value="{{ $car->price }}" required></div>
                      <div class="col-md-3 form-group"><label>Range Miles</label><input type="number" class="form-control" name="range_miles" value="{{ $car->range_miles }}"></div>
                      <div class="col-md-3 form-group"><label>0-60 (sec)</label><input type="number" step="0.01" class="form-control" name="zero_to_sixty_seconds" value="{{ $car->zero_to_sixty_seconds }}"></div>
                      <div class="col-md-3 form-group"><label>Top Speed (mph)</label><input type="number" class="form-control" name="top_speed_mph" value="{{ $car->top_speed_mph }}"></div>
                      <div class="col-md-12 form-group"><label>Replace Hero Image</label><input type="file" class="form-control" name="hero_image_file" accept="image/*"></div>
                      <div class="col-md-12 form-group"><label>Add Gallery Image Files</label><input type="file" class="form-control" name="gallery_image_files[]" accept="image/*" multiple></div>
                      <div class="col-md-12 form-group"><label>Description</label><textarea class="form-control" name="description" rows="3">{{ $car->description }}</textarea></div>
                      <div class="col-md-6 form-group"><div class="form-check"><input class="form-check-input" type="checkbox" name="is_featured" value="1" id="feature{{ $car->id }}" @checked($car->is_featured)><label class="form-check-label" for="feature{{ $car->id }}">Featured</label></div></div>
                      <div class="col-md-6 form-group"><div class="form-check"><input class="form-check-input" type="checkbox" name="is_available" value="1" id="avail{{ $car->id }}" @checked($car->is_available)><label class="form-check-label" for="avail{{ $car->id }}">Available</label></div></div>
                    </div>
                  </div>
                  <div class="modal-footer"><button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancel</button><button type="submit" class="btn btn-primary">Save</button></div>
                </form>
              </div>
            </div>
          </div>
          @endif
        @empty
          <tr><td colspan="7" class="text-center">No inventory cars yet.</td></tr>
        @endforelse
        </tbody>
      </table>
      {{ $cars->links() }}
    </div>
  </div>
</div>

<div class="modal fade" id="createCarModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header"><h5 class="modal-title">Add Car to Inventory</h5><button type="button" class="close" data-dismiss="modal">&times;</button></div>
      <form method="POST" action="{{ route('admin.cars.create') }}" enctype="multipart/form-data">
        @csrf
        <div class="modal-body">
          <div class="row">
            <div class="col-md-4 form-group"><label>Name</label><input class="form-control" name="name" required></div>
            <div class="col-md-2 form-group"><label>Make</label><input class="form-control" name="make" value="Tesla" required></div>
            <div class="col-md-2 form-group"><label>Model</label><input class="form-control" name="model" required></div>
            <div class="col-md-2 form-group"><label>Year</label><input type="number" class="form-control" name="year" required></div>
            <div class="col-md-2 form-group"><label>Color</label><input class="form-control" name="color"></div>
            <div class="col-md-3 form-group"><label>Price</label><input type="number" step="0.01" class="form-control" name="price" required></div>
            <div class="col-md-3 form-group"><label>Range Miles</label><input type="number" class="form-control" name="range_miles"></div>
            <div class="col-md-3 form-group"><label>0-60 (sec)</label><input type="number" step="0.01" class="form-control" name="zero_to_sixty_seconds"></div>
            <div class="col-md-3 form-group"><label>Top Speed (mph)</label><input type="number" class="form-control" name="top_speed_mph"></div>
            <div class="col-md-12 form-group"><label>Hero Image Upload</label><input type="file" class="form-control" name="hero_image_file" accept="image/*"></div>
            <div class="col-md-12 form-group"><label>Gallery Image Local Files</label><input type="file" class="form-control" name="gallery_image_files[]" accept="image/*" multiple></div>
            <div class="col-md-12 form-group"><label>Description</label><textarea class="form-control" name="description" rows="3"></textarea></div>
            <div class="col-md-6 form-group"><div class="form-check"><input class="form-check-input" type="checkbox" name="is_featured" value="1" id="create_is_featured"><label class="form-check-label" for="create_is_featured">Featured</label></div></div>
            <div class="col-md-6 form-group"><div class="form-check"><input class="form-check-input" type="checkbox" name="is_available" value="1" id="create_is_available" checked><label class="form-check-label" for="create_is_available">Available</label></div></div>
          </div>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancel</button><button class="btn btn-primary" type="submit">Create Inventory</button></div>
      </form>
    </div>
  </div>
</div>
@endsection