@extends('layouts.app')

@section('content')
<div class="container mt-5">
    <div class="card shadow-lg border-0 rounded-4">
        <!-- Header -->
        <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-person-plus-fill me-2"></i> Assign Trainer
            </h4>
            <a href="{{ route('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(session('success'))
                <div class="alert alert-success shadow-sm">
                    <i class="bi bi-check-circle-fill me-2"></i>{{ session('success') }}
                </div>
            @endif

            <form action="{{ route('trainers.store') }}" method="POST" id="trainerForm">
                @csrf

                <!-- =========================
                     LOCATION DETAILS
                ========================== -->
                <h5 class="mb-3 text-success border-bottom pb-2">
                    📍 Training Location
                </h5>
                <div class="row g-3">
                    <!-- County -->
                    <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 }}">{{ $county->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Subcounty -->
                    <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>
                        </select>
                    </div>

                    <!-- Center -->
                    <div class="col-md-3">
                        <label for="center_id" class="form-label fw-bold">Center</label>
                        <select name="center_id" id="center_id" class="form-select" required>
                            <option value="">Select Center</option>
                        </select>
                    </div>

                    <!-- Class -->
                    <div class="col-md-3">
                        <label for="class_room_id" class="form-label fw-bold">Class</label>
                        <select name="class_room_id" id="class_room_id" class="form-select" required>
                            <option value="">Select Class</option>
                        </select>
                    </div>
                </div>

                <!-- =========================
                     TRAINER INFORMATION
                ========================== -->
                <h5 class="mt-5 mb-3 text-success border-bottom pb-2">
                    👨‍🏫 Trainer Information
                </h5>
                <div class="row g-3">
                <div class="col-md-3">
                    <label for="trainer_id" class="form-label fw-bold"> Senior Trainer</label>
                    <select name="trainer_id" id="trainer_id" class="form-select" required>
                        <option value="">Select Trainer</option>
                        @foreach($trainers as $trainer)
                            <option value="{{ $trainer->id }}">
                                {{ $trainer->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                    <div class="col-md-3">
                        <label for="trainer_name" class="form-label fw-bold">Full Name</label>
                        <input type="text" name="trainer_name" id="trainer_name" class="form-control" required>
                    </div>
                    <div class="col-md-3">
                        <label for="trainer_phone" class="form-label fw-bold">Phone Number</label>
                        <input type="text" name="trainer_phone" id="trainer_phone" class="form-control" required>
                    </div>
                    <div class="col-md-3">
                        <label for="trainer_email" class="form-label fw-bold">Email</label>
                        <input type="email" name="trainer_email" id="trainer_email" class="form-control" >
                    </div>
                </div>


                <!-- =========================
                     TRAINING DURATION
                ========================== -->
                <h5 class="mt-5 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>
                    </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>
                    </div>
                    <div class="col-md-4">
                        <label for="number_of_days" class="form-label fw-bold">Number of Days</label>
                        <input type="number" id="number_of_days" name="number_of_days" class="form-control bg-light" readonly>
                    </div>
                </div>

                <!-- =========================
                     PAYMENT DETAILS
                ========================== -->
                <h5 class="mt-5 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" id="payment_rate_per_day" name="payment_rate_per_day" class="form-control" required>
                    </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" id="amount_paid" name="amount_paid" class="form-control" value="0">
                    </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>
                    </div>
                </div>

                <div class="mt-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>
                </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-2"></i> Assign Trainer
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

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

    // --- Load Subcounties ---
    $('#county_id').on('change', function () {
        const countyId = $(this).val();
        $('#sub_county_id').html('<option value="">Loading...</option>');
        $('#center_id').html('<option value="">Select Center</option>');
        $('#class_room_id').html('<option value="">Select Class</option>');

        if (countyId) {
            $.get(`/admin/trainers/get-subcounties/${countyId}`, function (data) {
                let options = '<option value="">Select Sub-County</option>';
                data.forEach(sc => options += `<option value="${sc.id}">${sc.name}</option>`);
                $('#sub_county_id').html(options);
            });
        }
    });

    // --- Load Centers ---
    $('#sub_county_id').on('change', function () {
        const subCountyId = $(this).val();
        $('#center_id').html('<option value="">Loading...</option>');
        $('#class_room_id').html('<option value="">Select Class</option>');
        if (subCountyId) {
            $.get(`/admin/trainers/get-centers/${subCountyId}`, function (data) {
                let options = '<option value="">Select Center</option>';
                data.forEach(center => options += `<option value="${center.id}">${center.name}</option>`);
                $('#center_id').html(options);
            });
        }
    });

    // --- Load Classes ---
    $('#center_id').on('change', function () {
        const centerId = $(this).val();
        $('#class_room_id').html('<option value="">Loading...</option>');
        if (centerId) {
            $.get(`/admin/trainers/get-classes/${centerId}`, function (data) {
                let options = '<option value="">Select Class</option>';
                data.forEach(cls => options += `<option value="${cls.id}">Class ${cls.class_number}</option>`);
                $('#class_room_id').html(options);
            });
        }
    });

    // --- Date & Payment Calculations ---
    function calculateDays() {
        let start = new Date($('#start_date').val());
        let end = new Date($('#end_date').val());
        if (!isNaN(start) && !isNaN(end) && end >= start) {
            let diff = Math.floor((end - start) / (1000 * 60 * 60 * 24)) + 1;
            $('#number_of_days').val(diff);
        } 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;
        $('#total_amount').val(total.toFixed(2));
        $('#amount_due').val((total - paid).toFixed(2));
    }

    $('#start_date, #end_date').on('change', calculateDays);
    $('#payment_rate_per_day, #amount_paid').on('input', calculateTotals);
});
</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