@extends('layouts.app')

@section('content')
<div class="container-fluid px-4 py-6">
    <div class="max-w-4xl mx-auto">
        <!-- Header -->
        <div class="d-flex align-items-center mb-4">
            <a href="{{ route('deployments.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Back to Deployments
            </a>
        </div>

        <!-- Form Card -->
        <div class="card shadow-sm">
            <div class="card-header bg-white py-3">
                <h4 class="mb-0">Edit Deployment</h4>
            </div>
            <div class="card-body p-4">
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form action="{{ route('deployments.update', $deployment) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <!-- Select NDRT Officer -->
                    <div class="mb-4">
                        <label for="ndrt_officer_id" class="form-label fw-semibold">Select NDRT Officer <span class="text-danger">*</span></label>
                        <select class="form-select" id="ndrt_officer_id" name="ndrt_officer_id" required>
                            <option value="">-- Select Officer --</option>
                            @forelse($officers as $officer)
                                <option value="{{ $officer->id }}" {{ old('ndrt_officer_id', $deployment->ndrt_officer_id) == $officer->id ? 'selected' : '' }}>
                                    {{ $officer->name ?? ($officer->first_name . ' ' . $officer->surname) }}
                                </option>
                            @empty
                                <option value="">No officers available</option>
                            @endforelse
                        </select>
                    </div>

                    <!-- Deployment Period -->
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <label for="start_date" class="form-label fw-semibold">Start Date <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" id="start_date" name="start_date" value="{{ old('start_date', optional($deployment->start_date)->format('Y-m-d')) }}" required>
                        </div>
                        <div class="col-md-4">
                            <label for="end_date" class="form-label fw-semibold">End Date <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" id="end_date" name="end_date" value="{{ old('end_date', optional($deployment->end_date)->format('Y-m-d')) }}" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Duration</label>
                            <div class="form-control bg-light" id="duration-display">0 days</div>
                        </div>
                    </div>

                    <!-- Mentor -->
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <label class="form-label fw-semibold d-block">Deployed with Mentor? <span class="text-danger">*</span></label>
                            <div class="d-flex gap-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="has_mentor" id="has_mentor_yes" value="1" {{ old('has_mentor', (int)$deployment->has_mentor) == 1 ? 'checked' : '' }}>
                                    <label class="form-check-label" for="has_mentor_yes">Yes</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="has_mentor" id="has_mentor_no" value="0" {{ old('has_mentor', (int)$deployment->has_mentor) == 0 ? 'checked' : '' }}>
                                    <label class="form-check-label" for="has_mentor_no">No</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8" id="mentor_name_wrapper" style="display: none;">
                            <label for="mentor_name" class="form-label fw-semibold">Mentor Name</label>
                            <input type="text" class="form-control" id="mentor_name" name="mentor_name" value="{{ old('mentor_name', $deployment->mentor_name) }}" placeholder="Enter mentor's name">
                        </div>
                    </div>

                    <!-- Extension -->
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <label class="form-label fw-semibold d-block">Mission Extended?</label>
                            <div class="d-flex gap-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="is_extended" id="is_extended_yes" value="1" {{ old('is_extended', (int)$deployment->is_extended) == 1 ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_extended_yes">Yes</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="is_extended" id="is_extended_no" value="0" {{ old('is_extended', (int)$deployment->is_extended) == 0 ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_extended_no">No</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4" id="new_completion_date_wrapper" style="display: none;">
                            <label for="new_completion_date" class="form-label fw-semibold">New Completion Date</label>
                            <input type="date" class="form-control" id="new_completion_date" name="new_completion_date" value="{{ old('new_completion_date', optional($deployment->new_completion_date)->format('Y-m-d')) }}">
                        </div>
                        <div class="col-md-4" id="extension_reason_wrapper" style="display: none;">
                            <label for="extension_reason" class="form-label fw-semibold">Reason for Extension</label>
                            <input type="text" class="form-control" id="extension_reason" name="extension_reason" value="{{ old('extension_reason', $deployment->extension_reason) }}" placeholder="Provide reason">
                        </div>
                    </div>

                    <!-- Status and Mission end date -->
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <label for="status" class="form-label fw-semibold">Status <span class="text-danger">*</span></label>
                            <select id="status" name="status" class="form-select" required>
                                @php $statusVal = old('status', $deployment->status ?? 'active'); @endphp
                                <option value="active" {{ $statusVal === 'active' ? 'selected' : '' }}>Active</option>
                                <option value="completed" {{ $statusVal === 'completed' ? 'selected' : '' }}>Completed</option>
                            </select>
                        </div>
                        <div class="col-md-4" id="mission_end_date_wrapper" style="display: none;">
                            <label for="mission_end_date" class="form-label fw-semibold">Actual Completion Date</label>
                            <input type="date" class="form-control" id="mission_end_date" name="mission_end_date" value="{{ old('mission_end_date', optional($deployment->mission_end_date)->format('Y-m-d')) }}">
                        </div>
                    </div>

                    <!-- Mission Location -->
                    <div class="mb-4">
                        <label for="mission_location" class="form-label fw-semibold">Mission Location <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="mission_location" name="mission_location" value="{{ old('mission_location', $deployment->mission_location) }}" required placeholder="Enter mission location">
                    </div>

                    <!-- Mission Description -->
                    <div class="mb-4">
                        <label for="mission_description" class="form-label fw-semibold">Brief Description of the Mission <span class="text-danger">*</span></label>
                        <textarea class="form-control" id="mission_description" name="mission_description" rows="4" required placeholder="Describe the mission objectives and scope...">{{ old('mission_description', $deployment->mission_description) }}</textarea>
                    </div>

                    <!-- Reporting To -->
                    <div class="mb-4">
                        <label for="reporting_to" class="form-label fw-semibold">Reporting To</label>
                        <input type="text" class="form-control" id="reporting_to" name="reporting_to" value="{{ old('reporting_to', $deployment->reporting_to) }}" placeholder="Name or role being reported to">
                    </div>

                    <!-- Equipment Log -->
                    <div class="mb-4">
                        <label class="form-label fw-semibold d-block">Equipment Log</label>
                        <p class="text-muted small mb-2">List items issued (e.g., Laptop, Office Phone, Others)</p>
                        <div id="equipment_list">
                            @php
                                $equipment = old('equipment_log', is_array($deployment->equipment_log) ? $deployment->equipment_log : []);
                                if (empty($equipment)) { $equipment = ['']; }
                            @endphp
                            @foreach($equipment as $idx => $item)
                                <div class="d-flex gap-2 mb-2 equipment-item">
                                    <input type="text" class="form-control" name="equipment_log[]" value="{{ $item }}" placeholder="Equipment item">
                                    <button type="button" class="btn btn-outline-danger remove-equipment" aria-label="Remove"><i class="bi bi-dash"></i></button>
                                </div>
                            @endforeach
                        </div>
                        <button type="button" class="btn btn-outline-primary btn-sm" id="add_equipment">
                            <i class="bi bi-plus-lg"></i> Add Equipment
                        </button>
                    </div>

                    <!-- Replace Report (optional) -->
                    <div class="mb-4">
                        <label for="report_path" class="form-label fw-semibold">Replace Deployment Report (optional)</label>
                        <input type="file" class="form-control" id="report_path" name="report_file" accept=".pdf,.doc,.docx">
                        <small class="text-muted">PDF or DOC up to 10MB</small>
                        @if($deployment->report_path)
                            <div class="mt-2">
                                <a href="{{ Storage::url($deployment->report_path) }}" target="_blank" class="small">View current report</a>
                            </div>
                        @endif
                    </div>

                    <!-- Submit Buttons -->
                    <div class="d-flex gap-2 pt-3">
                        <button type="submit" class="btn btn-success px-4">
                            <i class="fas fa-save"></i> Update Deployment
                        </button>
                        <a href="{{ route('deployments.show', $deployment) }}" class="btn btn-outline-secondary px-4">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    function calculateDuration() {
        const startDate = document.getElementById('start_date').value;
        const endDate = document.getElementById('end_date').value;
        if (startDate && endDate) {
            const start = new Date(startDate);
            const end = new Date(endDate);
            const diffTime = Math.abs(end - start);
            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
            document.getElementById('duration-display').textContent = diffDays + ' day' + (diffDays !== 1 ? 's' : '');
        }
    }

    function toggleMentor() {
        const hasMentor = document.querySelector('input[name="has_mentor"]:checked')?.value === '1';
        document.getElementById('mentor_name_wrapper').style.display = hasMentor ? '' : 'none';
    }

    function toggleExtension() {
        const isExtended = document.querySelector('input[name="is_extended"]:checked')?.value === '1';
        document.getElementById('new_completion_date_wrapper').style.display = isExtended ? '' : 'none';
        document.getElementById('extension_reason_wrapper').style.display = isExtended ? '' : 'none';
    }

    function toggleMissionEndByStatus() {
        const status = document.getElementById('status').value;
        document.getElementById('mission_end_date_wrapper').style.display = status === 'completed' ? '' : 'none';
    }

    document.getElementById('start_date').addEventListener('change', calculateDuration);
    document.getElementById('end_date').addEventListener('change', calculateDuration);
    document.querySelectorAll('input[name="has_mentor"]').forEach(r => r.addEventListener('change', toggleMentor));
    document.querySelectorAll('input[name="is_extended"]').forEach(r => r.addEventListener('change', toggleExtension));
    document.getElementById('status').addEventListener('change', toggleMissionEndByStatus);

    // Equipment add/remove
    document.getElementById('add_equipment').addEventListener('click', function () {
        const container = document.getElementById('equipment_list');
        const row = document.createElement('div');
        row.className = 'd-flex gap-2 mb-2 equipment-item';
        row.innerHTML = `
            <input type="text" class="form-control" name="equipment_log[]" placeholder="Equipment item">
            <button type="button" class="btn btn-outline-danger remove-equipment" aria-label="Remove"><i class="bi bi-dash"></i></button>
        `;
        container.appendChild(row);
    });

    document.getElementById('equipment_list').addEventListener('click', function (e) {
        if (e.target.closest('.remove-equipment')) {
            const item = e.target.closest('.equipment-item');
            if (item && document.querySelectorAll('#equipment_list .equipment-item').length > 1) {
                item.remove();
            }
        }
    });

    // Initialize
    calculateDuration();
    toggleMentor();
    toggleExtension();
    toggleMissionEndByStatus();
</script>
@endpush
@endsection