@extends('dashboard.admin.layout')

@section('title', 'Properties')
@section('page_subtitle', 'Properties list first, with create forms moved into modal entry points.')

@section('content')
<div class="admin-inner">
  <div class="card">
    <div class="card-header">
      <div class="management-toolbar">
        <div class="management-copy">
          <h5>Properties</h5>
          <p>Review listings and open the create property form only when needed.</p>
        </div>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createPropertyModal">
          <i class="icon ion-md-add"></i> Create Property
        </button>
      </div>
    </div>
    <div class="card-body pt-0 table-responsive">
      <table class="table">
        <thead><tr><th>ID</th><th>Preview</th><th>Title</th><th>Price</th><th>Location</th><th>Status</th><th>Actions</th></tr></thead>
        <tbody>
        @forelse($properties as $property)
          <tr>
            <td>{{ $property->id }}</td>
            <td>
              @if($property->hero_image)
                <img src="{{ $property->hero_image }}" alt="{{ $property->title }}" class="admin-thumb">
              @else
                <span class="admin-thumb-empty">No image</span>
              @endif
            </td>
            <td>{{ $property->title }}</td>
            <td>${{ number_format($property->price, 2) }}</td>
            <td>{{ $property->location ?? '-' }}</td>
            <td>{{ $property->trashed() ? 'Deleted' : ucfirst($property->status) }}</td>
            <td>
              @if(!$property->trashed())
                <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#editProperty{{ $property->id }}">Edit</button>
                <form method="POST" action="{{ route('admin.properties.delete', $property) }}" style="display:inline;">@csrf<button class="btn btn-sm btn-outline-danger" onclick="return confirm('Delete this property?')">Delete</button></form>
              @else
                <form method="POST" action="{{ route('admin.properties.restore', $property->id) }}" style="display:inline;">@csrf<button class="btn btn-sm btn-success">Restore</button></form>
              @endif
            </td>
          </tr>

          @if(!$property->trashed())
          <div class="modal fade" id="editProperty{{ $property->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 {{ $property->title }}</h5><button type="button" class="close" data-dismiss="modal">&times;</button></div>
                <form method="POST" action="{{ route('admin.properties.update', $property) }}" 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($property->hero_image)
                            <img src="{{ $property->hero_image }}" alt="{{ $property->title }}" class="admin-thumb admin-thumb--lg">
                          @else
                            <span class="admin-thumb-empty" style="width:120px;height:90px;">No hero image</span>
                          @endif
                          @foreach((array) $property->gallery_images as $galleryImage)
                            @if($galleryImage)
                              <img src="{{ $galleryImage }}" alt="{{ $property->title }} gallery image" class="admin-thumb">
                            @endif
                          @endforeach
                        </div>
                      </div>
                      <div class="col-md-5 form-group"><label>Title</label><input class="form-control" name="title" value="{{ $property->title }}" required></div>
                      <div class="col-md-4 form-group"><label>Location</label><input class="form-control" name="location" value="{{ $property->location }}"></div>
                      <div class="col-md-3 form-group"><label>Price</label><input type="number" step="0.01" class="form-control" name="price" value="{{ $property->price }}" required></div>
                      <div class="col-md-3 form-group"><label>Area (sqft)</label><input type="number" class="form-control" name="area_sqft" value="{{ $property->area_sqft }}"></div>
                      <div class="col-md-2 form-group"><label>Bedrooms</label><input type="number" class="form-control" name="bedrooms" value="{{ $property->bedrooms }}"></div>
                      <div class="col-md-2 form-group"><label>Bathrooms</label><input type="number" step="0.5" class="form-control" name="bathrooms" value="{{ $property->bathrooms }}"></div>
                      <div class="col-md-3 form-group">
                        <label>Status</label>
                        <select class="form-control" name="status">
                          <option value="available" @selected($property->status === 'available')>Available</option>
                          <option value="pending" @selected($property->status === 'pending')>Pending</option>
                          <option value="sold" @selected($property->status === 'sold')>Sold</option>
                        </select>
                      </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 Uploads</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">{{ $property->description }}</textarea></div>
                      <div class="col-md-4 form-group"><div class="form-check"><input class="form-check-input" type="checkbox" name="is_featured" value="1" id="featured{{ $property->id }}" @checked($property->is_featured)><label class="form-check-label" for="featured{{ $property->id }}">Featured</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 properties yet.</td></tr>
        @endforelse
        </tbody>
      </table>
      {{ $properties->links() }}
    </div>
  </div>
</div>

<div class="modal fade" id="createPropertyModal" 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">Create Property</h5><button type="button" class="close" data-dismiss="modal">&times;</button></div>
      <form method="POST" action="{{ route('admin.properties.create') }}" enctype="multipart/form-data">
        @csrf
        <div class="modal-body">
          <div class="row">
            <div class="col-md-5 form-group"><label>Title</label><input class="form-control" name="title" required></div>
            <div class="col-md-4 form-group"><label>Location</label><input class="form-control" name="location" placeholder="City, Country"></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>Area (sqft)</label><input type="number" class="form-control" name="area_sqft"></div>
            <div class="col-md-2 form-group"><label>Bedrooms</label><input type="number" class="form-control" name="bedrooms" min="0" max="20"></div>
            <div class="col-md-2 form-group"><label>Bathrooms</label><input type="number" step="0.5" class="form-control" name="bathrooms" min="0" max="20"></div>
            <div class="col-md-3 form-group">
              <label>Status</label>
              <select class="form-control" name="status">
                <option value="available" selected>Available</option>
                <option value="pending">Pending</option>
                <option value="sold">Sold</option>
              </select>
            </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 Uploads</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-4 form-group"><div class="form-check"><input class="form-check-input" type="checkbox" name="is_featured" value="1" id="is_featured" checked><label class="form-check-label" for="is_featured">Featured</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 Property</button></div>
      </form>
    </div>
  </div>
</div>
@endsection