@extends('layouts.app')

@section('title', 'Edit Mentor Payment')

@section('content')
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="text-success mb-0"><i class="bi bi-pencil-square me-2"></i> Edit Mentor Payment</h2>
        <a href="{{ route('mentor.mentor-payments.index') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> Back
        </a>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-body">
            <form action="{{ route('mentor.mentor-payments.update', $mentorPayment->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <!-- Mentorship Activity -->
                <div class="mb-3">
                    <label class="form-label fw-semibold">Mentorship Activity</label>
                    <input type="text" value="{{ $mentorPayment->mentorshipActivity->mentor->name ?? 'N/A' }}" class="form-control" readonly>
                </div>

                <!-- Date -->
                <div class="mb-3">
                    <label for="session_date" class="form-label fw-semibold">Session Date</label>
                    <input type="date" name="session_date" id="session_date" class="form-control"
                        value="{{ $mentorPayment->session_date->format('Y-m-d') }}" required>
                </div>

                <!-- Mentees -->
                <div class="mb-3">
                    <label for="number_of_mentees" class="number_of_mentees">Number of Mentees Met</label>
                    <input type="number_of_mentees" name="number_of_mentees" id="number_of_mentees" value="{{ $mentorPayment->number_of_mentees }}" class="form-control" min="1" required>
                </div>

                <!-- Rates -->
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="rate_per_meeting" class="form-label fw-semibold">Rate per Meeting (KSH)</label>
                        <input type="number" name="rate_per_meeting" id="rate_per_meeting" value="{{ $mentorPayment->rate_per_meeting }}" class="form-control" step="0.01" required>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="transport_per_youth" class="form-label fw-semibold">Transport per Youth (KSH)</label>
                        <input type="number" name="transport_per_youth" id="transport_per_youth" value="{{ $mentorPayment->transport_per_youth }}" class="form-control" step="0.01" required>
                    </div>
                </div>

                <!-- Total -->
                <div class="mb-3">
                    <label for="total_payable" class="form-label fw-semibold">Total Payable (KSH)</label>
                    <input type="number" name="total_payable" id="total_payable" class="form-control"
                        value="{{ $mentorPayment->total_payable }}" readonly>
                </div>

                <div class="d-flex justify-content-end">
                    <button type="submit" class="btn btn-success px-4">
                        <i class="bi bi-save"></i> Update Payment
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    document.addEventListener('input', () => {
        const mentees = parseFloat(document.getElementById('mentees_met').value) || 0;
        const rate = parseFloat(document.getElementById('rate_per_meeting').value) || 0;
        const transport = parseFloat(document.getElementById('transport_per_youth').value) || 0;
        document.getElementById('total_payable').value = (mentees * (rate + transport)).toFixed(2);
    });
</script>
@endsection