@extends('layouts.app')

@section('title', 'Add Security Personnel')

@section('content')
<h2><i class="bi bi-shield-plus"></i> Add Security Personnel</h2>

<div class="card mt-4">
    <div class="card-body">
        <form method="POST" action="{{ route('security.store') }}" enctype="multipart/form-data">
            @csrf
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">Full Name *</label>
                    <input type="text" name="full_name" value="{{ old('full_name') }}" class="form-control @error('full_name') is-invalid @enderror" required>
                    @error('full_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-6">
                    <label class="form-label">Phone Number</label>
                    <input type="text" name="phone_number" value="{{ old('phone_number') }}" class="form-control @error('phone_number') is-invalid @enderror">
                    @error('phone_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-6">
                    <label class="form-label">Title</label>
                    <select name="title" class="form-select @error('title') is-invalid @enderror">
                        <option value="">Select Title</option>
                        @foreach($titles as $title)
                        <option value="{{ $title->name }}" {{ old('title') == $title->name ? 'selected' : '' }}>{{ $title->name }}</option>
                        @endforeach
                    </select>
                    @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    <small class="text-muted">Not listed? Add it under <a href="{{ route('titles.index') }}">Titles</a>.</small>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Branch</label>
                    <select name="branch_id" id="branch_id" class="form-select @error('branch_id') is-invalid @enderror">
                        <option value="">Select Branch</option>
                        @foreach($branches as $branch)
                        <option value="{{ $branch->id }}" {{ old('branch_id') == $branch->id ? 'selected' : '' }}>{{ $branch->name }}</option>
                        @endforeach
                    </select>
                    @error('branch_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-6">
                    <label class="form-label">Site</label>
                    <select name="site_id" id="site_id" class="form-select @error('site_id') is-invalid @enderror">
                        <option value="">Select Site</option>
                        @foreach($sites as $site)
                        <option value="{{ $site->id }}" data-branch="{{ $site->branch_id }}" {{ old('site_id') == $site->id ? 'selected' : '' }}>{{ $site->name }}</option>
                        @endforeach
                    </select>
                    @error('site_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    <small class="text-muted">Not listed? Add it under <a href="{{ route('zones.index') }}">Sites</a>.</small>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Region</label>
                    <select name="region" class="form-select @error('region') is-invalid @enderror">
                        <option value="">Select Region</option>
                        @foreach($regions as $region)
                        <option value="{{ $region->name }}" {{ old('region') == $region->name ? 'selected' : '' }}>{{ $region->name }}</option>
                        @endforeach
                    </select>
                    @error('region')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    <small class="text-muted">Not listed? Add it under <a href="{{ route('regions.index') }}">Regions</a>.</small>
                </div>

                <div class="card">
                    <div class="card-header report-header"><i class="bi bi-credit-card"></i> ID-Card Information</div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">National ID</label>
                                <input type="text" name="national_id" value="{{ old('national_id') }}" class="form-control @error('national_id') is-invalid @enderror">
                                @error('national_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">ID Card Number</label>
                                <input type="text" name="id_card_number" value="{{ old('id_card_number') }}" class="form-control @error('id_card_number') is-invalid @enderror">
                                @error('id_card_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">ID Card Issued Date</label>
                                <input type="date" name="id_card_issued_date" value="{{ old('id_card_issued_date') }}" class="form-control @error('id_card_issued_date') is-invalid @enderror">
                                @error('id_card_issued_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">ID Card Expiry Date</label>
                                <input type="date" name="id_card_expiry_date" value="{{ old('id_card_expiry_date') }}" class="form-control @error('id_card_expiry_date') is-invalid @enderror">
                                @error('id_card_expiry_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Staff Photo</label>
                    <input type="file" name="staff_photo" accept=".jpg,.jpeg,.png,.webp,.gif" class="form-control @error('staff_photo') is-invalid @enderror">
                    <small class="text-muted">jpg, jpeg, png, webp, gif — max 5 MB</small>
                    @error('staff_photo')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-4">
                    <label class="form-label">Weapon Name</label>
                    <select name="weapon_name" id="weapon_name" class="form-select @error('weapon_name') is-invalid @enderror">
                        <option value="">Select Weapon</option>
                        @foreach($weapons as $weapon)
                        <option value="{{ $weapon->weapon_name }}" data-model="{{ $weapon->weapon_model }}" {{ old('weapon_name') == $weapon->weapon_name ? 'selected' : '' }}>{{ $weapon->weapon_name }}</option>
                        @endforeach
                    </select>
                    @error('weapon_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    <small class="text-muted">Not listed? Add it under <a href="{{ route('weapons.index') }}">Weapons</a>.</small>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Assigned Weapon Model</label>
                    <input type="text" name="weapon_model" id="weapon_model" value="{{ old('weapon_model') }}" class="form-control @error('weapon_model') is-invalid @enderror" readonly>
                    @error('weapon_model')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-4">
                    <label class="form-label">Weapon Serial</label>
                    <input type="text" name="weapon_serial" value="{{ old('weapon_serial') }}" class="form-control @error('weapon_serial') is-invalid @enderror">
                    @error('weapon_serial')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-4">
                    <label class="form-label">Annual Leave Entitlement (days)</label>
                    <input type="number" name="annual_leave_entitlement" value="{{ old('annual_leave_entitlement', 30) }}" min="0" max="365" class="form-control @error('annual_leave_entitlement') is-invalid @enderror">
                    @error('annual_leave_entitlement')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-4">
                    <label class="form-label">Weapon Image</label>
                    <input type="file" name="weapon_image" accept=".jpg,.jpeg,.png,.webp,.gif" class="form-control @error('weapon_image') is-invalid @enderror">
                    <small class="text-muted">jpg, jpeg, png, webp, gif — max 5 MB</small>
                    @error('weapon_image')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>
            <div class="mt-4">
                <button type="submit" class="btn btn-yellow"><i class="bi bi-save"></i> Save</button>
                <a href="{{ route('security.index') }}" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.getElementById('weapon_name').addEventListener('change', function () {
        const model = this.options[this.selectedIndex]?.dataset.model || '';
        document.getElementById('weapon_model').value = model;
    });
    window.addEventListener('DOMContentLoaded', function () {
        const select = document.getElementById('weapon_name');
        if (select.value) {
            document.getElementById('weapon_model').value = select.options[select.selectedIndex]?.dataset.model || '';
        }
        filterSites();
        document.getElementById('branch_id').addEventListener('change', filterSites);
    });
    function filterSites() {
        const branchId = document.getElementById('branch_id').value;
        const siteSelect = document.getElementById('site_id');
        const selected = siteSelect.value;
        for (const option of siteSelect.options) {
            if (option.value === '') continue;
            option.disabled = branchId && option.dataset.branch !== branchId;
            option.hidden = branchId && option.dataset.branch !== branchId;
        }
        if (branchId && siteSelect.selectedOptions[0]?.dataset.branch !== branchId) {
            siteSelect.value = '';
        } else if (!branchId) {
            siteSelect.value = '';
        }
    }
</script>
@endpush