@extends('layouts.master')
@section('title') {{ $user->exists ? 'Edit User' : 'New User' }} @endsection
@section('content')
@component('components.breadcrumb')
@slot('li_1') <a href="{{ route('admin.users.index') }}">Users</a> @endslot
@slot('title') {{ $user->exists ? 'Edit User' : 'New User' }} @endslot
@endcomponent

@if($errors->any())
<div class="alert alert-danger"><ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>
@endif

<form method="POST" action="{{ $user->exists ? route('admin.users.update', $user) : route('admin.users.store') }}">
    @csrf
    @if($user->exists) @method('PUT') @endif
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header"><h5 class="card-title mb-0">Account</h5></div>
                <div class="card-body">
                    <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" value="{{ old('name', $user->name) }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Email <span class="text-danger">*</span></label>
                            <input type="email" name="email" class="form-control" value="{{ old('email', $user->email) }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Phone</label>
                            <input type="text" name="phone" class="form-control" value="{{ old('phone', $user->phone) }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Role <span class="text-danger">*</span></label>
                            <select name="role" id="role-select" class="form-select" required>
                                @foreach(\App\Models\User::ROLES as $r)
                                <option value="{{ $r }}" @selected(old('role', $user->role) === $r)>{{ \App\Models\User::ROLE_LABELS[$r] }}</option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Location fields, shown based on role --}}
                        <div class="col-md-6 role-field" data-roles="station">
                            <label class="form-label">Station</label>
                            <select name="station_id" class="form-select">
                                <option value="">Select station…</option>
                                @foreach($stations as $st)
                                <option value="{{ $st->id }}" @selected(old('station_id', $user->station_id) == $st->id)>{{ $st->name }} ({{ $st->area->code }})</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 role-field" data-roles="station,area">
                            <label class="form-label">Area</label>
                            <select name="area_id" class="form-select">
                                <option value="">Select area…</option>
                                @foreach($areas as $a)
                                <option value="{{ $a->id }}" @selected(old('area_id', $user->area_id) == $a->id)>{{ $a->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 role-field" data-roles="pal">
                            <label class="form-label">PAL Office</label>
                            <select name="pal_office_id" class="form-select">
                                <option value="">Select PAL office…</option>
                                @foreach($palOffices as $o)
                                <option value="{{ $o->id }}" @selected(old('pal_office_id', $user->pal_office_id) == $o->id)>{{ $o->name }} ({{ $o->code }})</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 role-field" data-roles="supplier">
                            <label class="form-label">Supplier</label>
                            <select name="supplier_id" class="form-select">
                                <option value="">Select supplier…</option>
                                @foreach($suppliers as $s)
                                <option value="{{ $s->id }}" @selected(old('supplier_id', $user->supplier_id) == $s->id)>{{ $s->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        {{-- JCF posting — where this person falls in the formation (internal staff only) --}}
                        <div class="col-12 role-field" data-roles="admin,station,area,pal,procurement,budget_finance">
                            <hr class="mb-2">
                            <h6 class="text-muted mb-0">JCF Posting</h6>
                            <small class="text-muted">Where this person falls in the formation, and the procurement role they carry.</small>
                        </div>
                        <div class="col-md-6 role-field" data-roles="admin,station,area,pal,procurement,budget_finance">
                            <label class="form-label">Formation (Station)</label>
                            <select name="formation_id" id="user-formation-select" class="form-select">
                                <option value="">Select station…</option>
                                @foreach($formations as $f)
                                <option value="{{ $f->id }}" @selected(old('formation_id', $user->formation_id) == $f->id)>{{ $f->picker_label }}</option>
                                @endforeach
                            </select>
                            <small class="text-muted">Portfolio › Area › Division › Station. Manage the tree in <a href="{{ route('admin.formations.index') }}" target="_blank">Formations</a>.</small>
                        </div>
                        <div class="col-md-6 role-field" data-roles="admin,station,area,pal,procurement,budget_finance">
                            <label class="form-label">Unit</label>
                            <input type="text" name="unit" class="form-control" value="{{ old('unit', $user->unit) }}" placeholder="e.g. General, Sentry">
                        </div>
                        <div class="col-md-6 role-field" data-roles="admin,station,area,pal,procurement,budget_finance">
                            <label class="form-label">Procurement Role (userrole)</label>
                            <select name="formation_role" class="form-select">
                                <option value="">—</option>
                                @foreach(\App\Models\User::FORMATION_ROLES as $key => $label)
                                <option value="{{ $key }}" @selected(old('formation_role', $user->formation_role) === $key)>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 role-field" data-roles="admin,station,area,pal,procurement,budget_finance">
                            <label class="form-label">Personnel Status</label>
                            <select name="personnel_status" class="form-select">
                                <option value="">—</option>
                                @foreach(\App\Models\User::PERSONNEL_STATUSES as $key => $label)
                                <option value="{{ $key }}" @selected(old('personnel_status', $user->personnel_status) === $key)>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 role-field" data-roles="area,procurement,budget_finance">
                            <label class="form-label">Approval Limit (JMD)</label>
                            <input type="number" step="0.01" min="0" name="approval_limit" class="form-control" value="{{ old('approval_limit', $user->approval_limit) }}" placeholder="blank = unlimited">
                            <small class="text-muted">Max requisition/PO value this officer may approve.</small>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Password {{ $user->exists ? '(leave blank to keep)' : '' }} @if(!$user->exists)<span class="text-danger">*</span>@endif</label>
                            <input type="password" name="password" class="form-control" autocomplete="new-password" {{ $user->exists ? '' : 'required' }}>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Confirm Password</label>
                            <input type="password" name="password_confirmation" class="form-control" autocomplete="new-password">
                        </div>

                        <div class="col-12">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="is_active" value="1" id="is_active" @checked(old('is_active', $user->is_active ?? true))>
                                <label class="form-check-label" for="is_active">Active</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer d-flex gap-2">
                    <button type="submit" class="btn btn-primary">{{ $user->exists ? 'Save Changes' : 'Create User' }}</button>
                    <a href="{{ route('admin.users.index') }}" class="btn btn-light">Cancel</a>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@section('script')
<script>
(function () {
    const roleSelect = document.getElementById('role-select');
    function sync() {
        const role = roleSelect.value;
        document.querySelectorAll('.role-field').forEach(function (field) {
            const roles = field.dataset.roles.split(',');
            field.style.display = roles.includes(role) ? '' : 'none';
        });
    }
    roleSelect.addEventListener('change', sync);
    sync();
})();
</script>
<link href="{{ URL::asset('build/libs/choices.js/public/assets/styles/choices.min.css') }}" rel="stylesheet" type="text/css">
<script src="{{ URL::asset('build/libs/choices.js/public/assets/scripts/choices.min.js') }}"></script>
<script>
(function () {
    var el = document.getElementById('user-formation-select');
    if (el && window.Choices) {
        try { new Choices(el, { searchEnabled: true, shouldSort: false, itemSelectText: '', searchResultLimit: 20, placeholder: true, allowHTML: true }); } catch (e) {}
    }
})();
</script>
@endsection