@extends('layouts.app')
@section('page-title','Properties')

@section('content')
<div class="card" style="margin-bottom:16px">
    <div class="card-body" style="padding:14px 20px">
        <form method="GET" class="filter-bar">
            <div class="search-input"><i class="fas fa-search"></i><input type="text" name="search" class="form-control" placeholder="Search property..." value="{{ request('search') }}" style="width:240px"></div>
            <select name="status" class="form-control" style="width:150px">
                <option value="">All Status</option>
                @foreach(['available','sold','hold'] as $s)<option value="{{ $s }}" {{ request('status')===$s?'selected':'' }}>{{ ucfirst($s) }}</option>@endforeach
            </select>
            <button type="submit" class="btn btn-secondary"><i class="fas fa-filter"></i> Filter</button>
            <a href="{{ route('properties.index') }}" class="btn btn-secondary">Clear</a>
            @if(auth()->user()->isAdmin())
            <button type="button" onclick="openModal('addPropertyModal')" class="btn btn-primary" style="margin-left:auto"><i class="fas fa-plus"></i> Add Property</button>
            @endif
        </form>
    </div>
</div>

<div class="card">
    <div class="table-wrap">
        <table>
            <thead><tr><th>Property #</th><th>Title</th><th>Location</th><th>Size</th><th>Price</th><th>Status</th><th>Manager</th><th></th></tr></thead>
            <tbody>
            @forelse($properties as $p)
            <tr>
                <td style="font-weight:600;color:#2563eb">{{ $p->property_number }}</td>
                <td><div style="font-weight:500">{{ $p->title }}</div>
                    @if($p->block)<div style="font-size:12px;color:#64748b">Block: {{ $p->block }}@if($p->road), Road: {{ $p->road }}@endif</div>@endif
                </td>
                <td style="font-size:13px">{{ $p->location }}</td>
                <td style="font-size:13px">{{ $p->size_value }} {{ $p->size_unit }}</td>
                <td style="font-weight:600;color:#0f172a">{{ $p->formatted_price }}</td>
                <td><span class="badge badge-{{ $p->status }}">{{ ucfirst($p->status) }}</span></td>
                <td style="font-size:13px">{{ $p->manager?->full_name ?? '—' }}</td>
                <td>
                    <div class="dropdown">
                        <button class="btn btn-secondary btn-sm btn-icon" data-dropdown><i class="fas fa-ellipsis-h"></i></button>
                        <div class="dropdown-menu">
                            <a href="{{ route('properties.show',$p) }}" class="dropdown-item"><i class="fas fa-eye"></i> View</a>
                            @if(auth()->user()->isAdmin())
                            <button class="dropdown-item" onclick="editProperty({{ $p->toJson() }})"><i class="fas fa-edit"></i> Edit</button>
                            <form method="POST" action="{{ route('properties.destroy',$p) }}" onsubmit="return confirm('Delete?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="dropdown-item danger"><i class="fas fa-trash"></i> Delete</button>
                            </form>
                            @endif
                        </div>
                    </div>
                </td>
            </tr>
            @empty
            <tr><td colspan="8" style="text-align:center;padding:40px;color:#94a3b8">No properties found.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
    <div class="pagination">{{ $properties->links('vendor.pagination.simple') }}</div>
</div>

{{-- Add Property Modal --}}
<div class="modal-overlay" id="addPropertyModal">
    <div class="modal" style="max-width:640px"><div class="modal-header"><h3>Add Property</h3><button class="modal-close" onclick="closeModal('addPropertyModal')">×</button></div>
    <form method="POST" action="{{ route('properties.store') }}" enctype="multipart/form-data">@csrf
        <div class="modal-body">
            <div class="form-group"><label>Title *</label><input type="text" name="title" class="form-control" required></div>
            <div class="form-row">
                <div class="form-group"><label>Location *</label><input type="text" name="location" class="form-control" required></div>
                <div class="form-group"><label>Status</label>
                    <select name="status" class="form-control"><option value="available">Available</option><option value="hold">Hold</option><option value="sold">Sold</option></select>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group"><label>Size *</label><input type="number" step="0.0001" name="size_value" class="form-control" required></div>
                <div class="form-group"><label>Unit</label>
                    <select name="size_unit" class="form-control"><option value="katha">Katha</option><option value="decimal">Decimal</option><option value="bigha">Bigha</option><option value="sqft">Sq Ft</option></select>
                </div>
            </div>
            <div class="form-row-3">
                <div class="form-group"><label>Block</label><input type="text" name="block" class="form-control"></div>
                <div class="form-group"><label>Road</label><input type="text" name="road" class="form-control"></div>
                <div class="form-group"><label>Face</label><input type="text" name="face" class="form-control"></div>
            </div>
            <div class="form-row">
                <div class="form-group"><label>Price (৳) *</label><input type="number" name="price" class="form-control" required></div>
                <div class="form-group"><label>Assigned Manager</label>
                    <select name="assigned_manager" class="form-control">
                        <option value="">None</option>
                        @foreach($managers as $m)<option value="{{ $m->id }}">{{ $m->full_name }}</option>@endforeach
                    </select>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" onclick="closeModal('addPropertyModal')">Cancel</button>
            <button type="submit" class="btn btn-primary">Add Property</button>
        </div>
    </form></div>
</div>

@push('scripts')
<script>
function editProperty(p) {
    // Populate and open edit modal (similar pattern as leads)
    alert('Edit: ' + p.title); // Replace with full modal
}
</script>
@endpush
@endsection