{{-- resources/views/admin/properties/show.blade.php --}}
@extends('admin.layouts.app')

@section('title', $property->name)
@section('page_title', $property->name)
@section('breadcrumb')
    <a href="{{ route('admin.properties.index') }}"
       style="color:var(--muted);text-decoration:none;">Properties</a>
    → {{ $property->name }}
@endsection

@section('content')

@php
    $owner = $property->users->firstWhere('is_property_owner', true);
    $application = $property->application;
@endphp

<div class="row g-3">

    {{-- Left column --}}
    <div class="col-xl-8">

        {{-- Property Details --}}
        <div class="card mb-3">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-building me-2" style="color:var(--clay)"></i>
                    Property Details
                </span>
                <div style="display:flex;gap:6px;align-items:center;">
                    <span class="badge-status bs-{{ $property->verification_status }}">
                        {{ str_replace('_', ' ', $property->verification_status) }}
                    </span>
                    <span class="badge-status bs-{{ $property->subscription_status }}">
                        {{ $property->subscription_status }}
                    </span>
                </div>
            </div>
            <div class="card-body">
                <div class="row g-3">

                    @php
                        $fields = [
                            'Name'        => $property->name,
                            'Slug'        => $property->slug,
                            'Type'        => ucfirst(str_replace('_', ' ', $property->type)),
                            'Email'       => $property->email,
                            'Phone'       => $property->phone,
                            'WhatsApp'    => $property->phone_whatsapp,
                            'Website'     => $property->website,
                            'Country'     => $property->country,
                            'City'        => $property->city,
                            'Province'    => $property->province,
                            'Address'     => collect([$property->address_line1, $property->address_line2])
                                                ->filter()->implode(', '),
                        ];
                    @endphp

                    @foreach($fields as $label => $value)
                        <div class="col-sm-6">
                            <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;
                                        letter-spacing:.08em;color:var(--muted);margin-bottom:4px;">
                                {{ $label }}
                            </div>
                            <div style="font-size:.85rem;">
                                @if($label === 'Website' && $value)
                                    <a href="{{ $value }}" target="_blank"
                                       style="color:var(--clay);">{{ $value }}</a>
                                @else
                                    {{ $value ?: '—' }}
                                @endif
                            </div>
                        </div>
                    @endforeach

                    @if($property->description)
                        <div class="col-12">
                            <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;
                                        letter-spacing:.08em;color:var(--muted);margin-bottom:4px;">
                                Description
                            </div>
                            <div style="font-size:.82rem;color:var(--muted);line-height:1.6;">
                                {{ $property->description }}
                            </div>
                        </div>
                    @endif

                </div>
            </div>
        </div>

        {{-- Subscription --}}
        <div class="card mb-3">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-credit-card me-2" style="color:var(--clay)"></i>
                    Subscription
                </span>
                <form method="POST"
                      action="{{ route('admin.properties.sync-subscription', $property) }}">
                    @csrf
                    <button type="submit"
                            class="btn btn-xs btn-outline-secondary">
                        <i class="bi bi-arrow-repeat me-1"></i> Sync Utsanzi
                    </button>
                </form>
            </div>
            <div class="card-body">
                <div class="row g-3">

                    @php
                        $subFields = [
                            'Utsanzi Customer ID' => $property->utsanzi_customer_id,
                            'Subscription ID'     => $property->utsanzi_subscription_id,
                            'Plan'                => $property->plan_slug
                                                        ? strtoupper($property->plan_slug)
                                                        : null,
                            'License Key'         => $property->license_key,
                            'Status'              => $property->subscription_status,
                            'Trial Ends'          => $property->trial_ends_at
                                                        ?->format('d M Y H:i'),
                            'Subscription Ends'   => $property->subscription_ends_at
                                                        ?->format('d M Y H:i'),
                            'Last Synced'         => $property->plan_synced_at
                                                        ?->diffForHumans(),
                        ];
                    @endphp

                    @foreach($subFields as $label => $value)
                        <div class="col-sm-6">
                            <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;
                                        letter-spacing:.08em;color:var(--muted);margin-bottom:4px;">
                                {{ $label }}
                            </div>
                            <div style="font-size:.82rem;font-family:monospace;">
                                {{ $value ?? '—' }}
                            </div>
                        </div>
                    @endforeach

                </div>
            </div>
        </div>

        {{-- Staff Users --}}
        <div class="card mb-3">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-people me-2" style="color:var(--clay)"></i>
                    Staff Users
                </span>
                <span style="font-size:.75rem;color:var(--muted);">
                    {{ $property->users->count() }} total
                </span>
            </div>

            @if($property->users->isEmpty())
                <div class="card-body text-center py-4">
                    <i class="bi bi-people" style="font-size:2rem;color:var(--muted)"></i>
                    <p class="text-muted mt-2 mb-0" style="font-size:.82rem;">No users yet</p>
                </div>
            @else
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Role</th>
                                <th>Verified</th>
                                <th>Last Login</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($property->users->sortByDesc('is_property_owner') as $user)
                                <tr>
                                    <td>
                                        <div style="display:flex;align-items:center;gap:8px;">
                                            <div style="width:28px;height:28px;border-radius:6px;
                                                        background:var(--clay-light);color:var(--clay);
                                                        display:flex;align-items:center;
                                                        justify-content:center;
                                                        font-size:.7rem;font-weight:700;flex-shrink:0;">
                                                {{ strtoupper(substr($user->name, 0, 1)) }}
                                            </div>
                                            <div>
                                                <div class="fw-semibold" style="font-size:.82rem;">
                                                    {{ $user->name }}
                                                </div>
                                                @if($user->is_property_owner)
                                                    <div style="font-size:.65rem;color:var(--clay);
                                                                font-weight:600;">Owner</div>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                    <td style="font-size:.8rem;">{{ $user->email }}</td>
                                    <td style="font-size:.78rem;color:var(--muted);">
                                        {{ $user->account_type }}
                                    </td>
                                    <td>
                                        @if($user->email_verified_at)
                                            <span style="color:var(--success);font-size:.75rem;">
                                                <i class="bi bi-check-circle-fill"></i>
                                            </span>
                                        @else
                                            <span style="color:var(--muted);font-size:.75rem;">
                                                <i class="bi bi-circle"></i>
                                            </span>
                                        @endif
                                    </td>
                                    <td style="font-size:.75rem;color:var(--muted);">
                                        {{ $user->last_login_at?->diffForHumans() ?? 'Never' }}
                                    </td>
                                    <td>
                                        @if($user->is_active)
                                            <span class="badge-status bs-active">Active</span>
                                        @else
                                            <span class="badge-status bs-suspended">Inactive</span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>

        {{-- Property Photos --}}
        @if($property->images->count() > 0)
            <div class="card mb-3">
                <div class="card-header">
                    <span class="card-title">
                        <i class="bi bi-images me-2" style="color:var(--clay)"></i>
                        Photos
                    </span>
                    <span style="font-size:.75rem;color:var(--muted);">
                        {{ $property->images->count() }} uploaded
                    </span>
                </div>
                <div class="card-body">
                    <div style="display:grid;
                                grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
                                gap:8px;">
                        @foreach($property->images as $img)
                            <a href="{{ asset('storage/' . $img->path) }}"
                               target="_blank"
                               style="display:block;aspect-ratio:4/3;border-radius:8px;
                                      overflow:hidden;background:var(--bg);">
                                <img src="{{ asset('storage/' . $img->path) }}"
                                     alt="{{ $img->caption ?? 'Photo' }}"
                                     style="width:100%;height:100%;object-fit:cover;">
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif

        {{-- Application Documents --}}
        @if($application && $application->documents->count() > 0)
            <div class="card mb-3">
                <div class="card-header">
                    <span class="card-title">
                        <i class="bi bi-file-earmark-text me-2" style="color:var(--clay)"></i>
                        Verification Documents
                    </span>
                    @if($application)
                        <a href="{{ route('admin.verification.show', $application) }}"
                           class="btn btn-xs btn-outline-secondary">
                            Full Review →
                        </a>
                    @endif
                </div>
                <div class="card-body" style="padding:0;">
                    @foreach($application->documents as $doc)
                        <div style="display:flex;align-items:center;gap:12px;
                                    padding:12px 18px;
                                    border-bottom:1px solid var(--border);">
                            <div style="width:32px;height:32px;border-radius:6px;
                                        background:var(--bg);display:flex;
                                        align-items:center;justify-content:center;
                                        flex-shrink:0;">
                                @if(str_contains($doc->mime_type, 'pdf'))📄
                                @elseif(str_contains($doc->mime_type, 'image'))🖼️
                                @else📎@endif
                            </div>
                            <div style="flex:1;min-width:0;">
                                <div class="fw-semibold"
                                     style="font-size:.8rem;
                                            white-space:nowrap;overflow:hidden;
                                            text-overflow:ellipsis;">
                                    {{ $doc->documentType?->name ?? 'Document' }}
                                </div>
                                <div style="font-size:.7rem;color:var(--muted);">
                                    {{ $doc->original_filename }}
                                    · {{ number_format($doc->file_size_bytes / 1024) }} KB
                                </div>
                            </div>
                            <span class="badge-status
                                @if($doc->review_status === 'accepted') bs-approved
                                @elseif($doc->review_status === 'rejected') bs-rejected
                                @else bs-pending @endif">
                                {{ $doc->review_status }}
                            </span>
                            <a href="{{ asset('storage/' . $doc->stored_path) }}"
                               target="_blank"
                               class="btn btn-xs btn-outline-secondary">
                                <i class="bi bi-eye"></i>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif

    </div>

    {{-- Right column —  Actions + Meta --}}
    <div class="col-xl-4">

        {{-- Actions --}}
        <div class="card mb-3">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-lightning me-2" style="color:var(--clay)"></i>
                    Actions
                </span>
            </div>
            <div class="card-body" style="display:flex;flex-direction:column;gap:8px;">

                @if($application)
                    <a href="{{ route('admin.verification.show', $application) }}"
                       class="btn btn-outline-secondary d-flex align-items-center gap-2">
                        <i class="bi bi-shield-check" style="color:var(--clay)"></i>
                        View Verification
                    </a>
                @endif

                @if($property->verification_status === 'approved' && $property->subscription_status !== 'suspended')
                    {{-- Suspend --}}
                    <button type="button"
                            class="btn btn-outline-warning d-flex align-items-center gap-2"
                            data-bs-toggle="modal" data-bs-target="#suspendModal">
                        <i class="bi bi-slash-circle"></i>
                        Suspend Property
                    </button>
                @endif

                @if($property->verification_status === 'suspended')
                    {{-- Reactivate --}}
                    <form method="POST"
                          action="{{ route('admin.properties.reactivate', $property) }}"
                          onsubmit="return confirm('Reactivate this property?')">
                        @csrf
                        <button type="submit"
                                class="btn btn-outline-success w-100 d-flex align-items-center gap-2">
                            <i class="bi bi-check-circle"></i>
                            Reactivate Property
                        </button>
                    </form>
                @endif

                @if(!in_array($property->verification_status, ['deactivated']))
                    <form method="POST"
                          action="{{ route('admin.properties.deactivate', $property) }}"
                          onsubmit="return confirm('Permanently deactivate this property?')">
                        @csrf
                        <button type="submit"
                                class="btn btn-outline-danger w-100 d-flex align-items-center gap-2">
                            <i class="bi bi-x-circle"></i>
                            Deactivate Property
                        </button>
                    </form>
                @endif

            </div>
        </div>

        {{-- Meta --}}
        <div class="card mb-3">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-info-circle me-2" style="color:var(--clay)"></i>
                    Meta
                </span>
            </div>
            <div class="card-body">
                @php
                    $meta = [
                        'Created'             => $property->created_at->format('d M Y H:i'),
                        'Last Updated'        => $property->updated_at->diffForHumans(),
                        'Approved At'         => $property->approved_at?->format('d M Y H:i') ?? '—',
                        'Suspended At'        => $property->suspended_at?->format('d M Y H:i') ?? '—',
                        'Marketplace Listed'  => $property->listed_on_marketplace ? 'Yes' : 'No',
                        'Marketplace Active'  => $property->marketplace_listing_active ? 'Yes' : 'No',
                    ];
                @endphp
                @foreach($meta as $label => $value)
                    <div style="display:flex;justify-content:space-between;
                                align-items:center;padding:6px 0;
                                border-bottom:1px solid var(--border);
                                font-size:.78rem;">
                        <span style="color:var(--muted);">{{ $label }}</span>
                        <span class="fw-semibold">{{ $value }}</span>
                    </div>
                @endforeach

                @if($property->suspension_reason)
                    <div style="margin-top:10px;padding:10px;background:#fee2e2;
                                border-radius:6px;font-size:.78rem;color:#991b1b;">
                        <div class="fw-semibold mb-1">Suspension Reason</div>
                        {{ $property->suspension_reason }}
                    </div>
                @endif
            </div>
        </div>

        {{-- Application summary --}}
        @if($application)
            <div class="card mb-3">
                <div class="card-header">
                    <span class="card-title">
                        <i class="bi bi-clipboard-check me-2" style="color:var(--clay)"></i>
                        Application
                    </span>
                    <span class="badge-status bs-{{ $application->status }}">
                        {{ str_replace('_', ' ', $application->status) }}
                    </span>
                </div>
                <div class="card-body">
                    @php
                        $appMeta = [
                            'Submitted'        => $application->submitted_at?->format('d M Y H:i') ?? '—',
                            'Reviewed'         => $application->reviewed_at?->format('d M Y H:i') ?? '—',
                            'Submissions'      => $application->submission_count,
                            'Documents'        => $application->documents->count(),
                            'Accepted Docs'    => $application->documents->where('review_status','accepted')->count(),
                        ];
                    @endphp
                    @foreach($appMeta as $label => $value)
                        <div style="display:flex;justify-content:space-between;
                                    align-items:center;padding:5px 0;
                                    border-bottom:1px solid var(--border);
                                    font-size:.78rem;">
                            <span style="color:var(--muted);">{{ $label }}</span>
                            <span class="fw-semibold">{{ $value }}</span>
                        </div>
                    @endforeach

                    @if($application->rejection_reason)
                        <div style="margin-top:10px;padding:10px;background:#fee2e2;
                                    border-radius:6px;font-size:.78rem;color:#991b1b;">
                            <div class="fw-semibold mb-1">Rejection Reason</div>
                            {{ $application->rejection_reason }}
                        </div>
                    @endif
                </div>
            </div>
        @endif

    </div>
</div>

{{-- Suspend Modal --}}
<div class="modal fade" id="suspendModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius:12px;border:none;">
            <div class="modal-header" style="border-bottom:1px solid var(--border);">
                <h5 class="modal-title" style="font-size:.9rem;font-weight:600;">
                    Suspend Property
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST"
                  action="{{ route('admin.properties.suspend', $property) }}">
                @csrf
                <div class="modal-body">
                    <p style="font-size:.82rem;color:var(--muted);">
                        Suspending <strong>{{ $property->name }}</strong> will prevent their
                        staff from accessing the PMS. You can reactivate at any time.
                    </p>
                    <label class="form-label"
                           style="font-size:.78rem;font-weight:600;">
                        Reason <span class="text-danger">*</span>
                    </label>
                    <textarea name="reason" rows="3"
                              class="form-control form-control-sm"
                              placeholder="Provide a reason for suspension…"
                              required></textarea>
                </div>
                <div class="modal-footer" style="border-top:1px solid var(--border);gap:8px;">
                    <button type="button"
                            class="btn btn-sm btn-outline-secondary"
                            data-bs-dismiss="modal">Cancel</button>
                    <button type="submit"
                            class="btn btn-sm btn-warning fw-semibold"
                            style="color:#000;">
                        Suspend Property
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection