@extends('layouts.app')

@section('title', 'Personnel ' . $security->full_name)

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-shield-lock"></i> {{ $security->full_name }}</h2>
    <div>
        <a href="{{ route('security.print', $security) }}" target="_blank" class="btn btn-dark"><i class="bi bi-printer"></i> Print</a>
        <a href="{{ route('security.edit', $security) }}" class="btn btn-warning"><i class="bi bi-pencil"></i> Edit</a>
        <a href="{{ route('security.index') }}" class="btn btn-secondary"><i class="bi bi-arrow-left"></i> Back</a>
        <form method="POST" action="{{ route('security.destroy', $security) }}" class="d-inline" onsubmit="return confirm('Delete {{ $security->full_name }}?')">
            @csrf @method('DELETE')
            <button type="submit" class="btn btn-danger"><i class="bi bi-trash"></i> Delete</button>
        </form>
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <div class="card mb-3">
            <div class="card-header report-header">Staff Photo</div>
            <div class="card-body text-center">
                @if($security->staff_photo && file_exists(public_path($security->staff_photo)))
                <img src="{{ asset($security->staff_photo) }}" style="max-height:220px; object-fit:cover; border-radius:8px;" alt="Staff photo">
                @else
                <span class="text-muted">No photo uploaded</span>
                @endif
            </div>
        </div>
        <div class="card mb-3">
            <div class="card-header report-header">Weapon Image</div>
            <div class="card-body text-center">
                @if($security->weapon_image && file_exists(public_path($security->weapon_image)))
                <img src="{{ asset($security->weapon_image) }}" style="max-height:220px; object-fit:cover; border-radius:8px;" alt="Weapon image">
                @else
                <span class="text-muted">No weapon image uploaded</span>
                @endif
            </div>
        </div>
        <div class="card mb-3">
            <div class="card-header report-header"><i class="bi bi-qr-code"></i> QR Code</div>
            <div class="card-body text-center">
                <img id="qrCodeImg" alt="QR code" style="max-width:180px;">
                <p class="text-muted mt-2 mb-1" style="font-size:12px; word-break:break-all;">{{ $security->qrUrl() }}</p>
                <a href="{{ route('security.public', $security->qr_token) }}" target="_blank" class="btn btn-sm btn-outline-dark"><i class="bi bi-box-arrow-up-right"></i> Open Profile</a>
            </div>
        </div>
    </div>
    <div class="col-md-8">
        <div class="card">
            <div class="card-header report-header">Personnel Information</div>
            <div class="card-body">
                <table class="table table-borderless mb-0">
                    <tr>
                        <th style="width:220px;">Full Name</th>
                        <td><strong class="text-primary">{{ $security->full_name }}</strong></td>
                    </tr>
                    <tr>
                        <th>Phone Number</th>
                        <td>{{ $security->phone_number ?? 'N/A' }}</td>
                    </tr>
                    <tr>
                        <th>Title</th>
                        <td>{{ $security->title ?? 'N/A' }}</td>
                    </tr>
                    <tr>
                        <th>Branch</th>
                        <td>{{ $security->branch?->name ?? 'N/A' }}</td>
                    </tr>
                    <tr>
                        <th>Site</th>
                        <td>{{ $security->site?->name ?? 'N/A' }}</td>
                    </tr>
                    <tr>
                        <th>Region</th>
                        <td>{{ $security->region ?? 'N/A' }}</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="card mt-3">
            <div class="card-header report-header"><i class="bi bi-credit-card"></i> ID-Card Information</div>
            <div class="card-body">
                <table class="table table-borderless mb-0">
                    <tr>
                        <th style="width:220px;">National ID</th>
                        <td><strong>{{ $security->national_id ?? 'N/A' }}</strong></td>
                    </tr>
                    <tr>
                        <th>ID Card Number</th>
                        <td>{{ $security->id_card_number ?? 'N/A' }}</td>
                    </tr>
                    <tr>
                        <th>Issued Date</th>
                        <td>{{ $security->id_card_issued_date?->format('d/m/Y') ?? 'N/A' }}</td>
                    </tr>
                    <tr>
                        <th>Expiry Date</th>
                        <td>
                            @if($security->id_card_expiry_date)
                            <span class="{{ $security->id_card_expiry_date->isPast() ? 'text-danger fw-bold' : '' }}">{{ $security->id_card_expiry_date->format('d/m/Y') }}</span>
                            @if($security->id_card_expiry_date->isPast()) <span class="badge bg-danger">EXPIRED</span>@endif
                            @else
                            N/A
                            @endif
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="card mt-3">
            <div class="card-header report-header">Weapon Information</div>
            <div class="card-body">
                <table class="table table-borderless mb-0">
                    <tr>
                        <th style="width:220px;">Weapon Name</th>
                        <td><strong>{{ $security->weapon_name ?? 'N/A' }}</strong></td>
                    </tr>
                    <tr>
                        <th>Weapon Model</th>
                        <td>{{ $security->weapon_model ?? 'N/A' }}</td>
                    </tr>
                    <tr>
                        <th>Weapon Serial</th>
                        <td><span class="badge bg-warning">{{ $security->weapon_serial ?? 'N/A' }}</span></td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="card mt-3">
            <div class="card-header report-header"><i class="bi bi-calendar-heart"></i> Leave Balance</div>
            <div class="card-body">
                <div class="row text-center g-3">
                    <div class="col-md-4">
                        <div class="border rounded p-3">
                            <div class="text-muted small">Annual Entitlement</div>
                            <div class="fs-3 fw-bold text-primary">{{ $security->annualEntitlement() }}</div>
                            <small class="text-muted">days</small>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="border rounded p-3">
                            <div class="text-muted small">Used</div>
                            <div class="fs-3 fw-bold {{ $security->usedLeaveDays() > $security->annualEntitlement() ? 'text-danger' : '' }}">{{ $security->usedLeaveDays() }}</div>
                            <small class="text-muted">days</small>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="border rounded p-3">
                            <div class="text-muted small">Remaining</div>
                            <div class="fs-3 fw-bold {{ $security->remainingLeaveDays() == 0 && $security->usedLeaveDays() > 0 ? 'text-danger' : 'text-success' }}">{{ $security->remainingLeaveDays() }}</div>
                            <small class="text-muted">days</small>
                        </div>
                    </div>
                </div>
                @php $byType = $security->leaveUsedByType(); @endphp
                @if($byType)
                <hr>
                <h6 class="text-muted mb-2">Used by Type</h6>
                <table class="table table-sm table-borderless mb-0">
                    @foreach($byType as $type => $days)
                    <tr>
                        <td><span class="badge bg-dark text-capitalize">{{ str_replace('_', ' ', $type) }}</span></td>
                        <td class="text-end"><strong>{{ $days }}</strong> days</td>
                    </tr>
                    @endforeach
                </table>
                @endif
            </div>
        </div>
        <div class="card mt-3">
            <div class="card-header report-header"><i class="bi bi-calendar-event"></i> Leave History</div>
            <div class="card-body p-0">
                @if($security->leaves->count())
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead>
                            <tr>
                                <th>Type</th>
                                <th>Start</th>
                                <th>End</th>
                                <th>Days</th>
                                <th>Status</th>
                                <th>Decided By</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($security->leaves->sortByDesc('start_date') as $leaf)
                            <tr>
                                <td><span class="badge bg-dark text-capitalize">{{ str_replace('_', ' ', $leaf->leave_type) }}</span></td>
                                <td>{{ $leaf->start_date->format('d/m/Y') }}</td>
                                <td>{{ $leaf->end_date->format('d/m/Y') }}</td>
                                <td>{{ $leaf->days }}</td>
                                <td>
                                    @if($leaf->status === 'approved')
                                    <span class="badge bg-success">Approved</span>
                                    @elseif($leaf->status === 'declined')
                                    <span class="badge bg-danger">Declined</span>
                                    @else
                                    <span class="badge bg-warning text-dark">Pending</span>
                                    @endif
                                </td>
                                <td>{{ $leaf->approver?->name ?? '-' }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @else
                <div class="text-center text-muted py-4">No leave records yet.</div>
                @endif
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="{{ asset('js/qrious.min.js') }}"></script>
<script>
    (function () {
        var qr = new QRious({
            value: {!! json_encode($security->qrUrl()) !!},
            size: 180,
            level: 'M',
            foreground: '#0c2340'
        });
        document.getElementById('qrCodeImg').src = qr.toDataURL();
    })();
</script>
@endpush
@endsection