@csrf
@if(isset($mission)) @method('put') @endif

@php
    $selectedZones = isset($mission) ? $mission->missionZones->keyBy('zone_id') : collect();
    $selectedOfficerIds = isset($mission) ? $mission->officers->where('pivot.role_in_mission', 'officer')->pluck('id')->all() : [];
    $selectedSailorIds = isset($mission) ? $mission->officers->where('pivot.role_in_mission', 'sailor')->pluck('id')->all() : [];
@endphp

<div class="row g-3 mb-3">
    <div class="col-md-6">
        <label class="form-label small text-navy-300">Mission Name</label>
        <input type="text" name="name" value="{{ old('name', $mission->name ?? '') }}" class="form-control @error('name') is-invalid @enderror" required>
        @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-3">
        <label class="form-label small text-navy-300">Fleet</label>
        <select name="fleet_id" class="form-select @error('fleet_id') is-invalid @enderror" required>
            <option value="">— Select —</option>
            @foreach ($fleets as $fleet)
                <option value="{{ $fleet->id }}" @selected(old('fleet_id', $mission->fleet_id ?? '') == $fleet->id)>{{ $fleet->name }} ({{ $fleet->fleet_number }})</option>
            @endforeach
        </select>
        @error('fleet_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-3">
        <label class="form-label small text-navy-300">Commander</label>
        <select name="commander_id" class="form-select">
            <option value="">— Select —</option>
            @foreach ($commanders as $c)
                <option value="{{ $c->id }}" @selected(old('commander_id', $mission->commander_id ?? '') == $c->id)>{{ $c->name }}</option>
            @endforeach
        </select>
    </div>

    <div class="col-md-3">
        <label class="form-label small text-navy-300">Start Date</label>
        <input type="date" name="start_date" value="{{ old('start_date', isset($mission) ? $mission->start_date->format('Y-m-d') : '') }}" class="form-control @error('start_date') is-invalid @enderror" required>
        @error('start_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-3">
        <label class="form-label small text-navy-300">Expected End Date</label>
        <input type="date" name="expected_end_date" value="{{ old('expected_end_date', isset($mission) ? $mission->expected_end_date->format('Y-m-d') : '') }}" class="form-control @error('expected_end_date') is-invalid @enderror" required>
        @error('expected_end_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-6">
        <label class="form-label small text-navy-300">Notes</label>
        <input type="text" name="notes" value="{{ old('notes', $mission->notes ?? '') }}" class="form-control">
    </div>

    <div class="col-md-6">
        <label class="form-label small text-navy-300">Assigned Officers</label>
        <select name="officer_ids[]" class="form-select" multiple size="5">
            @foreach ($officers as $officer)
                <option value="{{ $officer->id }}" @selected(in_array($officer->id, old('officer_ids', $selectedOfficerIds)))>{{ $officer->name }}</option>
            @endforeach
        </select>
    </div>
    <div class="col-md-6">
        <label class="form-label small text-navy-300">Assigned Sailors</label>
        <select name="sailor_ids[]" class="form-select" multiple size="5">
            @foreach ($sailors as $sailor)
                <option value="{{ $sailor->id }}" @selected(in_array($sailor->id, old('sailor_ids', $selectedSailorIds)))>{{ $sailor->name }}</option>
            @endforeach
        </select>
    </div>
</div>

<div class="row g-3">
    <div class="col-lg-6">
        <div class="panel p-3">
            <div class="fw-semibold text-heading small mb-2"><i class="bi bi-pentagon"></i> Patrol Zones &amp; Sequence</div>
            <div class="table-responsive" style="max-height:520px; overflow-y:auto;">
                <table class="table table-sm align-middle mb-0">
                    <thead><tr><th></th><th>#</th><th>Zone</th><th>Arrival</th><th>Completion</th><th>Risk</th></tr></thead>
                    <tbody>
                    @foreach ($zones as $zone)
                        @php $mz = $selectedZones->get($zone->id); @endphp
                        <tr>
                            <td>
                                <input class="form-check-input zone-row-toggle" type="checkbox" data-zone-checkbox value="{{ $zone->id }}"
                                       {{ $mz ? 'checked' : '' }}>
                            </td>
                            <td style="width:60px;">
                                <input type="number" class="form-control form-control-sm zone-field" name="zones[{{ $zone->id }}][sequence]"
                                       value="{{ $mz->sequence ?? $loop->index }}" {{ $mz ? '' : 'disabled' }}>
                                <input type="hidden" class="zone-field" name="zones[{{ $zone->id }}][zone_id]" value="{{ $zone->id }}" {{ $mz ? '' : 'disabled' }}>
                            </td>
                            <td><span class="zone-color-swatch" style="background:{{ $zone->color }}"></span> {{ $zone->name }}</td>
                            <td style="width:170px;">
                                <input type="datetime-local" class="form-control form-control-sm zone-field" name="zones[{{ $zone->id }}][estimated_arrival]"
                                       value="{{ $mz?->estimated_arrival?->format('Y-m-d\TH:i') }}" {{ $mz ? '' : 'disabled' }}>
                            </td>
                            <td style="width:170px;">
                                <input type="datetime-local" class="form-control form-control-sm zone-field" name="zones[{{ $zone->id }}][estimated_completion]"
                                       value="{{ $mz?->estimated_completion?->format('Y-m-d\TH:i') }}" {{ $mz ? '' : 'disabled' }}>
                            </td>
                            <td style="width:110px;">
                                <select class="form-select form-select-sm zone-field" name="zones[{{ $zone->id }}][risk_level]" {{ $mz ? '' : 'disabled' }}>
                                    @foreach (['low','medium','high'] as $risk)
                                        <option value="{{ $risk }}" @selected(($mz->risk_level ?? 'low') === $risk)>{{ ucfirst($risk) }}</option>
                                    @endforeach
                                </select>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div id="missionZoneMap" class="gis-map-canvas" style="height:520px; border-radius: .55rem;"
             data-zones="{{ $zones->map(fn($z) => ['id'=>$z->id,'geojson'=>$z->geojson,'color'=>$z->color,'center_lat'=>$z->center_lat,'center_lng'=>$z->center_lng])->toJson() }}"></div>
    </div>
</div>

<div class="mt-3">
    <button type="submit" class="btn btn-primary"><i class="bi bi-check2"></i> {{ isset($mission) ? 'Update Mission' : 'Create Mission' }}</button>
    <a href="{{ route('admin.missions.index') }}" class="btn btn-outline-secondary">Cancel</a>
</div>

@push('scripts')
@vite(['resources/js/gis/mission-map.js'])
<script>
document.querySelectorAll('.zone-row-toggle').forEach((cb) => {
    cb.addEventListener('change', () => {
        const row = cb.closest('tr');
        row.querySelectorAll('.zone-field').forEach((f) => f.disabled = !cb.checked);
    });
});
</script>
@endpush