@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
<div class="row mb-4">
    <div class="col-12">
        <h2><i class="bi bi-speedometer2"></i> Dashboard</h2>
        <p class="text-muted">Welcome back, {{ auth()->user()->name }}!</p>
    </div>
</div>

{{-- Quick Stats --}}
<div class="row g-3 mb-4">
    <div class="col-md-4">
        <div class="card bg-success text-white h-100">
            <div class="card-body d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="mb-0">Branches</h6>
                    <h2 class="mb-0">{{ $branches->count() }}</h2>
                </div>
                <i class="bi bi-building fs-1 opacity-50"></i>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card bg-warning h-100">
            <div class="card-body d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="mb-0">Sites</h6>
                    <h2 class="mb-0">{{ $branches->sum(fn($b) => $b->zones->count()) }}</h2>
                </div>
                <i class="bi bi-geo-alt fs-1 opacity-50"></i>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card bg-info text-white h-100">
            <div class="card-body d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="mb-0">Users</h6>
                    <h2 class="mb-0">{{ $userCount }}</h2>
                </div>
                <i class="bi bi-people fs-1 opacity-50"></i>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card bg-danger text-white h-100">
            <div class="card-body d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="mb-0">Security Personnel</h6>
                    <h2 class="mb-0">{{ $securityCount }}</h2>
                </div>
                <i class="bi bi-shield-lock fs-1 opacity-50"></i>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card bg-secondary text-white h-100">
            <div class="card-body d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="mb-0">Weapons</h6>
                    <h2 class="mb-0">{{ $weaponCount }}</h2>
                </div>
                <i class="bi bi-crosshair fs-1 opacity-50"></i>
            </div>
        </div>
    </div>
</div>

{{-- ID-Card Expiry Alerts --}}
@auth
    @if($expiredIdCards->isNotEmpty() || $soonExpiringIdCards->isNotEmpty())
    <div class="row mb-4">
        <div class="col-12">
            @if($expiredIdCards->isNotEmpty())
            <div class="alert alert-danger">
                <h5 class="alert-heading mb-3"><i class="bi bi-patch-exclamation me-2"></i>Expired ID Cards ({{ $expiredIdCards->count() }})</h5>
                <table class="table table-hover table-sm align-middle mb-0">
                    <thead>
                        <tr>
                            <th>Full Name</th>
                            <th>Branch</th>
                            <th>Expiry Date</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($expiredIdCards as $person)
                        <tr>
                            <td><strong>{{ $person->full_name }}</strong></td>
                            <td>{{ $person->branch?->name ?? '-' }}</td>
                            <td><span class="badge bg-danger">EXPIRED {{ $person->id_card_expiry_date->format('d/m/Y') }}</span></td>
                            <td class="text-end">
                                <a href="{{ route('security.show', $person) }}" class="btn btn-sm btn-outline-danger">View</a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @endif
            @if($soonExpiringIdCards->isNotEmpty())
            <div class="alert alert-warning">
                <h5 class="alert-heading mb-3"><i class="bi bi-hourglass-split me-2"></i>ID Cards Expiring Soon ({{ $soonExpiringIdCards->count() }})</h5>
                <table class="table table-hover table-sm align-middle mb-0">
                    <thead>
                        <tr>
                            <th>Full Name</th>
                            <th>Branch</th>
                            <th>Expiry Date</th>
                            <th>Days Left</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($soonExpiringIdCards as $person)
                        <tr>
                            <td><strong>{{ $person->full_name }}</strong></td>
                            <td>{{ $person->branch?->name ?? '-' }}</td>
                            <td><span class="badge bg-warning text-dark">{{ $person->id_card_expiry_date->format('d/m/Y') }}</span></td>
                            <td>{{ $person->id_card_expiry_date->diffInDays(today()) }} day(s)</td>
                            <td class="text-end">
                                <a href="{{ route('security.show', $person) }}" class="btn btn-sm btn-outline-warning">View</a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @endif
        </div>
    </div>
    @endif
@endauth

<audio id="welcomeSound" preload="auto">
    <source src="{{ asset('audio/welcome.mp3') }}" type="audio/mpeg">
</audio>
@endsection

@push('scripts')
<script>
document.addEventListener("DOMContentLoaded", function () {
    const sound = document.getElementById("welcomeSound");

    sound.volume = 1.0;

    sound.play().catch(() => {
        // Browser blocked autoplay.
        console.log("Autoplay blocked. Waiting for user interaction.");

        const playWelcome = () => {
            sound.play().catch(() => {});
            document.removeEventListener("click", playWelcome);
            document.removeEventListener("touchstart", playWelcome);
        };

        document.addEventListener("click", playWelcome, { once: true });
        document.addEventListener("touchstart", playWelcome, { once: true });
    });
});
</script>
<script>
window.addEventListener("load", function () {

    const welcomeMessage =
        "Soo dhawoow... Taliye Fanax. " +
        "Ha ilaawin... inaad maanta shaqada kuu taal aad qabato. " +
        "Xasuusnow mar walba Allah... " +
        "Taliye Fanax... mahadsanid.";

    function speakWelcome() {
        const speech = new SpeechSynthesisUtterance(welcomeMessage);

        // Somali language
        speech.lang = "so-SO";

        // Natural speaking speed
        speech.rate = 0.9;
        speech.pitch = 1.0;
        speech.volume = 1.0;

        window.speechSynthesis.cancel();
        window.speechSynthesis.speak(speech);
    }

    // Try when page loads
    setTimeout(() => {
        speakWelcome();
    }, 500);

    // If browser blocks autoplay, speak after first click/touch
    document.addEventListener("click", speakWelcome, { once: true });
    document.addEventListener("touchstart", speakWelcome, { once: true });

});
</script>
@endpush