{{--
    brafa Systems — Unifi door details. The Unifi counterpart of
    showLockDetails: dark hero card with the door's product shot (same
    pattern as the Sciener lock page), info + stats, guest PINs, and the
    unlock records ingested into lock_records. Light cards use dark text —
    white text only inside the dark hero.
--}}
<div>
    <style>
        .unifi-hero {
            min-height: 420px;
            position: relative;
            overflow: hidden;
            background: linear-gradient(160deg, #ffffff 0%, #eef1f5 60%, #e2e7ee 100%);
        }

        .unifi-hero .hero-device {
            position: absolute;
            top: 44%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-height: 65%;
            max-width: 70%;
            object-fit: contain;
            z-index: 1;
            filter: drop-shadow(0 16px 28px rgba(30, 40, 60, .22));
        }

        .unifi-hero .hero-caption {
            position: absolute;
            bottom: 18px;
            left: 0;
            right: 0;
            text-align: center;
            z-index: 2;
        }

        .unifi-stat {
            border: 1px solid rgba(0, 0, 0, .06);
            border-radius: 12px;
            padding: 14px 18px;
            min-width: 150px;
        }

        .unifi-stat .stat-value {
            font-size: 1.25rem;
            font-weight: 700;
        }

        .unifi-device-chip {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 10px 16px;
            border: 1px solid rgba(0, 0, 0, .08);
            border-radius: 12px;
            margin: 0 10px 10px 0;
            background: #fff;
        }

        .unifi-device-chip img {
            height: 64px;
            width: 64px;
            object-fit: contain;
        }

        .online-dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }

        .records-table th {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: .04em;
            opacity: .6;
        }

        .records-table td {
            font-size: 0.8rem;
            vertical-align: middle;
        }
    </style>

    <div class="container-fluid py-4">
        @if ($message)
        <div class="alert alert-success text-white">{{ $message }}</div>
        @endif
        @if ($error)
        <div class="alert alert-danger text-white">{{ $error }}</div>
        @endif

        <div class="row">
            {{-- Hero: dark card + big product shot, mirroring the Sciener lock page --}}
            <div class="col-lg-4 mb-4">
                <div class="card unifi-hero">
                    <img src="{{ asset($this->heroImage) }}" alt="Door device" class="hero-device">
                    <div class="hero-caption">
                        <h4 class="text-dark mb-0">{{ $door['name'] ?? ($doorGroupName ?: 'Unifi door') }}</h4>
                        <p class="text-secondary mb-0" style="font-size: .8rem;">Unifi Access</p>
                    </div>
                </div>
            </div>

            {{-- Info + stats --}}
            <div class="col-lg-8 mb-4">
                <div class="card h-100">
                    <div class="card-body">
                        <div class="d-flex flex-wrap align-items-start justify-content-between mb-3">
                            <div>
                                <h4 class="mb-1">{{ $door['name'] ?? ($doorGroupName ?: 'Unifi door') }}</h4>
                                <p class="text-sm text-secondary mb-0">
                                    @if($doorGroupName) Door group: {{ $doorGroupName }} @else Unifi Access door @endif
                                </p>
                            </div>
                            <div class="d-flex align-items-center" style="gap: 10px;">
                                @if($door !== null)
                                <span class="badge {{ ($door['status'] ?? '') === 'unlock' ? 'badge-warning' : 'badge-success' }}">
                                    {{ ($door['status'] ?? '') === 'unlock' ? 'Unlocked' : 'Locked' }}
                                </span>
                                @else
                                <span class="badge badge-secondary">Console unreachable — stored history shown</span>
                                @endif

                                @if(($door['can_unlock'] ?? false))
                                <button wire:click="unlockDoor" wire:loading.attr="disabled"
                                    class="btn bg-gradient-dark btn-sm mb-0 px-4">
                                    <i class="fa fa-unlock me-1"></i> Unlock
                                </button>
                                @endif
                            </div>
                        </div>

                        <div class="d-flex flex-wrap mb-3" style="gap: 12px;">
                            <div class="unifi-stat">
                                <div class="stat-value">{{ number_format($stats['total']) }}</div>
                                <div class="text-xs text-secondary">Openings recorded</div>
                            </div>
                            <div class="unifi-stat">
                                <div class="stat-value {{ $stats['denied'] > 0 ? 'text-danger' : '' }}">{{ number_format($stats['denied']) }}</div>
                                <div class="text-xs text-secondary">Denied attempts</div>
                            </div>
                            <div class="unifi-stat">
                                <div class="stat-value" style="font-size: 1rem; line-height: 1.9;">{{ $stats['last'] ?? '—' }}</div>
                                <div class="text-xs text-secondary">Last opening</div>
                            </div>
                        </div>

                        @if(!empty($doorDevices))
                        <h6 class="text-uppercase text-xs text-secondary mb-2">Hardware at this door</h6>
                        @foreach($doorDevices as $device)
                        <span class="unifi-device-chip">
                            @if(!empty($device['image']))
                            <img src="{{ asset($device['image']) }}" alt="{{ $device['label'] }}">
                            @endif
                            <span>
                                <span class="font-weight-bold text-dark d-block" style="font-size: .85rem;">{{ $device['name'] }}</span>
                                <small class="text-secondary">{{ $device['label'] }}</small>
                            </span>
                            @if($device['online'] === true)
                            <span class="online-dot bg-success" title="Online"></span>
                            @elseif($device['online'] === false)
                            <span class="online-dot bg-danger" title="Offline"></span>
                            @endif
                        </span>
                        @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </div>

        {{-- Guest PINs (visitor mirror) — the Unifi analog of Sciener passcodes --}}
        <div class="card mb-4">
            <div class="card-body">
                <h6 class="mb-3">Guest PINs</h6>
                <div class="table-responsive">
                    <table class="table table-hover align-items-center records-table">
                        <thead>
                            <tr>
                                <th>Guest</th>
                                <th>PIN</th>
                                <th>From</th>
                                <th>To</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($visitors as $visitor)
                            <tr>
                                <td class="font-weight-bold">{{ $visitor['GuestName'] ?? '-' }}</td>
                                <td class="font-monospace">{{ $visitor['pin_code'] ?? '-' }}</td>
                                <td>{{ !empty($visitor['start_date']) ? \Carbon\Carbon::parse($visitor['start_date'])->format('d/m/y H:i') : '-' }}</td>
                                <td>{{ !empty($visitor['end_date']) ? \Carbon\Carbon::parse($visitor['end_date'])->format('d/m/y H:i') : '-' }}</td>
                                <td>
                                    @if(!empty($visitor['end_date']) && \Carbon\Carbon::parse($visitor['end_date'])->isPast())
                                    <span class="badge badge-secondary">Expired</span>
                                    @else
                                    <span class="badge badge-success">{{ $visitor['status'] ?? 'Active' }}</span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="text-center text-secondary">No guest PINs for this door.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Unlock records --}}
        <div class="card">
            <div class="card-body">
                <h6 class="mb-3">Unlock records</h6>

                <form wire:submit.prevent="searchRecords" class="mb-3 d-flex flex-wrap gap-2">
                    <input type="date" class="form-control" wire:model.defer="startDate" style="max-width: 180px;">
                    <input type="date" class="form-control" wire:model.defer="endDate" style="max-width: 180px;">
                    <input type="text" class="form-control flex-grow-1" placeholder="Search by name"
                        wire:model.defer="recordSearch" style="max-width: 260px;">
                    <button type="submit" class="btn bg-gradient-dark btn-sm mb-0 px-4">Filter</button>
                </form>

                <div class="table-responsive">
                    <table class="table table-hover align-items-center records-table">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Type</th>
                                <th>Result</th>
                                <th>Time</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($records as $record)
                            <tr>
                                <td class="font-weight-bold" data-label="Name">{{ $record->username ?? '-' }}</td>
                                <td data-label="Type">
                                    @switch($record->recordType)
                                    @case(-4) <i class="material-icons text-sm align-middle">qr_code</i> QR Code @break
                                    @case(1) <i class="fa fa-mobile-alt"></i> Unlock with APP @break
                                    @case(4) <i class="material-icons text-sm align-middle">dialpad</i> PIN @break
                                    @case(7) <i class="fa fa-credit-card"></i> Card @break
                                    @case(12) <i class="fa fa-wifi"></i> Unlock via network @break
                                    @case(48) <i class="fa fa-ban"></i> Unauthorized attempt @break
                                    @case(55) <i class="fa fa-unlock"></i> Remote Unlock @break
                                    @case(67) <i class="fa fa-user"></i> Facial ID Unlock @break
                                    @default <i class="fa fa-question-circle"></i> Unknown
                                    @endswitch
                                </td>
                                <td data-label="Result">
                                    @if ($record->success)
                                    <span class="badge badge-success">Granted</span>
                                    @else
                                    <span class="badge badge-danger">Denied</span>
                                    @endif
                                </td>
                                <td data-label="Time">{{ date('d/m/y H:i:s', $record->lockDate / 1000) }}</td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="4" class="text-center text-secondary">No records for this door yet.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                {{ $records->links() }}
            </div>
        </div>
    </div>
</div>