@extends('layouts.app')

@section('title', 'Edit Prisoner')

@section('content')
<div class="container-fluid">
    <div class="card shadow-sm border-0 rounded-3 mt-3">
        <div class="card-header bg-warning text-dark">
            <h4 class="mb-0"><i class="fas fa-user-edit me-2"></i> Edit Prisoner</h4>
        </div>
        <div class="card-body">
            @can('prison.prisoners.edit')<form method="POST" action="{{ route('prison.prisoners.update', $prisoner->id) }}" 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">Prisoner Number</label>
                        <input type="text" class="form-control form-control-lg" value="{{ $prisoner->prisoner_number }}" disabled readonly>
                        <small class="text-muted">Auto-generated, cannot be edited</small>
                    </div>
                    
                    <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" value="{{ old('name', $prisoner->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', $prisoner->gender) == 'Male' ? 'selected' : '' }}>Male</option>
                            <option value="Female" {{ old('gender', $prisoner->gender) == 'Female' ? 'selected' : '' }}>Female</option>
                            <option value="Other" {{ old('gender', $prisoner->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', $prisoner->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" value="{{ old('case_number', $prisoner->case_number) }}" required>
                        @error('case_number')
                            <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" value="{{ old('fingerprint', $prisoner->fingerprint) }}" placeholder="Optional">
                        @error('fingerprint')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    
                    <div class="col-md-6">
                        <label class="form-label">Current Photo</label>
                        <div class="mb-2">
                            @if($prisoner->photo && Storage::disk('public')->exists($prisoner->photo))
                                <img src="{{ asset('storage/' . $prisoner->photo) }}" class="img-thumbnail" width="150" height="150" alt="Current Photo">
                            @else
                                <div class="alert alert-secondary mb-0">
                                    <i class="fas fa-image me-2"></i> No photo uploaded
                                </div>
                            @endif
                        </div>
                        
                        <div class="form-check mb-2">
                            <input type="checkbox" name="remove_photo" value="1" class="form-check-input" id="removePhoto">
                            <label class="form-check-label text-danger" for="removePhoto">
                                <i class="fas fa-trash me-1"></i> Remove current photo
                            </label>
                        </div>
                        
                        <label class="form-label">Upload New 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">Leave empty to keep current photo. 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 new photo</button></div>
                        </div>

                        <canvas id="photoCanvas" class="d-none"></canvas>
                        @error('photo')
                            <br><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', optional($prisoner->primaryNextOfKin)->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', optional($prisoner->primaryNextOfKin)->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', optional($prisoner->primaryNextOfKin)->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', optional($prisoner->primaryNextOfKin)->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', optional($prisoner->primaryNextOfKin)->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', optional($prisoner->primaryNextOfKin)->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', optional($prisoner->secondaryNextOfKin)->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', optional($prisoner->secondaryNextOfKin)->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', optional($prisoner->secondaryNextOfKin)->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', optional($prisoner->secondaryNextOfKin)->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', optional($prisoner->secondaryNextOfKin)->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', optional($prisoner->secondaryNextOfKin)->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-arrow-left me-2"></i> Cancel
                    </a>
                    <button type="submit" class="btn btn-primary btn-lg">
                        <i class="fas fa-save me-2"></i> Update 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