@extends('layouts.app')
@section('title', 'Add Prisoner')

@section('content')
<div class="container-fluid">
    <div class="card shadow-sm border-0 rounded-3 mt-3">
        <div class="card-header bg-primary text-white">
            <h4 class="mb-0"><i class="fas fa-user-plus me-2"></i> Add Prisoner</h4>
        </div>
        <div class="card-body">
            @can('prison.prisoners.add')<form action="{{ route('prison.prisoners.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                
                @if($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Full Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control form-control-lg" placeholder="Enter full name" value="{{ old('name') }}" required>
                        @error('name')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    
                    <div class="col-md-6">
                        <label class="form-label">Gender <span class="text-danger">*</span></label>
                        <select name="gender" class="form-select form-select-lg" required>
                            <option value="">Select Gender</option>
                            <option value="Male" {{ old('gender') == 'Male' ? 'selected' : '' }}>Male</option>
                            <option value="Female" {{ old('gender') == 'Female' ? 'selected' : '' }}>Female</option>
                            <option value="Other" {{ old('gender') == 'Other' ? 'selected' : '' }}>Other</option>
                        </select>
                        @error('gender')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    
                    <div class="col-md-6">
                        <label class="form-label">Date of Birth <span class="text-danger">*</span></label>
                        <input type="date" name="dob" class="form-control form-control-lg" value="{{ old('dob') }}" required>
                        @error('dob')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    
                    <div class="col-md-6">
                        <label class="form-label">Case Number <span class="text-danger">*</span></label>
                        <input type="text" name="case_number" class="form-control form-control-lg" placeholder="Enter case number" value="{{ old('case_number') }}" required>
                        @error('case_number')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    
                    <div class="col-md-6">
                        <label class="form-label">Photo</label>
                        <input type="file" name="photo" id="photoInput" class="form-control form-control-lg" accept="image/jpeg,image/png,image/jpg,image/gif">
                        <small class="text-muted">Allowed: JPG, JPEG, PNG, GIF. Max size: 2MB</small>

                        <div class="mt-2">
                            <button type="button" class="btn btn-outline-primary btn-sm" id="openCamera">
                                <i class="fas fa-camera me-1"></i> Use Camera
                            </button>
                        </div>

                        <div id="cameraArea" class="mt-2 border rounded p-2" style="display:none;">
                            <video id="cameraVideo" autoplay playsinline class="w-100 rounded" style="max-height:260px;background:#000;"></video>
                            <div class="mt-2 d-flex gap-2">
                                <button type="button" class="btn btn-success btn-sm" id="captureBtn"><i class="fas fa-camera"></i> Capture</button>
                                <button type="button" class="btn btn-secondary btn-sm" id="closeCamera"><i class="fas fa-times"></i> Close</button>
                            </div>
                        </div>

                        <div id="previewArea" class="mt-2" style="display:none;">
                            <img id="photoPreview" class="img-thumbnail" width="150" alt="Preview">
                            <div><button type="button" class="btn btn-link btn-sm text-danger p-0" id="clearCapture">Clear</button></div>
                        </div>

                        <canvas id="photoCanvas" class="d-none"></canvas>
                        @error('photo')
                            <br><small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    
                    <div class="col-md-6">
                        <label class="form-label">Fingerprint / Biometric</label>
                        <input type="text" name="fingerprint" class="form-control form-control-lg" placeholder="Optional" value="{{ old('fingerprint') }}">
                        @error('fingerprint')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                </div>
                
                <hr class="my-4">
                <h5 class="mb-3"><i class="fas fa-user-friends me-2"></i> Next of Kin</h5>
                <h6 class="fw-bold">Primary Contact <span class="text-danger">*</span></h6>
                <div class="row g-3 mb-4">
                    <div class="col-md-4">
                        <label class="form-label">Full Name <span class="text-danger">*</span></label>
                        <input type="text" name="nok_primary[name]" class="form-control" value="{{ old('nok_primary.name') }}" required>
                        @error('nok_primary.name')<small class="text-danger">{{ $message }}</small>@enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Relationship <span class="text-danger">*</span></label>
                        <input type="text" name="nok_primary[relationship]" placeholder="e.g. Spouse, Parent" class="form-control" value="{{ old('nok_primary.relationship') }}" required>
                        @error('nok_primary.relationship')<small class="text-danger">{{ $message }}</small>@enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Phone <span class="text-danger">*</span></label>
                        <input type="text" name="nok_primary[phone]" class="form-control" value="{{ old('nok_primary.phone') }}" required>
                        @error('nok_primary.phone')<small class="text-danger">{{ $message }}</small>@enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Alternate Phone</label>
                        <input type="text" name="nok_primary[alt_phone]" class="form-control" value="{{ old('nok_primary.alt_phone') }}">
                        @error('nok_primary.alt_phone')<small class="text-danger">{{ $message }}</small>@enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Email</label>
                        <input type="email" name="nok_primary[email]" class="form-control" value="{{ old('nok_primary.email') }}">
                        @error('nok_primary.email')<small class="text-danger">{{ $message }}</small>@enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Address</label>
                        <input type="text" name="nok_primary[address]" class="form-control" value="{{ old('nok_primary.address') }}">
                        @error('nok_primary.address')<small class="text-danger">{{ $message }}</small>@enderror
                    </div>
                </div>
                <h6 class="fw-bold">Secondary Contact <span class="text-muted">(optional)</span></h6>
                <div class="row g-3 mb-4">
                    <div class="col-md-4">
                        <label class="form-label">Full Name</label>
                        <input type="text" name="nok_secondary[name]" class="form-control" value="{{ old('nok_secondary.name') }}">
                        @error('nok_secondary.name')<small class="text-danger">{{ $message }}</small>@enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Relationship</label>
                        <input type="text" name="nok_secondary[relationship]" class="form-control" value="{{ old('nok_secondary.relationship') }}">
                        @error('nok_secondary.relationship')<small class="text-danger">{{ $message }}</small>@enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Phone</label>
                        <input type="text" name="nok_secondary[phone]" class="form-control" value="{{ old('nok_secondary.phone') }}">
                        @error('nok_secondary.phone')<small class="text-danger">{{ $message }}</small>@enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Alternate Phone</label>
                        <input type="text" name="nok_secondary[alt_phone]" class="form-control" value="{{ old('nok_secondary.alt_phone') }}">
                        @error('nok_secondary.alt_phone')<small class="text-danger">{{ $message }}</small>@enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Email</label>
                        <input type="email" name="nok_secondary[email]" class="form-control" value="{{ old('nok_secondary.email') }}">
                        @error('nok_secondary.email')<small class="text-danger">{{ $message }}</small>@enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Address</label>
                        <input type="text" name="nok_secondary[address]" class="form-control" value="{{ old('nok_secondary.address') }}">
                        @error('nok_secondary.address')<small class="text-danger">{{ $message }}</small>@enderror
                    </div>
                </div>

                <div class="mt-4 text-end">
                    <a href="{{ route('prison.prisoners.index') }}" class="btn btn-secondary btn-lg me-2">
                        <i class="fas fa-times me-2"></i> Cancel
                    </a>
                    <button type="submit" class="btn btn-success btn-lg">
                        <i class="fas fa-save me-2"></i> Save Prisoner
                    </button>
                </div>
            </form>@endcan
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
    const openBtn     = document.getElementById('openCamera');
    const cameraArea  = document.getElementById('cameraArea');
    const video       = document.getElementById('cameraVideo');
    const captureBtn  = document.getElementById('captureBtn');
    const closeBtn    = document.getElementById('closeCamera');
    const canvas      = document.getElementById('photoCanvas');
    const fileInput   = document.getElementById('photoInput');
    const previewArea = document.getElementById('previewArea');
    const preview     = document.getElementById('photoPreview');
    const clearBtn    = document.getElementById('clearCapture');
    let stream = null;

    if (!openBtn) return; // photo field not on this page

    async function startCamera() {
        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
            alert('Camera is not supported on this browser/device.');
            return;
        }
        try {
            stream = await navigator.mediaDevices.getUserMedia({
                video: { facingMode: 'user', width: { ideal: 1280 }, height: { ideal: 720 } },
                audio: false
            });
            video.srcObject = stream;
            cameraArea.style.display = 'block';
        } catch (err) {
            alert('Unable to access camera: ' + err.message +
                  '\n\nThe page must be served over HTTPS (or localhost) and camera permission granted.');
        }
    }

    function stopCamera() {
        if (stream) { stream.getTracks().forEach(t => t.stop()); stream = null; }
        cameraArea.style.display = 'none';
    }

    openBtn.addEventListener('click', startCamera);
    closeBtn.addEventListener('click', stopCamera);

    captureBtn.addEventListener('click', function () {
        const vw = video.videoWidth, vh = video.videoHeight;
        if (!vw || !vh) return;

        // Downscale to max width 1000px to keep the file well under 2MB
        const maxW = 1000;
        let tw = vw, th = vh;
        if (vw > maxW) { th = Math.round(vh * maxW / vw); tw = maxW; }

        canvas.width = tw;
        canvas.height = th;
        canvas.getContext('2d').drawImage(video, 0, 0, tw, th);

        canvas.toBlob(function (blob) {
            const file = new File([blob], 'capture_' + Date.now() + '.jpg', { type: 'image/jpeg' });
            const dt = new DataTransfer();
            dt.items.add(file);
            fileInput.files = dt.files;            // backend reads $request->file('photo') unchanged
            preview.src = URL.createObjectURL(blob);
            previewArea.style.display = 'block';
            stopCamera();
        }, 'image/jpeg', 0.9);
    });

    // Preview a browsed file too
    fileInput.addEventListener('change', function () {
        if (fileInput.files && fileInput.files[0]) {
            preview.src = URL.createObjectURL(fileInput.files[0]);
            previewArea.style.display = 'block';
        }
    });

    clearBtn.addEventListener('click', function () {
        fileInput.value = '';
        preview.src = '';
        previewArea.style.display = 'none';
    });
})();
</script>
@endpush