@extends('layouts.app')

@section('content')
<div class="container py-4">
    <h3 class="fw-bold text-success mb-4">
        <i class="bi bi-pencil-square me-2"></i> Edit Student Assignment
    </h3>

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

        {{-- Student Info --}}
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-success text-white">
                <i class="bi bi-person-fill me-1"></i> Student Info
            </div>
            <div class="card-body row g-3">
                <div class="col-md-4">
                    <label class="form-label text-success">Name</label>
                    <input type="text" class="form-control" value="{{ $assignment->student->name ?? 'N/A' }}" readonly>
                </div>
                <div class="col-md-4">
                    <label class="form-label text-success">National ID</label>
                    <input type="text" class="form-control" value="{{ $assignment->student->id_number ?? '—' }}" readonly>
                </div>
                <div class="col-md-4">
                    <label class="form-label text-success">County</label>
                    <input type="text" class="form-control" value="{{ $assignment->student->county ?? '—' }}" readonly>
                </div>
            </div>
        </div>

        {{-- Assignment Info --}}
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-success text-white">
                <i class="bi bi-journal-text me-1"></i> Assignment Details
            </div>
            <div class="card-body row g-3">
                <div class="col-md-6">
                    <label class="form-label text-success">Center</label>
                    <select name="center_id" class="form-select" required>
                        <option value="">Select Center</option>
                        @foreach($counties as $county)
                            <option value="{{ $county->id }}" 
                                {{ $assignment->center_id == $county->id ? 'selected' : '' }}>
                                {{ $county->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-6">
                    <label class="form-label text-success">Class</label>
                    <select name="class_room_id" class="form-select" required>
                        <option value="">Select Class</option>
                        @foreach(\App\Models\ClassRoom::all() as $class)
                            <option value="{{ $class->id }}" 
                                {{ $assignment->class_room_id == $class->id ? 'selected' : '' }}>
                                Class {{ $class->class_number }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-4">
                    <label class="form-label text-success">Start Date</label>
                    <input type="date" name="start_date" id="start_date" class="form-control"
                        value="{{ $assignment->start_date }}" required>
                </div>

                <div class="col-md-4">
                    <label class="form-label text-success">End Date</label>
                    <input type="date" name="end_date" id="end_date" class="form-control"
                        value="{{ $assignment->end_date }}" required>
                </div>

                <div class="col-md-4">
                    <label class="form-label text-success">Days</label>
                    <input type="number" name="number_of_days" id="number_of_days" 
                        class="form-control" value="{{ $assignment->number_of_days }}" readonly>
                </div>
            </div>
        </div>

        {{-- Payment Info --}}
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-success text-white">
                <i class="bi bi-cash-coin me-1"></i> Payment Details
            </div>
            <div class="card-body row g-3">
                <div class="col-md-3">
                    <label class="form-label text-success">Rate per Day</label>
                    <input type="number" name="payment_rate_per_day" id="payment_rate_per_day"
                        class="form-control" value="{{ $assignment->payment_rate_per_day }}" required>
                </div>
                <div class="col-md-3">
                    <label class="form-label text-success">Total Amount</label>
                    <input type="number" name="total_amount" id="total_amount" 
                        class="form-control" value="{{ $assignment->total_amount }}" readonly>
                </div>
                <div class="col-md-3">
                    <label class="form-label text-success">Amount Paid</label>
                    <input type="number" name="amount_paid" class="form-control" 
                        value="{{ $assignment->amount_paid ?? 0 }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label text-success">Amount Due</label>
                    <input type="number" name="amount_due" id="amount_due" 
                        class="form-control" value="{{ $assignment->amount_due ?? 0 }}" readonly>
                </div>
            </div>
        </div>

        {{-- Action Buttons --}}
        <div class="text-end">
            <button type="submit" class="btn btn-success px-4">
                <i class="bi bi-save me-1"></i> Save Changes
            </button>
            <a href="{{ route('assignments.index') }}" class="btn btn-outline-secondary px-4">
                <i class="bi bi-arrow-left"></i> Back
            </a>
        </div>
    </form>
</div>

{{-- Script to auto-calculate days, total, and due --}}
<script>
document.addEventListener('DOMContentLoaded', () => {
    const start = document.getElementById('start_date');
    const end = document.getElementById('end_date');
    const days = document.getElementById('number_of_days');
    const rate = document.getElementById('payment_rate_per_day');
    const total = document.getElementById('total_amount');
    const paid = document.querySelector('input[name="amount_paid"]');
    const due = document.getElementById('amount_due');

    function calculate() {
        if (start.value && end.value) {
            const s = new Date(start.value);
            const e = new Date(end.value);
            const diff = (e - s) / (1000 * 60 * 60 * 24) + 1;
            days.value = diff > 0 ? diff : 0;
        }

        if (days.value && rate.value) {
            total.value = (days.value * rate.value).toFixed(2);
        }

        if (total.value && paid.value) {
            due.value = (total.value - paid.value).toFixed(2);
        }
    }

    start.addEventListener('change', calculate);
    end.addEventListener('change', calculate);
    rate.addEventListener('input', calculate);
    paid.addEventListener('input', calculate);

    calculate();
});
</script>

<style>
    .card { border-radius: 0.75rem; }
    .card-header { font-weight: 600; }
    .btn-success {
        background-color: #2e7d32;
        border: none;
    }
    .btn-success:hover {
        background-color: #1b5e20;
    }
</style>
@endsection