@extends('layouts.app')

@section('title', 'Create New Discharge')

@section('content')
<div class="container-fluid">
    <div class="page-header">
        <div class="row align-items-center">
            <div class="col">
                <h3 class="page-title">Create New Discharge</h3>
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('prison.discharges.index') }}">Discharges</a></li>
                    <li class="breadcrumb-item active">Create</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h5 class="card-title">Discharge Information</h5>
        </div>
        <div class="card-body">
            <form action="{{ route('prison.discharges.store') }}" method="POST">
                @csrf
                
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label">Select Prisoner <span class="text-danger">*</span></label>
                            <select name="prisoner_id" class="form-select @error('prisoner_id') is-invalid @enderror" required>
                                <option value="">-- Select Prisoner --</option>
                                @foreach($prisoners as $prisoner)
                                    <option value="{{ $prisoner->id }}" {{ old('prisoner_id') == $prisoner->id ? 'selected' : '' }}>
                                        {{ $prisoner->prisoner_number }} - {{ $prisoner->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('prisoner_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label">Discharge Type <span class="text-danger">*</span></label>
                            <select name="discharge_type" class="form-select @error('discharge_type') is-invalid @enderror" required>
                                <option value="">-- Select Type --</option>
                                <option value="sentence_expired" {{ old('discharge_type') == 'sentence_expired' ? 'selected' : '' }}>Sentence Expired</option>
                                <option value="parole" {{ old('discharge_type') == 'parole' ? 'selected' : '' }}>Parole</option>
                                <option value="mandatory_supervised_release" {{ old('discharge_type') == 'mandatory_supervised_release' ? 'selected' : '' }}>Mandatory Supervised Release</option>
                                <option value="compassionate" {{ old('discharge_type') == 'compassionate' ? 'selected' : '' }}>Compassionate Release</option>
                                <option value="pardon" {{ old('discharge_type') == 'pardon' ? 'selected' : '' }}>Pardon</option>
                                <option value="other" {{ old('discharge_type') == 'other' ? 'selected' : '' }}>Other</option>
                            </select>
                            @error('discharge_type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label">Discharge Date <span class="text-danger">*</span></label>
                            <input type="date" name="discharge_date" class="form-control @error('discharge_date') is-invalid @enderror" 
                                   value="{{ old('discharge_date') }}" required>
                            @error('discharge_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label">Status <span class="text-danger">*</span></label>
                            <select name="status" class="form-select @error('status') is-invalid @enderror" required>
                                <option value="scheduled" {{ old('status') == 'scheduled' ? 'selected' : '' }}>Scheduled</option>
                                <!--<option value="completed" {{ old('status') == 'completed' ? 'selected' : '' }}>Completed</option>
                                <option value="cancelled" {{ old('status') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>-->
                            </select>
                            @error('status')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="mb-3">
                            <div class="form-check">
                                <input type="checkbox" name="is_supervised" class="form-check-input" id="is_supervised" 
                                       value="1" {{ old('is_supervised') ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_supervised">
                                    Is this prisoner under post-release supervision?
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="supervision_fields" style="display: none;">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label class="form-label">Supervision End Date</label>
                                <input type="date" name="supervision_end_date" class="form-control" 
                                       value="{{ old('supervision_end_date') }}">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label class="form-label">Supervision Conditions</label>
                                <textarea name="conditions" class="form-control" rows="3" 
                                          placeholder="List all supervision conditions (e.g., weekly reporting, curfew, drug testing...)">{{ old('conditions') }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <hr>
                {{-- ===== Records pulled from the prisoner's admission (read-only) ===== --}}
                <h6 class="mb-2"><i class="fas fa-child me-1"></i> Accompanying Children (recorded at admission)</h6>
                <div id="children_holdings" class="mb-4">
                    <p class="text-muted mb-0">Select a prisoner to load records.</p>
                </div>

                <h6 class="mb-1"><i class="fas fa-box me-1"></i> Property &amp; Money Held</h6>
                <p class="text-muted small mb-2">Tick each item as it is handed back. Item details are read-only.</p>
                <div class="table-responsive mb-3">
                    <table class="table table-bordered align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th style="width:90px;" class="text-center">Returned</th>
                                <th style="width:110px;">Type</th>
                                <th>Description</th>
                                <th style="width:70px;">Qty</th>
                                <th style="width:140px;">Value</th>
                                <th>Notes</th>
                            </tr>
                        </thead>
                        <tbody id="belongings_holdings">
                            <tr><td colspan="6" class="text-center text-muted">Select a prisoner to load records.</td></tr>
                        </tbody>
                    </table>
                </div>

                <div class="row">
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label class="form-label">Gate Money Amount</label>
                            <div class="input-group">
                                <span class="input-group-text">KSh</span>
                                <input type="number" step="0.01" name="gate_money_amount" class="form-control" 
                                       value="{{ old('gate_money_amount', 0) }}">
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label class="form-label">Bus/Travel Voucher</label>
                            <input type="text" name="bus_voucher_provided" class="form-control" 
                                   placeholder="e.g., Greyhound ticket to Nairobi"
                                   value="{{ old('bus_voucher_provided') }}">
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label class="form-label">Discharge Officer</label>
                            <input type="text" name="discharge_officer" class="form-control" 
                                   placeholder="Officer's name"
                                   value="{{ old('discharge_officer', Auth::user()->name ?? '') }}">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <div class="form-check">
                                <input type="checkbox" name="id_card_issued" class="form-check-input" id="id_card_issued" 
                                       value="1" {{ old('id_card_issued') ? 'checked' : '' }}>
                                <label class="form-check-label" for="id_card_issued">
                                    State ID issued
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <div class="mb-3">
                            <div class="form-check">
                                <input type="checkbox" name="property_returned" class="form-check-input" id="property_returned" 
                                       value="1" {{ old('property_returned') ? 'checked' : '' }}>
                                <label class="form-check-label" for="property_returned">
                                    Personal property returned
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="mb-3">
                            <label class="form-label">Reentry Referrals</label>
                            <textarea name="reentry_referrals" class="form-control" rows="2" 
                                      placeholder="Job placement, housing, treatment programs...">{{ old('reentry_referrals') }}</textarea>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="mb-3">
                            <label class="form-label">Medical Handover</label>
                            <textarea name="medical_handover" class="form-control" rows="2" 
                                      placeholder="Medical records, prescriptions handed over...">{{ old('medical_handover') }}</textarea>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="mb-3">
                            <label class="form-label">Additional Notes</label>
                            <textarea name="notes" class="form-control" rows="3" 
                                      placeholder="Any other relevant information...">{{ old('notes') }}</textarea>
                        </div>
                    </div>
                </div>

                <div class="form-group text-center">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Save Discharge Record
                    </button>
                    <a href="{{ route('prison.discharges.index') }}" class="btn btn-secondary">
                        <i class="fas fa-times"></i> Cancel
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.getElementById('is_supervised').addEventListener('change', function() {
    const supervisionFields = document.getElementById('supervision_fields');
    supervisionFields.style.display = this.checked ? 'block' : 'none';
});

// Trigger on page load
if (document.getElementById('is_supervised').checked) {
    document.getElementById('supervision_fields').style.display = 'block';
}
</script>

<script>
(function () {
    const select       = document.querySelector('select[name="prisoner_id"]');
    const childrenBox  = document.getElementById('children_holdings');
    const belongingsBox = document.getElementById('belongings_holdings');
    if (!select || !belongingsBox) return;

    const urlTpl = "{{ route('prison.discharges.prisonerHoldings', ['prisoner' => '__ID__']) }}";

    function esc(s) {
        return (s == null ? '' : String(s)).replace(/[&<>"]/g, c => (
            {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]
        ));
    }

    function renderChildren(list) {
        if (!list || !list.length) {
            childrenBox.innerHTML = '<p class="text-muted mb-0">No accompanying children recorded.</p>';
            return;
        }
        let html = '<ul class="list-group mb-0">';
        list.forEach(c => {
            html += '<li class="list-group-item">'
                +  '<strong>' + esc(c.name) + '</strong>'
                +  (c.gender ? ' &middot; ' + esc(c.gender) : '')
                +  (c.date_of_birth ? ' &middot; DOB: ' + esc(c.date_of_birth) : '')
                +  (c.notes ? '<br><small class="text-muted">' + esc(c.notes) + '</small>' : '')
                +  '</li>';
        });
        html += '</ul>';
        childrenBox.innerHTML = html;
    }

    function renderBelongings(list) {
        if (!list || !list.length) {
            belongingsBox.innerHTML = '<tr><td colspan="6" class="text-center text-muted">No property or money on record.</td></tr>';
            return;
        }
        let html = '';
        list.forEach(b => {
            const hasVal = (b.monetary_value !== null && b.monetary_value !== '' && !isNaN(b.monetary_value));
            const val = hasVal ? ('KSh ' + Number(b.monetary_value).toLocaleString(undefined, {minimumFractionDigits: 2})) : '&mdash;';
            const badge = (b.type === 'cash') ? 'success' : 'secondary';
            html += '<tr>'
                +  '<td class="text-center"><input type="checkbox" class="form-check-input" name="returned_belongings[]" value="' + b.id + '" ' + (b.returned ? 'checked' : '') + '></td>'
                +  '<td><span class="badge bg-' + badge + '">' + esc(b.type) + '</span></td>'
                +  '<td>' + esc(b.description) + '</td>'
                +  '<td>' + esc(b.quantity) + '</td>'
                +  '<td>' + val + '</td>'
                +  '<td>' + esc(b.notes || '') + '</td>'
                +  '</tr>';
        });
        belongingsBox.innerHTML = html;
    }

    function load(id) {
        if (!id) { renderChildren([]); renderBelongings([]); return; }
        childrenBox.innerHTML = '<p class="text-muted mb-0">Loading&hellip;</p>';
        belongingsBox.innerHTML = '<tr><td colspan="6" class="text-center text-muted">Loading&hellip;</td></tr>';
        fetch(urlTpl.replace('__ID__', id), {headers: {'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json'}})
            .then(r => r.json())
            .then(d => { renderChildren(d.children); renderBelongings(d.belongings); })
            .catch(() => {
                childrenBox.innerHTML = '';
                belongingsBox.innerHTML = '<tr><td colspan="6" class="text-center text-danger">Failed to load records.</td></tr>';
            });
    }

    select.addEventListener('change', e => load(e.target.value));
    if (select.value) { load(select.value); }   // edit page: prisoner already selected
})();
</script>

@endpush