@extends('layouts.app')
@section('title', 'Prisoners')

@section('content')
    {{-- Page guide: what this screen is for --}}
    <div class="alert alert-light border-start border-4 border-primary shadow-sm d-flex align-items-start mb-4" data-page-guide role="note">
        <i class="fas fa-circle-info text-primary me-2 mt-1"></i>
        <div><strong>Prisoner Register.</strong> The master prisoner register. View, search and manage prisoner records, and open each prisoner's full profile, current location and history.</div>
    </div>

{{-- Branch Info Banner --}}
<div class="alert alert-info mb-4">
    <i class="fas fa-building me-2"></i>
    <strong>Current Branch:</strong> {{ \App\Helpers\BranchHelper::getCurrentBranchName() }}
    @if(\App\Helpers\BranchHelper::isSuperAdmin())
        <span class="badge bg-danger ms-2">Super Admin - Viewing All Branches</span>
    @endif
</div>
<div class="container-fluid">
    <div class="card shadow-sm border-0 rounded-3 mt-3">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
            <h4 class="mb-0"><i class="fas fa-users me-2"></i> Prisoner List</h4>
        </div>

        <div class="card-body">
            {{-- Search Form --}}
            <form method="GET" class="row g-2 mb-4">
                <div class="col-md-6 col-lg-4">
                    <input type="text" name="search" class="form-control form-control-lg" placeholder="Search by Name or Prisoner Number" value="{{ request('search') }}">
                </div>
                <div class="col-auto">
                    <button class="btn btn-primary btn-lg">
                        <i class="fas fa-search me-1"></i> Search
                    </button>
                </div>
            </form>

            {{-- Prisoner Table --}}
            <div class="table-responsive">
                <table class="table table-bordered table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>#</th>
                            <th>Prisoner Number</th>
                            <th>Name</th>
                            <th>Gender</th>
                            <th>DOB</th>
                            <th>Case Number</th>
                            <th>Photo</th>
                                                   </tr>
                    </thead>
                    <tbody>
                        @forelse($prisoners as $key => $p)
                        <tr>
                            <td>{{ $key + 1 }}</td>
                            <td>
                            <a href="{{ route('prison.prisoners.show', $p->id) }}" class="fw-bold text-decoration-none">
                                {{ $p->prisoner_number }}
                            </a>
							</td>
                            <td>{{ $p->name }}</td>
                            <td>{{ $p->gender }}</td>
                            <td>{{ $p->dob }}</td>
                            <td>{{ $p->case_number }}</td>
                            <td>
                           @if($p->photo)
    @php
        // Convert stored path to public URL via symbolic link
        $imageUrl = asset('storage/' . $p->photo);
        // This will generate: http://localhost:81/prisons/public/storage/prisoner_photos/filename.png
    @endphp
    <img src="{{ $imageUrl }}" 
         class="rounded img-thumbnail" 
         width="50" 
         height="50" 
         alt="Photo" 
         style="object-fit: cover; cursor: pointer;"
         data-bs-toggle="modal" 
         data-bs-target="#imageModal"
         data-image="{{ $imageUrl }}"
         data-name="{{ $p->name }}"
         data-number="{{ $p->prisoner_number }}">
@else
    <span class="text-muted">N/A</span>
@endif
                            </td>
                           
                        </tr>
                        @empty
                        <tr>
                            <td colspan="8" class="text-center text-muted">No prisoners found.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- Pagination --}}
            <div class="mt-3">
                {{ $prisoners->links() }}
            </div>
        </div>
    </div>
</div>

{{-- Image Modal --}}
<div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="imageModalLabel">
                    <i class="fas fa-user me-2"></i> 
                    <span id="modalPrisonerName">Prisoner Photo</span>
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <div class="position-relative">
                    <img id="modalImage" src="" alt="Prisoner Photo" class="img-fluid rounded" style="max-height: 70vh; object-fit: contain;">
                </div>
                <div class="mt-3 text-muted">
                    <small>Prisoner Number: <strong id="modalPrisonerNumber"></strong></small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i> Close
                </button>
                <button type="button" class="btn btn-primary" id="downloadImageBtn">
                    <i class="fas fa-download me-1"></i> Download
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    // Initialize modal with image data
    document.addEventListener('DOMContentLoaded', function() {
        const imageModal = document.getElementById('imageModal');
        const modalImage = document.getElementById('modalImage');
        const modalPrisonerName = document.getElementById('modalPrisonerName');
        const modalPrisonerNumber = document.getElementById('modalPrisonerNumber');
        const downloadBtn = document.getElementById('downloadImageBtn');
        
        let currentImageUrl = '';
        
        // Add click event to all images with data-bs-toggle
        document.querySelectorAll('[data-bs-toggle="modal"]').forEach(element => {
            element.addEventListener('click', function() {
                const imageUrl = this.getAttribute('data-image');
                const prisonerName = this.getAttribute('data-name');
                const prisonerNumber = this.getAttribute('data-number');
                
                currentImageUrl = imageUrl;
                modalImage.src = imageUrl;
                modalPrisonerName.textContent = prisonerName;
                modalPrisonerNumber.textContent = prisonerNumber;
            });
        });
        
        // Download image functionality
        downloadBtn.addEventListener('click', function() {
            if (currentImageUrl) {
                const link = document.createElement('a');
                link.href = currentImageUrl;
                link.download = currentImageUrl.split('/').pop();
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        });
    });
</script>
@endpush