@extends('layouts.app')

@section('title', 'Student Applications')

@section('content')
    
<h4 class="py-3 breadcrumb-wrapper mb-4">
    <span class="text-muted fw-light">Applications /</span> Student Applications
  </h4>

    <!-- Datatable -->
    <div class="card">
        <h5 class="card-header">Applications</h5>
        <div class="mb-2">
        <button type="button" class="btn btn-primary ms-3" data-bs-toggle="modal" data-bs-target="#newApplication">
            <i class='bx bxs-add-to-queue me-1'></i> New Application
        </button>
        </div>
        <div class="card-datatable table-responsive">
        <table class="dt-multilingual table table-bordered" id="applicationsTable">
            <thead>
            <tr>
                <th>Programme</th>
                <th>Session</th>
                <th>Entry Mode</th>
                <th>Registration Status</th>
                <th>Admission Status</th>
                <th>Payment Status</th>
                <th class="text-center">Action</th>
            </tr>
            </thead>
        </table>
        </div>
    </div>
    <!--/ Datatable -->

    <div class="modal fade" id="newApplication" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="">NEW APPLICATION</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="applicationForm">
                        <input type="hidden" name="application_type" value="Admission"/>
                        <input type="hidden" name="email" value="{{Auth::guard("admissions")->user()->email}}" id="email"/>
                        <div class="row">
                            <div class="col-lg-6 col-12 mb-3">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="">
                                            <div class="mx-auto">
                                                <img src="ice.png" alt="user-avatar" class="d-block rounded" height="100" width="100" id="uploadedAvatar" style="border: 1px dotted;"/>
                                            </div>
                                            <div class="d-flex align-items-start my-3 gap-2">
                                              <div class="button-wrapper">
                                                <label for="upload" class="btn btn-primary me-2 mb-0" tabindex="0">
                                                  <span class="d-none d-sm-block">Upload Passport</span>
                                                  <i class="bx bx-upload d-block d-sm-none"></i>
                                                  <input type="file" id="upload" name="passport" class="account-file-input" hidden accept="image/png, image/jpeg" />
                                                </label>
                                                <button type="button" class="btn btn-label-secondary account-image-reset mb-0">
                                                  <i class="bx bx-reset d-block d-sm-none"></i>
                                                  <span class="d-none d-sm-block">Reset</span>
                                                </button>
                                              </div>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label for="last_name" class="form-label">Last Name</label>
                                            <input type="text" class="form-control" id="last_name" name="last_name" placeholder="Enter your last name" autofocus>
                                        </div>
                                        <div class="mb-3">
                                            <label for="first_name" class="form-label">First Name</label>
                                            <input type="text" class="form-control" id="first_name" name="first_name" placeholder="Enter your first name" autofocus>
                                        </div>
                                        <div class="mb-3">
                                            <label for="other_name" class="form-label">Other Name</label>
                                            <input type="text" class="form-control" id="other_name" name="other_name" placeholder="Enter your other name" autofocus>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-12 mb-3">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="mb-3">
                                            <label for="application_type" class="form-label">Entry Mode</label>
                                            <select  title="SELECT ENTRY MODE" id="application_type" name="entry_type" class="selectpicker w-100" data-style="btn-default" data-live-search="true">
                                                <option value="UTME">UNIFIED TERTIARY MATRICULATION EXAMINATION</option>
                                                <option value="MSP">MATURE STUDENT PROGRAMME</option>
                                                <option value="DE">DIRECT ENTRY</option>
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label for="programme" class="form-label">Programme</label>
                                            <select id="programme" title="SELECT PROGRAMME" name="programme_id" class="selectpicker w-100" data-style="btn-default" data-live-search="true">
                                                @foreach($programmes as $programme)
                                                    <option value="{{$programme->id}}">{{$programme->programme_name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                        
                                        <div class="mb-3">
                                            <label for="faculty" class="form-label">Faculty</label>
                                            <select id="faculty" title="SELECT FACULTY" name="faculty_id" class="selectpicker w-100" data-style="btn-default" data-live-search="true">
                                            </select>
                                        </div>
                        
                                        <div class="mb-3">
                                            <label for="department" class="form-label">Department</label>
                                            <select id="department" title="SELECT DEPARTMENT" name="department_id" class="selectpicker w-100" data-style="btn-default" data-live-search="true">
                                            </select>
                                        </div>
                        
                                        <div class="mb-3">
                                            <label for="mode_of_study" class="form-label">Mode of Study</label>
                                            <select id="mode_of_study" title="SELECT MODE OF STUDY" name="mode_of_study_id" class="selectpicker w-100" data-style="btn-default" data-live-search="true">
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6 col-12 mb-3">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="mb-3">
                                            <label for="session_id" class="form-label">Admission Session</label>
                                            <select id="session_id" title="SELECT ADMISSION SESSION" name="session_id" class="selectpicker w-100" data-style="btn-default" data-live-search="true">
                                                @foreach($academic_sessions as $academic_session)
                                                    <option value="{{$academic_session->id}}">{{$academic_session->session_name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label for="gender" class="form-label">Gender</label>
                                            <select title="SELECT GENDER" id="gender" name="gender" class="selectpicker w-100" data-style="btn-default" data-live-search="true">
                                                <option value="Male">MALE</option>
                                                <option value="Female">FEMALE</option>
                                            </select>
                                        </div>

                                        <div class="mb-3">
                                            <label for="marital_status" class="form-label">Marital Status</label>
                                            <select title="SELECT MARITAL STATUS" id="marital_status" name="marital_status" class="selectpicker w-100" data-style="btn-default" data-live-search="true">
                                                <option value="Single">SINGLE</option>
                                                <option value="Married">MARRIED</option>
                                                <option value="Divorced">DIVORCED</option>
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label for="religion" class="form-label">Religion</label>
                                            <select title="SELECT RELIGION" id="religion" name="religion" class="selectpicker w-100" data-style="btn-default" data-live-search="true">
                                                <option value="Christianity">CHRISTIANITY</option>
                                                <option value="Islam">ISLAM</option>
                                            </select>
                                        </div>

                                        <div class="mb-3">
                                            <label for="date_of_birth" class="form-label">Date of Birth</label>
                                            <input class="form-control" type="date" name="date_of_birth" value="{{date("Y-m-d")}}" id="html5-date-input">
                                        </div>

                                        <div class="mb-3">
                                            <label for="mobile_number" class="form-label">Phone Number</label>
                                            <input type="text" class="form-control" id="mobile_number" name="mobile_number" placeholder="Enter your phone number">
                                        </div>

                                        <div class="mb-3">
                                            <label for="address" class="form-label">Home Address</label>
                                            <textarea class="form-control" id="address" placeholder="Enter your Home Address" name="address" rows="3"></textarea>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-12 mb-3">
                                <div class="card">
                                    <div class="card-body">

                                        <div class="mb-3">
                                            <label for="nationality" class="form-label">Nationality</label>
                                            <select title="SELECT NATIONALITY" id="country" name="country_id" class="selectpicker w-100" data-style="btn-default" data-live-search="true">
                                                @foreach($countries as $country)
                                                    <option value="{{$country->id}}">{{$country->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="mb-3">
                                            <label for="state" class="form-label">State</label>
                                            <select title="SELECT STATE" id="state" name="state_id" class="selectpicker w-100" data-style="btn-default" data-live-search="true">
                                            </select>
                                        </div>

                                        <div class="mb-3">
                                            <label for="local_government_area" class="form-label">Local Government Area</label>
                                            <select title="SELECT LOCAL GOVERNMENT AREA" id="lga" name="lga_id" class="selectpicker w-100" data-style="btn-default" data-live-search="true">
                                            </select>
                                        </div>

                                        <div class="mb-3">
                                            <label for="next_of_kin_full_name" class="form-label">Next of Kin Name</label>
                                            <input type="text" class="form-control" id="next_of_kin_full_name" name="next_of_kin_full_name" placeholder="Enter your next of kin name">
                                        </div>

                                        <div class="mb-3">
                                            <label for="next_of_kin_relationship" class="form-label">Relationship with Next of Kin</label>
                                            <input type="text" class="form-control" id="next_of_kin_relationship" name="next_of_kin_relationship" placeholder="Enter your Relationship with Next of Kin">
                                        </div>

                                        <div class="mb-3">
                                            <label for="next_of_kin_phone_number" class="form-label">Next of Kin Contact Number</label>
                                            <input type="text" class="form-control" id="next_of_kin_phone_number" name="next_of_kin_phone_number" placeholder="Enter your Next of Kin Contact Number">
                                        </div>

                                        <div class="mb-3">
                                            <label for="next_of_kin_address" class="form-label">Next of Kin Address</label>
                                            <textarea class="form-control" id="next_of_kin_address" placeholder="Enter your Next of Kin Address" name="next_of_kin_address" rows="3"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-6 col-12 mb-3">
                                <div class="card">
                                    <div class="card-body">

                                        <div class="mb-3">
                                            <label for="institution1" class="form-label">Institution Attended</label>
                                            <input type="text" class="form-control" id="institution1" name="institution_1" placeholder="Institution Attended">
                                        </div>

                                        <div class="mb-3">
                                            <label for="entry_level_qualification" class="form-label">Entry Level Qualification</label>
                                            <select title="SELECT ENTRY LEVEL QUALIFICATION" id="entry_level_qualification" name="qualification_1" class="selectpicker w-100" data-style="btn-default" data-live-search="true">
                                                <option value="WAEC">WAEC</option>
                                                <option value="TC II">TC II</option>
                                                <option value="NECO">NECO</option>
                                                <option value="NABTEB">NABTEB</option>
                                                <option value="OND">OND</option>
                                                <option value="HND">HND</option>
                                                <option value="NCE">NCE</option>
                                            </select>
                                        </div>

                                        <div class="mb-3">
                                            <label for="formFile1" class="form-label">Entry Level Qualification File</label>
                                            <input class="form-control" type="file" name="qualification_file_1" id="formFile1">
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-12 mb-3">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="mb-3">
                                            <label for="institution2" class="form-label">Institution Attended 2 (optional)</label>
                                            <input type="text" class="form-control" id="institution2" name="institution_2" placeholder="Institution Attended">
                                        </div>

                                        <div class="mb-3">
                                            <label for="entry_level_qualification_2" class="form-label">Entry Level Qualification 2 (Optional)</label>
                                            <select title="SELECT ENTRY LEVEL QUALIFICATION" id="entry_level_qualification_2" name="qualification_2" class="selectpicker w-100" data-style="btn-default" data-live-search="true">
                                                <option value="WAEC">WAEC</option>
                                                <option value="TC II">TC II</option>
                                                <option value="NECO">NECO</option>
                                                <option value="NABTEB">NABTEB</option>
                                                <option value="OND">OND</option>
                                                <option value="HND">HND</option>
                                                <option value="NCE">NCE</option>
                                            </select>
                                        </div>

                                        <div class="mb-3">
                                            <label for="formFile2" class="form-label">Entry Level Qualification 2 File (Optional)</label>
                                            <input class="form-control" type="file" name="qualification_file_2" id="formFile2">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">CLOSE</button>
                    <button type="button" class="submit btn btn-success">CONTINUE</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
<!-- Page JS -->
<script src="https://js.paystack.co/v2/inline.js"></script>
<script src="assets/js/forms-extras.js"></script>
<script src="assets/js/jquery.form.min.js"></script>
<script>
    "use strict";
    var datatable = $("#applicationsTable").DataTable({
        "info": false,
        'order': [],
        'pageLength': 10,
        "ajax": {
            "url": "ajax_student_applications",
            "type": "GET",
            "data": function ( d ) {
                return $.extend( {}, d, {
                } );
            },
            "dataSrc": function (response){
                var data = [];
                for ( var i=0; i < response.returned_data.length; i++ ) {
                    data.push(response.returned_data[i]);
                }
                return data;
            }
        },
        "deferRender": true,
        "createdRow": function ( row, data, index ) {
            $("td:last", row).attr("class", "text-center");
        },
        fnDrawCallback: function(){

        }
    });

    let entry_type, programme_id, faculty_id, department_programme_id, country_id, state_id, lga_id, admission_id;
    
    $(document).on('change', '#formFile4', function (event) {
        let input = event.target;
        let file = input.files[0];
    
        if (file) {
            $('input[type="text"]#formFile4').val(file.name);
        }
    });
    
    $(document).on('change', '#formFile3', function (event) {
        let input = event.target;
        let file = input.files[0];
        if (file) {
            $('input[type="text"]#formFile3').val(file.name);
        }
    });
    
    let e = document.getElementById("uploadedAvatar");
    const l = document.querySelector(".account-file-input"),
    c = document.querySelector(".account-image-reset");
    if (e) {
        const r = e.src;
        l.onchange = () => {
            l.files[0] && (e.src = window.URL.createObjectURL(l.files[0]))
        }, c.onclick = () => {
            l.value = "", e.src = r
        }
    }

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $(document).on("change", "#programme", function(e) {
        programme_id = $(this).selectpicker("val");
        
        let $mselect = $('#mode_of_study');
        $mselect.find('option').remove();
        $mselect.selectpicker('destroy');
        $mselect.selectpicker('render');
        
        let $dselect = $('#department');
        $dselect.find('option').remove();
        $dselect.selectpicker('destroy');
        $dselect.selectpicker('render');
        
        let $select = $('#faculty');
        $select.find('option').remove();
        $select.selectpicker('destroy');
        $select.selectpicker('render');
        
        let $label = $select.closest('.mb-3').find('label').first();
        $label.siblings('.label-loader').remove();

        let loader = '<span class="spinner-border spinner-border-sm align-middle ms-2 mb-1 label-loader"></span>';
        $label.after(loader);
        
        $.ajax({
            url: "programme_faculties",
            type: "GET",
            data: { programme_id: programme_id},
            success: function (response) {
                let faculties = response.faculties;
                    $.each(faculties, function(index, faculty) {
                        $select.append(
                            $('<option>', {
                                value: faculty.id,
                                text: faculty.faculty_name
                            })
                        );
                    });
                    $select.selectpicker('refresh');
            },
            error: function (xhr) {
                console.log(xhr);
            },
            complete: function() {
                $(".label-loader").remove();
            }
        })
    })
    
    $("#application_type").on('change', function(e){
        
    })

    $("#faculty").on('change', function(e) {
        faculty_id = $(this).selectpicker("val");
        let $mselect = $('#mode_of_study');
        $mselect.find('option').remove();
        $mselect.selectpicker('destroy');
        $mselect.selectpicker('render');
        
        let $select = $('#department');
        $select.find('option').remove();
        $select.selectpicker('destroy');
        $select.selectpicker('render');
        
        let $label = $select.closest('.mb-3').find('label').first();
        $label.siblings('.label-loader').remove();

        let loader = '<span class="spinner-border spinner-border-sm align-middle ms-2 mb-1 label-loader"></span>';
        $label.after(loader);
        
        
        $.ajax({
            url: 'faculty_departments',
            method: 'GET',
            data: { programme_id: programme_id, faculty_id: faculty_id},
            success: function(response) {
                if (response.status === 200) {
                    let department_programmes = response.department_programmes;
                    $.each(department_programmes, function(index, department_programme) {
                        $select.append(
                            $('<option>', {
                                value: department_programme.id,
                                text: department_programme.department_name
                            })
                        );
                    });
                    $select.selectpicker('refresh');
                }
            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
            },
            complete: function() {
                $(".label-loader").remove();
            }
        });
    })

    $("#department").on('change', function(e) {
        var department_programme_id = $(this).selectpicker("val");
        let $select = $('#mode_of_study');
        $select.find('option').remove();
        $select.selectpicker('destroy');
        $select.selectpicker('render');
        
        let $label = $select.closest('.mb-3').find('label').first();
        $label.siblings('.label-loader').remove();

        let loader = '<span class="spinner-border spinner-border-sm align-middle ms-2 mb-1 label-loader"></span>';
        $label.after(loader);
        $.ajax({
            url: 'department_mode_of_studies',
            method: 'GET',
            data: { programme_id: programme_id, department_programme_id: department_programme_id},
            success: function(response) {
                if (response.status === 200) {
                    let department_mode_of_studies = response.department_mode_of_studies;
                    $.each(department_mode_of_studies, function(index, department_mode_of_study) {
                        $select.append(
                            $('<option>', {
                                value: department_mode_of_study.id,
                                text: department_mode_of_study.mode_of_study_name
                            })
                        );
                    });
                    $select.selectpicker('refresh');
                }
            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
            },
            complete: function() {
                $(".label-loader").remove();
            }
        });
    })

    $("#country").on('change', function(e) {
        var country_id = $(this).selectpicker("val");
        
        let $dselect = $('#lga');
        $dselect.find('option').remove();
        $dselect.selectpicker('destroy');
        $dselect.selectpicker('render');
        
        let $select = $('#state');
        $select.find('option').remove();
        $select.selectpicker('destroy');
        $select.selectpicker('render');
        
        let $label = $select.closest('.mb-3').find('label').first();
        $label.siblings('.label-loader').remove();

        let loader = '<span class="spinner-border spinner-border-sm align-middle ms-2 mb-1 label-loader"></span>';
        $label.after(loader);
        
        $.ajax({
            url: 'states',
            method: 'GET',
            data: { country_id: country_id},
            success: function(response) {
                if (response.status === 200) {
                    let states = response.states;
                    $.each(states, function(index, state) {
                        $select.append(
                            $('<option>', {
                                value: state.id,
                                text: state.name
                            })
                        );
                    });
                    $select.selectpicker('refresh');
                }
            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
            },
            complete: function() {
                $(".label-loader").remove();
            }
        });
    })

    $("#state").on('change', function(e) {
        var state_id = $(this).selectpicker("val");
        let $select = $('#lga');
        $select.find('option').remove();
        $select.selectpicker('destroy');
        $select.selectpicker('render');
        
        let $label = $select.closest('.mb-3').find('label').first();
        $label.siblings('.label-loader').remove();

        let loader = '<span class="spinner-border spinner-border-sm align-middle ms-2 mb-1 label-loader"></span>';
        $label.after(loader);
        $.ajax({
            url: 'lgas',
            method: 'GET',
            data: { state_id: state_id},
            success: function(response) {
                if (response.status === 200) {
                    let lgas = response.lgas;
                    $.each(lgas, function(index, lga) {
                        $select.append(
                            $('<option>', {
                                value: lga.id,
                                text: lga.name
                            })
                        );
                    });
                    $select.selectpicker('refresh');
                }
            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
            },
            complete: function() {
                $(".label-loader").remove();
            }
        });
    })

    $(document).on('change', ".country", function(e) {
        var country_id = $(this).selectpicker("val");
        
        let $dselect = $('.lga');
        $dselect.find('option').remove();
        $dselect.selectpicker('destroy');
        $dselect.selectpicker('render');
        
        let $select = $('.state');
        $select.find('option').remove();
        $select.selectpicker('destroy');
        $select.selectpicker('render');
        
        let $label = $select.closest('.mb-3').find('label').first();
        $label.siblings('.label-loader').remove();

        let loader = '<span class="spinner-border spinner-border-sm align-middle ms-2 mb-1 label-loader"></span>';
        $label.after(loader);
        
        $.ajax({
            url: 'states',
            method: 'GET',
            data: { country_id: country_id },
            success: function(response) {
                if (response.status === 200) {
                    let states = response.states;
                    $.each(states, function(index, state) {
                        $select.append(
                            $('<option>', {
                                value: state.id,
                                text: state.name
                            })
                        );
                    });
                    $select.selectpicker('refresh');
                }
            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
            },
            complete: function() {
                $(".label-loader").remove();
            }
        });
    })

    $(document).on('change', ".state", function(e) {
        
        var state_id = $(this).selectpicker("val");
        
        let $select = $('.lga');
        $select.find('option').remove();
        $select.selectpicker('destroy');
        $select.selectpicker('render');
        
        let $label = $select.closest('.mb-3').find('label').first();
        $label.siblings('.label-loader').remove();

        let loader = '<span class="spinner-border spinner-border-sm align-middle ms-2 mb-1 label-loader"></span>';
        $label.after(loader);
        $.ajax({
            url: 'lgas',
            method: 'GET',
            data: { state_id: state_id},
            success: function(response) {
                if (response.status === 200) {
                    let lgas = response.lgas;
                    $.each(lgas, function(index, lga) {
                        $select.append(
                            $('<option>', {
                                value: lga.id,
                                text: lga.name
                            })
                        );
                    });
                    $select.selectpicker('refresh');
                }
            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
            },
            complete: function() {
                $(".label-loader").remove();
            }
        });
    })

    $(".selectpicker").selectpicker();

    $(".applyNow").on("click", function(e) {
        e.preventDefault();
        $("#applyNowForm").ajaxSubmit({
            url: "apply_now",
            type: "POST",
            success: function (response) {
                console.log(response);
            },
            error: function (xhr) {
                console.log(xhr);
            },
        });
    });

    $(document).on("click", ".emptyModalSubmit", function(e) {
        var emptyModalUrl = $(this).data("url");
        e.preventDefault();
        var error = false;
        if (!error) {
            Swal.fire({
                title: 'Are you sure?',
                html: "Application will be updated!",
                icon: 'info',
                buttonsStyling: false,
                showCancelButton: true,
                allowOutsideClick: false,
                allowEscapeKey: false,
                allowEnterKey: false,
                showLoaderOnConfirm: true,
                confirmButtonText: 'Yes, submit it!',
                cancelButtonText: 'No, cancel it',
                customClass: {
                    confirmButton: 'btn btn-primary',
                    cancelButton: 'btn btn-danger'
                },
                preConfirm: () => {
                    return new Promise(() => {
                        $("#editApplicationForm").ajaxSubmit({
                            url: emptyModalUrl,
                            type: "POST",
                            success: function (response) {
                                if (response.status === "success") {
                                    datatable.ajax.reload();
                                    emptyModalClose();
                                    Swal.fire("Done!", "Application Updated!", "success");
                                } else {
                                    Swal.fire("Cancelled!", response.message, "error");
                                }
                                Swal.hideLoading();
                            },
                            error: function (response) {
                                Swal.fire("Error!", response.responseJSON.message, "error");
                                Swal.hideLoading();
                            }
                        });
                    });
                },
            })
        }
    });

    $(".submit").on("click", function(e) {
        e.preventDefault();
        var error = false;
        if (!error) {
            Swal.fire({
                title: 'Are you sure?',
                html: "Start New Application?",
                icon: 'info',
                buttonsStyling: false,
                showCancelButton: true,
                allowOutsideClick: false,
                allowEscapeKey: false,
                allowEnterKey: false,
                showLoaderOnConfirm: true,
                confirmButtonText: 'Yes, submit it!',
                cancelButtonText: 'No, cancel it',
                customClass: {
                    confirmButton: 'btn btn-primary',
                    cancelButton: 'btn btn-danger'
                },
                preConfirm: () => {
                    return new Promise(() => {
                        $("#applicationForm").ajaxSubmit({
                            url: "apply_now",
                            type: "POST",
                            success: function (response) {
                                if (response.status === "success") {
                                    datatable.ajax.reload();
                                    $(".btn-close").click();
                                    Swal.fire("Done!", "Application Started!", "success");
                                } else {
                                    if(response.status === "error"){
                                            const messages = Object.entries(response.errors).map(([field, errors]) => {
                                                return errors.join(' ');
                                            }).join('\n');
                                            Swal.fire("Cancelled!", messages.replace(/\n/g, '<br>'), "error");
                                    }
                                    else{
                                        Swal.fire("Cancelled!", response.message, "error");
                                    }
                                }
                                Swal.hideLoading();
                            },
                            error: function (response) {
                                Swal.fire("Error!", response.responseJSON.message, "error");
                                Swal.hideLoading();
                            }
                        });
                    });
                },
            })
        }
    });

    $(document).on("click", ".continueApplication", function(e) {
        e.preventDefault();
        emptyModalOpen();
        admission_id = $(this).data("id");
        $.ajax({
            url: "update_application_form",
            type: "GET",
            data: { admission_id: admission_id },
            success: function (response) {
                emptyModalFill(response);
                $(".selectpicker").selectpicker();
                let f = document.getElementById("editUploadedAvatar");
                const k = document.querySelector(".edit-account-file-input"),
                b = document.querySelector(".edit-account-image-reset");
                if (f) {
                    const t = f.src;
                    k.onchange = () => {
                        k.files[0] && (f.src = window.URL.createObjectURL(k.files[0]))
                    }, b.onclick = () => {
                        k.value = "", f.src = t
                    }
                }
                console.log(response);
            },
            error: function (xhr) {
                console.log(xhr);
            },
        })
    });

    $(document).on("click", ".submitApplication", function(e) {
        e.preventDefault();
        admission_id = $(this).data("id");
        var error = false;
        if (!error) {
            Swal.fire({
                title: 'Are you sure?',
                html: "Application will be Submitted?",
                icon: 'info',
                buttonsStyling: false,
                showCancelButton: true,
                allowOutsideClick: false,
                allowEscapeKey: false,
                allowEnterKey: false,
                showLoaderOnConfirm: true,
                confirmButtonText: 'Yes, submit it!',
                cancelButtonText: 'No, cancel it',
                customClass: {
                    confirmButton: 'btn btn-primary',
                    cancelButton: 'btn btn-danger'
                },
                preConfirm: () => {
                    return new Promise(() => {
                        $.ajax({
                            url: "submit_application",
                            type: "POST",
                            data: { admission_id : admission_id},
                            success: function (response) {
                                if (response.status === "success") {
                                    datatable.ajax.reload();
                                    Swal.fire("Done!", "Application Submitted!", "success");
                                } else {
                                    Swal.fire("Cancelled!", response.message, "error");
                                }
                                Swal.hideLoading();
                            },
                            error: function (response) {
                                Swal.fire("Error!", response.responseJSON.message, "error");
                                Swal.hideLoading();
                            }
                        });
                    });
                },
            })
        }
    });
    
    $(document).on("click", ".deleteApplication", function(e) {
        e.preventDefault();
        admission_id = $(this).data("id");
        var error = false;
        if (!error) {
            Swal.fire({
                title: 'Are you sure?',
                html: "Application will be Deleted?",
                icon: 'info',
                buttonsStyling: false,
                showCancelButton: true,
                allowOutsideClick: false,
                allowEscapeKey: false,
                allowEnterKey: false,
                showLoaderOnConfirm: true,
                confirmButtonText: 'Yes, submit it!',
                cancelButtonText: 'No, cancel it',
                customClass: {
                    confirmButton: 'btn btn-primary',
                    cancelButton: 'btn btn-danger'
                },
                preConfirm: () => {
                    return new Promise(() => {
                        $.ajax({
                            url: "delete_application",
                            type: "DELETE",
                            data: { admission_id : admission_id},
                            success: function (response) {
                                if (response.status === "success") {
                                    datatable.ajax.reload();
                                    Swal.fire("Done!", "Application Deleted!", "success");
                                } else {
                                    Swal.fire("Cancelled!", response.message, "error");
                                }
                                Swal.hideLoading();
                            },
                            error: function (response) {
                                Swal.fire("Error!", response.responseJSON.message, "error");
                                Swal.hideLoading();
                            }
                        });
                    });
                },
            })
        }
    });
    
    function verify_payment(response, admission_number, fee_id) {
        $.ajax({
            url: "verify_admission_payment",
            data: {
                reference: response.reference,
                admission_number: admission_number,
                fee_id: fee_id,
            },
            type: "POST",
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            dataType: "json",
            success: function (res) {
                if (res.status === "error") {
                    Swal.fire("Cancelled!", res.message + ". Try again", "error");
                } else if (res.status === "success") {
                    Swal.fire("Finalizing!", res.message + ". Please wait...", "info");
                    location.reload();
                    // window.location = res.url;
                }
            },
            error: function (data) {
            },
        });
    }
    
    function pay_now(admission_number, fee_id) {
        $.ajax({
            url: "pay_now",
            data: {
                admission_number: admission_number,
                fee_id: fee_id,
            },
            type: "GET",
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            dataType: "json",
            success: function (res) {
                if (res.status === "error") {
                    // Swal.fire("Cancelled!", res.message + ". Try again", "error");
                } else if (res.status === "success") {
                    // Swal.fire("Finalizing!", res.message + ". Please wait...", "info");

                    // window.location = res.url;
                }
            },
            error: function (data) {
            },
        });
    }

    $(document).on("click", ".payNow", function (e) {
        var fee_amount = $(this).data("payment_amount");
        var fee_id = $(this).data("fee_id");
        var email = $(this).data("email");
        var admission_number = $(this).data("admission_number");
        var phone_number = $(this).data("phone_number");
        pay_now(admission_number, fee_id);
        let handler = PaystackPop.setup({
            key: 'pk_live_84cdc3c52e4c1de6d2cc1299a1e934d2a0c13414',
            // key: 'pk_test_aca0b9922750d1933bcfa2823c5edde461a5fbb9',
            email: email,
            amount: 1000 * 100,
            // amount: parseInt(fee_amount) * 100,
            split_code: "SPL_RFbBogFpaC", //live
            // split_code: "SPL_UDSz2r4WoK",
            // ref: ''+Math.floor((Math.random() * 1000000000) + 1), // generates a pseudo-unique reference. Please replace with a reference you generated. Or remove the line entirely so our API will generate one for you
            // label: "Optional string that replaces customer email",
            "metadata": {
                // email: metadata_value['email'],
                "custom_fields":[
                    {
                      "display_name":"Admission Number",
                      "variable_name":"Admission Number",
                      "value": admission_number
                    }
                  ]
            },
            onClose: function(){
            },
            callback: function(response){
                verify_payment(response, admission_number);
            }
        });
        handler.openIframe();
    });
</script>

@endsection