@extends('contentNavbarLayout')

@section('title', 'Property Management')

@section('content')
<div class="card">
  <h5 class="card-header d-flex justify-content-between align-items-center mb-0">
    <span>Property Management</span>
    @hasPermission('system.recordtypes.property.add')
      <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addPropertyModal">
        <i class="mdi mdi-plus-circle-outline me-1"></i> Add New Property
      </button>
    @endhasPermission
  </h5>

  <div class="table-responsive text-nowrap">
    {{-- Flash Message --}}
    @if(session('success'))
      <div class="alert alert-success alert-dismissible fade show m-3" role="alert">
        <i class="mdi mdi-check-circle-outline me-1"></i>
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    @endif

    {{-- Global Error List --}}
    @if ($errors->any())
      <div class="alert alert-danger alert-dismissible fade show m-3" role="alert">
        <i class="mdi mdi-alert-circle-outline me-1"></i>
        <strong>Whoops!</strong> Please fix the following:
        <ul class="mb-0 mt-1 ps-3">
          @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
          @endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    @endif

    <table class="table">
      <thead class="table-dark">
        <tr>
          <th>#</th>
          <th>Name</th>
          <th>Description</th>
          <th>Data Type</th>
          <th>Created At</th>
          @hasAnyPermission(['system.recordtypes.property.edit', 'system.recordtypes.property.delete'])
            <th>Actions</th>
          @endhasAnyPermission
        </tr>
      </thead>
      <tbody>
        @forelse($properties as $property)
          <tr>
            <td>{{ $loop->iteration }}</td>
            <td>
              <i class="mdi mdi-tag-outline mdi-20px text-primary me-2"></i>
              <span class="fw-medium">{{ $property->name }}</span>
            </td>
            <td>{{ $property->description }}</td>
            <td>
              <span class="badge bg-label-danger">{{ ucfirst($property->data_type) }}</span>
            </td>
            <td>{{ $property->created_at->format('d-M-Y') }}</td>
            @hasAnyPermission(['system.recordtypes.property.edit', 'system.recordtypes.property.delete'])
              <td>
                <div class="dropdown">
                  <button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown">
                    <i class="mdi mdi-dots-vertical"></i>
                  </button>
                  <div class="dropdown-menu">
                    @hasPermission('system.recordtypes.property.edit')
                      <a class="dropdown-item" href="{{ route('property.edit', $property->id) }}">
                        <i class="mdi mdi-pencil-outline me-1"></i> Edit
                      </a>
                    @endhasPermission
                    @hasPermission('system.recordtypes.property.delete')
                      <form action="{{ route('property.destroy', $property->id) }}" method="POST" onsubmit="return confirm('Are you sure?');">
                        @csrf
                        @method('DELETE')
                        <button class="dropdown-item text-danger" type="submit">
                          <i class="mdi mdi-trash-can-outline me-1"></i> Delete
                        </button>
                      </form>
                    @endhasPermission
                  </div>
                </div>
              </td>
            @endhasAnyPermission
          </tr>
        @empty
          <tr>
            @hasAnyPermission(['system.recordtypes.property.edit', 'system.recordtypes.property.delete'])
              <td colspan="6" class="text-center text-muted">No properties found.</td>
            @else
              <td colspan="5" class="text-center text-muted">No properties found.</td>
            @endhasAnyPermission
          </tr>
        @endforelse
      </tbody>
    </table>
  </div>

  <div class="card-footer d-flex justify-content-between align-items-center">
    <span>Showing {{ $properties->count() }} of {{ $properties->total() ?? $properties->count() }} entries</span>
    {{-- {{ $properties instanceof \Illuminate\Pagination\LengthAwarePaginator ? $properties->links() : '' }} --}}
  </div>
</div>

<!-- Add New Property Modal -->
<div class="modal fade" id="addPropertyModal" tabindex="-1" aria-labelledby="addPropertyModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <form action="{{ route('property.store') }}" method="POST">
        @csrf
        <div class="modal-header">
          <h5 class="modal-title fw-bold" id="addPropertyModalLabel">Property Details</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label for="name" class="form-label">Property Name</label>
            <input type="text" class="form-control" id="name" name="name" placeholder="Enter property name" required>
          </div>
          <div class="mb-3">
            <label for="description" class="form-label">Description</label>
            <textarea class="form-control" id="description" name="description" placeholder="Enter description"></textarea>
          </div>
          <div class="mb-3">
            <label for="data_type" class="form-label">Data Type</label>
            <select class="form-select" id="data_type" name="data_type" required>
              <option value="">-- Select Data Type --</option>
              <option value="string">String</option>
              <option value="text">Text</option>
              <option value="integer">Integer</option>
              <option value="boolean">Boolean</option>
              <option value="date">Date</option>
              <option value="file">File</option>
              <option value="decimal">Decimal</option>
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Save Property</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection