@extends('layouts.app')

@section('content')
<div class="container mt-5">
    <div class="card shadow-lg border-0 rounded-4">
        <div class="card-header bg-success text-white py-3 rounded-top-4 d-flex align-items-center justify-content-between">
            <h4 class="mb-0"><i class="bi bi-pencil-square me-2"></i>Edit Assistant Trainer Assignment</h4>
            <a href="{{ route('assistant-trainers.index') }}" class="btn btn-light btn-sm fw-semibold">
                <i class="bi bi-arrow-left-circle me-1"></i> Back
            </a>
        </div>
        <div class="card-body p-4">
            @if($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach($errors->all() as $err)
                            <li>{{ $err }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('assistant-trainers.update', $assignment->id) }}" method="POST" id="assistantTrainerEditForm">
                @csrf
                @method('PUT')

                <!-- =========================
                     LOCATION DETAILS
                ========================== -->
                <h5 class="mb-3 text-success border-bottom pb-2">📍 Training Location</h5>
                <div class="row g-3">
                    <div class="col-md-3">
                        <label for="county_id" class="form-label fw-bold">County</label>
                        <select name="county_id" id="county_id" class="form-select" required>
                            <option value="">Select County</option>
                            @foreach($counties as $county)
                                <option value="{{ $county->id }}" {{ $assignment->county_id == $county->id ? 'selected' : '' }}>
                                    {{ $county->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label for="sub_county_id" class="form-label fw-bold">Sub-County</label>
                        <select name="sub_county_id" id="sub_county_id" class="form-select" required>
                            <option value="">Select Sub-County</option>
                            @foreach($subCounties as $sc)
                                <option value="{{ $sc->id }}" {{ $assignment->sub_county_id == $sc->id ? 'selected' : '' }}>
                                    {{ $sc->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label for="center_id" class="form-label fw-bold">Training Center</label>
                        <select name="center_id" id="center_id" class="form-select" required>
                            <option value="">Select Center</option>
                            @foreach($centers as $c)
                                <option value="{{ $c->id }}" {{ $assignment->center_id == $c->id ? 'selected' : '' }}>
                                    {{ $c->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label for="class_room_id" class="form-label fw-bold">Class Number</label>
                        <select name="class_room_id" id="class_room_id" class="form-select" required>
                            <option value="">Select Class</option>
                            @foreach($classes as $cls)
                                <option value="{{ $cls->id }}" {{ $assignment->class_room_id == $cls->id ? 'selected' : '' }}>
                                    Class {{ $cls->class_number }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <!-- =========================
                     ASSISTANT TRAINER INFORMATION
                ========================== -->
                <h5 class="mt-4 mb-3 text-success border-bottom pb-2">👨‍💼 Assistant Trainer Information</h5>
                <div class="row g-3">
                    <div class="col-md-3">
                        <label for="assistant_trainer_id" class="form-label fw-bold">Assistant Trainer</label>
                        <select name="assistant_trainer_id" id="assistant_trainer_id" class="form-select" required>
                            <option value="">Select Assistant Trainer</option>
                            @foreach($assistantTrainers as $trainer)
                                <option value="{{ $trainer->id }}" {{ $assignment->assistant_trainer_id == $trainer->id ? 'selected' : '' }}>
                                    {{ $trainer->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label for="assistant_name" class="form-label fw-bold">Full Name</label>
                        <input type="text" name="assistant_name" id="assistant_name" class="form-control" required value="{{ old('assistant_name', $assignment->assistant_name) }}">
                    </div>

                    <div class="col-md-3">
                        <label for="assistant_phone" class="form-label fw-bold">Phone Number</label>
                        <input type="text" name="assistant_phone" id="assistant_phone" class="form-control" required value="{{ old('assistant_phone', $assignment->assistant_phone) }}">
                    </div>

                    <div class="col-md-3">
                        <label for="assistant_email" class="form-label fw-bold">Email Address</label>
                        <input type="email" name="assistant_email" id="assistant_email" class="form-control" required value="{{ old('assistant_email', $assignment->assistant_email) }}">
                    </div>
                </div>

                <!-- =========================
                     TRAINING DURATION
                ========================== -->
                <h5 class="mt-4 mb-3 text-success border-bottom pb-2">📅 Training Duration</h5>
                <div class="row g-3">
                    <div class="col-md-4">
                        <label for="start_date" class="form-label fw-bold">Start Date</label>
                        <input type="date" name="start_date" id="start_date" class="form-control" required
                               value="{{ old('start_date', \Carbon\Carbon::parse($assignment->start_date)->format('Y-m-d')) }}">
                    </div>

                    <div class="col-md-4">
                        <label for="end_date" class="form-label fw-bold">End Date</label>
                        <input type="date" name="end_date" id="end_date" class="form-control" required
                               value="{{ old('end_date', \Carbon\Carbon::parse($assignment->end_date)->format('Y-m-d')) }}">
                    </div>

                    <div class="col-md-4">
                        <label for="number_of_days" class="form-label fw-bold">Number of Days</label>
                        <input type="number" name="number_of_days" id="number_of_days" class="form-control bg-light" readonly value="{{ old('number_of_days', $assignment->number_of_days) }}">
                    </div>
                </div>

                <!-- =========================
                     PAYMENT DETAILS
                ========================== -->
                <h5 class="mt-4 mb-3 text-success border-bottom pb-2">💰 Payment Details</h5>
                <div class="row g-3">
                    <div class="col-md-4">
                        <label for="payment_rate_per_day" class="form-label fw-bold">Rate per Day (KSh)</label>
                        <input type="number" step="0.01" name="payment_rate_per_day" id="payment_rate_per_day" class="form-control" required value="{{ old('payment_rate_per_day', $assignment->payment_rate_per_day) }}">
                    </div>

                    <div class="col-md-4">
                        <label for="amount_paid" class="form-label fw-bold">Amount Paid (KSh)</label>
                        <input type="number" step="0.01" name="amount_paid" id="amount_paid" class="form-control" value="{{ old('amount_paid', $assignment->amount_paid) }}">
                    </div>

                    <div class="col-md-4">
                        <label for="total_amount" class="form-label fw-bold">Total Amount (KSh)</label>
                        <input type="number" step="0.01" id="total_amount" class="form-control bg-light" readonly value="{{ old('total_amount', $assignment->total_amount) }}">
                    </div>
                </div>

                <div class="mb-3">
                    <label for="amount_due" class="form-label fw-bold">Amount Due (KSh)</label>
                    <input type="number" step="0.01" id="amount_due" class="form-control bg-light" readonly value="{{ old('amount_due', $assignment->amount_due) }}">
                </div>

                <div class="d-flex justify-content-end mt-4">
                    <button type="submit" class="btn btn-success px-4 py-2 fw-semibold">
                        <i class="bi bi-check-circle me-1"></i> Update Assignment
                    </button>
                    <a href="{{ route('assistant-trainers.index') }}" class="btn btn-secondary ms-2">Cancel</a>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- =========================
     SCRIPTS
========================== -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {

    // --- Load Subcounties ---
    function loadSubCounties(countyId, selectedSubCounty = null) {
        if (!countyId) {
            $('#sub_county_id').html('<option value="">Select Sub-County</option>');
            $('#center_id').html('<option value="">Select Center</option>');
            $('#class_room_id').html('<option value="">Select Class</option>');
            return;
        }
        $.get('/assistant-trainers/get-subcounties/' + countyId, function (data) {
            let options = '<option value="">Select Sub-County</option>';
            data.forEach(sc => options += `<option value="${sc.id}" ${sc.id == selectedSubCounty ? 'selected' : ''}>${sc.name}</option>`);
            $('#sub_county_id').html(options);
            $('#center_id').html('<option value="">Select Center</option>');
            $('#class_room_id').html('<option value="">Select Class</option>');
        });
    }

    // --- Load Centers ---
    function loadCenters(subCountyId, selectedCenter = null) {
        if (!subCountyId) {
            $('#center_id').html('<option value="">Select Center</option>');
            $('#class_room_id').html('<option value="">Select Class</option>');
            return;
        }
        $.get('/assistant-trainers/get-centers/' + subCountyId, function (data) {
            let options = '<option value="">Select Center</option>';
            data.forEach(c => options += `<option value="${c.id}" ${c.id == selectedCenter ? 'selected' : ''}>${c.name}</option>`);
            $('#center_id').html(options);
            $('#class_room_id').html('<option value="">Select Class</option>');
        });
    }

    // --- Load Classes ---
    function loadClasses(centerId, selectedClass = null) {
        if (!centerId) {
            $('#class_room_id').html('<option value="">Select Class</option>');
            return;
        }
        $.get('/assistant-trainers/get-classes/' + centerId, function (data) {
            let options = '<option value="">Select Class</option>';
            data.forEach(cls => options += `<option value="${cls.id}" ${cls.id == selectedClass ? 'selected' : ''}>Class ${cls.class_number}</option>`);
            $('#class_room_id').html(options);
        });
    }

    // --- Event Listeners ---
    $('#county_id').on('change', function () { loadSubCounties($(this).val()); });
    $('#sub_county_id').on('change', function () { loadCenters($(this).val()); });
    $('#center_id').on('change', function () { loadClasses($(this).val()); });

    // --- Calculate Number of Days & Totals ---
    function calculateNumberOfDays() {
        let start = new Date($('#start_date').val());
        let end = new Date($('#end_date').val());
        if (!isNaN(start) && !isNaN(end) && end >= start) {
            let diffDays = Math.floor((end - start) / (1000 * 60 * 60 * 24)) + 1;
            $('#number_of_days').val(diffDays);
        } else {
            $('#number_of_days').val('');
        }
        calculateTotals();
    }

    function calculateTotals() {
        let days = parseFloat($('#number_of_days').val()) || 0;
        let rate = parseFloat($('#payment_rate_per_day').val()) || 0;
        let paid = parseFloat($('#amount_paid').val()) || 0;
        let total = days * rate;
        let due = total - paid;
        $('#total_amount').val(total.toFixed(2));
        $('#amount_due').val(due.toFixed(2));
    }

    $('#start_date, #end_date').on('change', calculateNumberOfDays);
    $('#payment_rate_per_day, #amount_paid').on('input', calculateTotals);

    // --- Initial Calculation ---
    calculateNumberOfDays();
});
</script>

<!-- =========================
     CUSTOM STYLES
========================== -->
<style>
body { background: linear-gradient(135deg, #edf8ef, #f5fff8); }
.card-header h4 { font-weight: 700; }
h5 { font-weight: 600; }
label { color: #155724; }
.form-select, .form-control { border-radius: 8px; box-shadow: none; }
.form-select:focus, .form-control:focus { border-color: #198754; box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.15); }
.btn-success { border-radius: 8px; }
</style>
@endsection