@extends('provider.layout')
@section('title', 'Property Visits')

@section('content')
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem">
    <div>
        <h1 style="font-size:1.5rem;font-weight:800;letter-spacing:-0.02em">Property Visits</h1>
        <p style="color:var(--text-muted);font-size:0.9rem;margin-top:0.2rem">Manage requested property visits from clients.</p>
    </div>
</div>

<div class="card">
    <div style="overflow-x:auto">
        <table style="width:100%;border-collapse:collapse;text-align:left">
            <thead style="background:var(--bg-primary);border-bottom:1.5px solid rgba(30,58,95,0.05)">
                <tr>
                    <th style="padding:1rem 1.25rem;font-weight:600;color:var(--text-muted);font-size:0.8125rem;text-transform:uppercase;letter-spacing:0.05em">Date / Time</th>
                    <th style="padding:1rem 1.25rem;font-weight:600;color:var(--text-muted);font-size:0.8125rem;text-transform:uppercase;letter-spacing:0.05em">Property</th>
                    <th style="padding:1rem 1.25rem;font-weight:600;color:var(--text-muted);font-size:0.8125rem;text-transform:uppercase;letter-spacing:0.05em">Client</th>
                    <th style="padding:1rem 1.25rem;font-weight:600;color:var(--text-muted);font-size:0.8125rem;text-transform:uppercase;letter-spacing:0.05em">Status</th>
                    <th style="padding:1rem 1.25rem;font-weight:600;color:var(--text-muted);font-size:0.8125rem;text-transform:uppercase;letter-spacing:0.05em">Action</th>
                </tr>
            </thead>
            <tbody>
                @forelse($visits as $visit)
                <tr style="border-bottom:1px solid rgba(30,58,95,0.05)">
                    <td style="padding:1rem 1.25rem">
                        <div style="font-weight:600;color:var(--re-navy)">{{ $visit->scheduled_date->format('M d, Y') }}</div>
                        <div style="font-size:0.8125rem;color:var(--text-muted)">{{ \Carbon\Carbon::parse($visit->scheduled_time)->format('h:i A') }}</div>
                    </td>
                    <td style="padding:1rem 1.25rem">
                        <div style="font-weight:600">{{ $visit->property?->title ?? 'Property' }}</div>
                        <div style="font-size:0.8125rem;color:var(--text-muted)">ID: #{{ $visit->property?->id ?? '—' }}</div>
                    </td>
                    <td style="padding:1rem 1.25rem">
                        <div style="font-weight:600">{{ $visit->user?->name ?? 'Guest' }}</div>
                        @if($visit->user?->email)
                        <div style="font-size:0.8125rem;color:var(--text-muted)">
                            <a href="mailto:{{ $visit->user->email }}" style="color:inherit;text-decoration:none">{{ $visit->user->email }}</a>
                        </div>
                        @endif
                        @if($visit->customer_phone)
                            <div style="font-size:0.8125rem;color:var(--text-muted);margin-top:0.1rem">
                                <a href="tel:{{ $visit->customer_phone }}" style="color:inherit;text-decoration:none"><i data-lucide="phone" style="width:12px;height:12px;display:inline-block;vertical-align:middle"></i> {{ $visit->customer_phone }}</a>
                            </div>
                        @endif
                        @if($visit->notes)
                            <div style="font-size:0.75rem;color:var(--text-secondary);margin-top:0.25rem;max-width:200px"><em>Note: {{ $visit->notes }}</em></div>
                        @endif
                    </td>
                    <td style="padding:1rem 1.25rem">
                        @php
                            $badgeClass = match($visit->status) {
                                'pending' => 'badge-warning',
                                'approved' => 'badge-success',
                                'completed' => 'badge-primary',
                                'rejected' => 'badge-danger',
                                'rescheduled' => 'badge-muted',
                                default => 'badge-muted'
                            };
                        @endphp
                        <span class="badge {{ $badgeClass }}">{{ ucfirst($visit->status) }}</span>
                    </td>
                    <td style="padding:1rem 1.25rem">
                        <button onclick="openVisitModal({{ $visit->id }}, '{{ $visit->status }}')" class="btn btn-sm btn-outline" style="border-color:var(--re-navy);color:var(--re-navy)">
                            Update
                        </button>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" style="padding:2rem;text-align:center;color:var(--text-muted)">
                        <i data-lucide="calendar-x" style="width:32px;height:32px;margin:0 auto 0.5rem;opacity:0.5;display:block"></i>
                        No visit requests found.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@if($visits->hasPages())
<div style="margin-top:1.5rem">
    {{ $visits->links() }}
</div>
@endif

{{-- Update Visit Modal --}}
<div class="modal-overlay" id="updateVisitModal" style="display:none;position:fixed;inset:0;background:rgba(15,23,42,0.6);z-index:100;align-items:center;justify-content:center">
    <div class="card" style="width:100%;max-width:400px">
        <div class="card-header" style="display:flex;justify-content:space-between;align-items:center">
            <h3 style="margin:0;font-size:1.1rem">Update Visit Status</h3>
            <button type="button" onclick="closeVisitModal()" style="background:none;border:none;cursor:pointer"><i data-lucide="x" style="width:16px;height:16px"></i></button>
        </div>
        <div class="card-body">
            <form id="visitForm" method="POST">
                @csrf
                <div class="form-group" style="margin-bottom:1rem">
                    <label class="form-label">Status</label>
                    <select name="status" id="visitStatus" class="form-input" required>
                        <option value="pending">Pending</option>
                        <option value="approved">Approve</option>
                        <option value="completed">Completed</option>
                        <option value="rescheduled">Rescheduled</option>
                        <option value="rejected">Reject</option>
                    </select>
                </div>
                <div class="form-group" style="margin-bottom:1rem">
                    <label class="form-label">Agent Note (optional)</label>
                    <textarea name="agent_notes" class="form-input" style="min-height:80px" placeholder="Add any notes for your reference..."></textarea>
                </div>
                <button type="submit" class="btn btn-primary" style="width:100%;justify-content:center">Save Changes</button>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function openVisitModal(id, status) {
        const form = document.getElementById('visitForm');
        form.action = `{{ url('provider/real-estate/visits') }}/${id}/status`;
        document.getElementById('visitStatus').value = status;
        document.getElementById('updateVisitModal').style.display = 'flex';
    }
    function closeVisitModal() {
        document.getElementById('updateVisitModal').style.display = 'none';
    }
</script>
@endpush