@extends('layouts.app')
@section('content')

    @include('layouts.toolbar')

    <div id="kt_content_container" class="d-flex flex-column-fluid align-items-start container-xxl">
        <div class="content flex-row-fluid" id="kt_content">
            <div class="card">
                <div class="card-header border-0 pt-6">
                    <div class="card-title">
                        <div class="d-flex align-items-center position-relative my-1">
                            <h3 class="fw-semibold text-dark mb-7">Add Manual Referral</h3>
                        </div>
                    </div>
                </div>

                <div class="card-body py-4">
                    <form id="ManualReferralForm" name="ManualReferralForm" class="pt-1">
                        {{ csrf_field() }}

                        <div class="row">
                            <div class="col-12">
                                <h4 class="fw-semibold text-dark mt-2">Referral Information</h4>
                            </div>
                        </div>
                        <hr><br>

                        <!-- Referral Type Selection -->
                        <div class="row" style="display: none">
                            <div class="col-12 mb-5">
                                <label class="required fs-6 fw-semibold mb-3">Referral Type</label>
                                <div class="d-flex gap-4">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="referral_type" id="single_referral" value="single" checked>
                                        <label class="form-check-label" for="single_referral">
                                            Single Referral
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="referral_type" id="group_referral" value="group">
                                        <label class="form-check-label" for="group_referral">
                                            Group Referral
                                        </label>
                                    </div>
                                </div>
                                @error('referral_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Single Referral Fields -->
                        <div id="single_referral_fields">
                            <div class="row">
                                <div class="col-6 mb-5">
                                    <label class="required fs-6 fw-semibold mb-2">Referred Student</label>
                                    <select name="student_id" id="student_id" class="form-select form-select-sm form-select-solid @error('student_id') is-invalid @enderror"
                                            data-control="select2" data-placeholder="Select a student">
                                        <option></option>
                                        @if(!empty($newStudents))
                                            @foreach($newStudents as $student)
                                                <option value="{{ $student->id }}">{{ $student->name }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                    @error('student_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-6 mb-5">
                                    <label class="required fs-6 fw-semibold mb-2">Referring Student</label>
                                    <select name="referral_id" id="referral_id" class="form-select form-select-sm form-select-solid @error('referral_id') is-invalid @enderror"
                                            data-control="select2" data-placeholder="Select a student">
                                        <option></option>
                                        @if(!empty($allStudents))
                                            @foreach($allStudents as $student)
                                                <option value="{{ $student->id }}">{{ $student->name }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                    @error('referral_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Group Referral Fields -->
                        <div id="group_referral_fields" style="display: none;">
                            <div class="row">
                                <div class="col-6 mb-5">
                                    <label class="required fs-6 fw-semibold mb-2">Main Student (Who is referring)</label>
                                    <select name="group_student_id" id="group_student_id" class="form-select form-select-sm form-select-solid @error('group_student_id') is-invalid @enderror"
                                            data-control="select2" data-placeholder="Select a student">
                                        <option></option>
                                        @if(!empty($newStudents))
                                            @foreach($newStudents as $student)
                                                <option value="{{ $student->id }}">{{ $student->name }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                    @error('group_student_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-6 mb-5">
                                    <label class="required fs-6 fw-semibold mb-2">New Students (Being referred)</label>
                                    <select name="group_referred_student_ids[]" id="group_referred_student_ids" class="form-select form-select-sm form-select-solid @error('group_referred_student_ids') is-invalid @enderror"
                                            data-control="select2" data-placeholder="Select students" multiple="multiple">
                                        <option></option>
                                        @if(!empty($newStudents))
                                            @foreach($newStudents as $student)
                                                <option value="{{ $student->id }}">{{ $student->name }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                    @error('group_referred_student_ids')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <div class="form-text">Select one or more new students being referred</div>
                                </div>
                            </div>
                        </div>
                        <br>

                        <div class="row d-flex">
                            <div class="col-1">
                                <button type="button" class="btn btn-success w-100" id="SubmitForm">
                                    Save
                                </button>
                            </div>

                            <div class="col-1">
                                <a href="{{ url('manual-referrals/families/list') }}" type="button" class="btn btn-primary w-10">
                                    Cancel
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script type="text/javascript">
        $(function() {
            // Initialize Select2
            $('#student_id').select2();
            $('#referral_id').select2();
            $('#group_student_id').select2();
            $('#group_referred_student_ids').select2();

            // Handle referral type change
            $('input[name="referral_type"]').change(function() {
                var selectedType = $(this).val();
                
                if (selectedType === 'single') {
                    $('#single_referral_fields').show();
                    $('#group_referral_fields').hide();
                } else if (selectedType === 'group') {
                    $('#single_referral_fields').hide();
                    $('#group_referral_fields').show();
                }
            });

            $('#SubmitForm').click(function(e) {
                e.preventDefault();
                
                // Show loading state
                $(this).attr("data-kt-indicator", "on");
                $(this).prop("disabled", true);

                var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
                var referralType = $('input[name="referral_type"]:checked').val();
                var formData = {
                    _token: CSRF_TOKEN,
                    referral_type: referralType
                };

                // Add data based on referral type
                if (referralType === 'single') {
                    formData.student_id = $('#student_id').val();
                    formData.referral_id = $('#referral_id').val();
                } else if (referralType === 'group') {
                    formData.student_id = $('#group_student_id').val();
                    formData.referred_student_ids = $('#group_referred_student_ids').val();
                }

                $.ajax({
                    type: 'POST',
                    url: "{{ url('manual-referrals/families') }}",
                    data: formData,
                    dataType: 'JSON',
                    success: function(data) {
                        $('#SubmitForm').removeAttr("data-kt-indicator");
                        $('#SubmitForm').prop("disabled", false);

                        if (data.success) {
                            toastr.success(data.success);
                            setTimeout(function() {
                                window.location.href = "{{ url('manual-referrals/families/list') }}";
                            }, 1500);
                        } else if (data.failure) {
                            let htmlError = '';
                            $.each(data.failure, function(index, value) {
                                htmlError += '<li>' + value + '</li>';
                            });
                            toastr.error(htmlError);
                        }
                    },
                    error: function(xhr) {
                        $('#SubmitForm').removeAttr("data-kt-indicator");
                        $('#SubmitForm').prop("disabled", false);
                        
                        if (xhr.responseJSON && xhr.responseJSON.failure) {
                            let htmlError = '';
                            $.each(xhr.responseJSON.failure, function(index, value) {
                                htmlError += '<li>' + value + '</li>';
                            });
                            toastr.error(htmlError);
                        } else {
                            toastr.error('An error occurred while saving');
                        }
                    }
                });
            });
        });
    </script>
@endsection