@extends('backend.admin_backend.admin_dashboard')

@section('admin')

<style>

/*
|--------------------------------------------------------------------------
| MAIN CARD
|--------------------------------------------------------------------------
*/

.attendance-card{

    border:none;

    border-radius:12px;

    overflow:hidden;

}


/*
|--------------------------------------------------------------------------
| PAGE HEADER
|--------------------------------------------------------------------------
*/

.attendance-page-header{

    background:linear-gradient(
        135deg,
        #198754,
        #157347
    );

    color:white;

    padding:20px 22px;

}

.attendance-page-header h4{

    margin:0;

    font-weight:700;

}


/*
|--------------------------------------------------------------------------
| FORM SECTION
|--------------------------------------------------------------------------
*/

.attendance-form-card{

    background:#f8f9fa;

    border:1px solid #e3e3e3;

    border-radius:10px;

    padding:20px;

}


/*
|--------------------------------------------------------------------------
| FORM LABEL
|--------------------------------------------------------------------------
*/

.attendance-form-card .form-label{

    font-weight:600;

}


/*
|--------------------------------------------------------------------------
| TABLE
|--------------------------------------------------------------------------
*/

.attendance-table{

    border-collapse:separate;

    border-spacing:0;

}

.attendance-table th{

    background:#198754 !important;

    color:white !important;

    text-align:center;

    vertical-align:middle;

    white-space:nowrap;

}

.attendance-table td{

    vertical-align:middle;

}

.attendance-table tbody tr:hover td{

    background:#fff8d8;

    transition:.2s;

}


/*
|--------------------------------------------------------------------------
| ACTION BUTTONS
|--------------------------------------------------------------------------
*/

.attendance-action-btn{

    white-space:nowrap;

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media(max-width:768px){

    .attendance-table{

        min-width:800px;

    }

    .attendance-page-header h4{

        font-size:18px;

    }

}

</style>


<div class="container-fluid">


    {{-- =========================================================
        PAGE HEADER
    ========================================================== --}}

    <div class="row mb-3">

        <div class="col-md-12">

            <div class="card shadow-sm attendance-card">

                <div class="attendance-page-header">

                    <h4 style="color:white;">

                        <i class="fas fa-calendar-check"></i>

                        Attendance Settings

                    </h4>

                    <small>

                        Configure the number of weeks, school days
                        and holiday days for each academic term.

                    </small>

                </div>

            </div>

        </div>

    </div>



    {{-- =========================================================
        CREATE / EDIT FORM
    ========================================================== --}}

    <div class="card shadow attendance-card">

        <div class="card-header bg-success text-white">

            <strong id="attendanceFormTitle">

                <i class="fas fa-cog"></i>

                Create Attendance Setting

            </strong>

        </div>


        <div class="card-body">


            <div class="attendance-form-card">


                <form
                    id="attendanceSettingForm"

                    action="{{ route(
                        'admin.attendance.settings.store'
                    ) }}"

                    method="POST"
                >

                    @csrf


                    {{-- =================================================
                        METHOD
                    ================================================== --}}

                    <input
                        type="hidden"
                        id="formMethod"
                        value="POST"
                    >


                    {{-- =================================================
                        SETTING ID
                    ================================================== --}}

                    <input
                        type="hidden"
                        id="settingId"
                        value=""
                    >


                    <div class="row">


                        {{-- =================================================
                            ACADEMIC SESSION
                        ================================================== --}}

                        <div class="col-md-6 mb-3">

                            <label class="form-label">

                                Academic Session

                            </label>


                            <select

                                name="academic_session_id"

                                id="academic_session_id"

                                class="form-select"

                                required

                            >

                                <option value="">

                                    -- Select Academic Session --

                                </option>


                                @foreach($sessions as $session)

                                    <option
                                        value="{{ $session->id }}"
                                    >

                                        {{ $session->name }}

                                    </option>

                                @endforeach

                            </select>

                        </div>



                        {{-- =================================================
                            TERM
                        ================================================== --}}

                        <div class="col-md-6 mb-3">

                            <label class="form-label">

                                Term

                            </label>


                            <select

                                name="term"

                                id="term"

                                class="form-select"

                                required

                            >

                                <option value="">

                                    -- Select Term --

                                </option>


                                @foreach($terms as $term)

                                    <option
                                        value="{{ $term->name }}"
                                    >

                                        {{ $term->name }}

                                    </option>

                                @endforeach

                            </select>

                        </div>



                        {{-- =================================================
                            NUMBER OF WEEKS
                        ================================================== --}}

                        <div class="col-md-4 mb-3">

                            <label class="form-label">

                                Number of Weeks

                            </label>


                            <input

                                type="number"

                                name="number_of_weeks"

                                id="number_of_weeks"

                                class="form-control"

                                min="1"

                                max="60"

                                placeholder="e.g. 12"

                                required

                            >

                        </div>



                        {{-- =================================================
                            SCHOOL OPEN DAYS
                        ================================================== --}}

                        <div class="col-md-4 mb-3">

                            <label class="form-label">

                                School Open Days

                            </label>


                            <input

                                type="number"

                                name="school_open_days"

                                id="school_open_days"

                                class="form-control"

                                min="1"

                                placeholder="e.g. 60"

                                required

                            >

                        </div>



                        {{-- =================================================
                            HOLIDAY DAYS
                        ================================================== --}}

                        <div class="col-md-4 mb-3">

                            <label class="form-label">

                                Holiday / Non-School Days

                            </label>


                            <input

                                type="number"

                                name="holiday_days"

                                id="holiday_days"

                                class="form-control"

                                min="0"

                                value="0"

                                placeholder="e.g. 5"

                                required

                            >

                        </div>


                    </div>



                    {{-- =================================================
                        BUTTONS
                    ================================================== --}}

                    <div class="mt-2">


                        <button

                            type="submit"

                            id="saveAttendanceSetting"

                            class="btn btn-success"

                        >

                            <i class="fas fa-save"></i>

                            Save Attendance Settings

                        </button>



                        <button

                            type="button"

                            id="cancelEdit"

                            class="btn btn-secondary d-none"

                        >

                            <i class="fas fa-times"></i>

                            Cancel Edit

                        </button>


                    </div>


                </form>

            </div>

        </div>

    </div>



    {{-- =========================================================
        EXISTING SETTINGS
    ========================================================== --}}

    <div class="card shadow attendance-card mt-4">


        <div class="card-header bg-dark text-white">

            <strong>

                <i class="fas fa-list"></i>

                Attendance Settings

            </strong>

        </div>



        <div class="table-responsive">

            <table
                class="table table-bordered table-striped
                       attendance-table mb-0"
            >

                <thead>

                    <tr>

                        <th>S/N</th>

                        <th>Academic Session</th>

                        <th>Term</th>

                        <th>Weeks</th>

                        <th>School Open Days</th>

                        <th>Holiday Days</th>

                        <th>Created</th>

                        <th>Action</th>

                    </tr>

                </thead>



                <tbody>


                    @forelse($settings as $index => $setting)

                        <tr>


                            {{-- S/N --}}

                            <td class="text-center">

                                {{ $index + 1 }}

                            </td>



                            {{-- SESSION --}}

                            <td>

                                {{ $setting->academicSession->name ?? '-' }}

                            </td>



                            {{-- TERM --}}

                            <td>

                                {{ $setting->term }}

                            </td>



                            {{-- WEEKS --}}

                            <td class="text-center">

                                <span class="badge bg-success">

                                    {{ $setting->number_of_weeks }}

                                    Weeks

                                </span>

                            </td>



                            {{-- SCHOOL OPEN DAYS --}}

                            <td class="text-center">

                                {{ $setting->school_open_days }}

                            </td>



                            {{-- HOLIDAY DAYS --}}

                            <td class="text-center">

                                {{ $setting->holiday_days }}

                            </td>



                            {{-- CREATED --}}

                            <td>

                                {{ $setting->created_at
                                    ? $setting->created_at->format('d M Y')
                                    : '-'
                                }}

                            </td>



                            {{-- ACTION --}}

                            <td class="text-center">


                                <button

                                    type="button"

                                    class="btn btn-sm btn-primary
                                           attendance-action-btn
                                           editAttendance"

                                    data-id="{{ $setting->id }}"

                                >

                                    <i class="fas fa-edit"></i>

                                    Edit

                                </button>



                                <button

                                    type="button"

                                    class="btn btn-sm btn-danger
                                           attendance-action-btn
                                           deleteAttendance"

                                    data-id="{{ $setting->id }}"

                                    data-name="
                                        {{ $setting->academicSession->name ?? '-' }}
                                        - {{ $setting->term }}
                                    "

                                >

                                    <i class="fas fa-trash"></i>

                                    Delete

                                </button>


                            </td>


                        </tr>

                    @empty


                        <tr>

                            <td

                                colspan="8"

                                class="text-center text-muted py-4"

                            >

                                <i class="fas fa-calendar-times fa-2x mb-2"></i>

                                <br>

                                No attendance settings created yet.

                            </td>

                        </tr>


                    @endforelse


                </tbody>

            </table>

        </div>

    </div>


</div>



<script>

$(document).ready(function(){


    /*
    |--------------------------------------------------------------------------
    | CREATE / UPDATE ATTENDANCE SETTING
    |--------------------------------------------------------------------------
    */

    $('#attendanceSettingForm').submit(function(e){

        e.preventDefault();


        let form = $(this);

        let button =
            $('#saveAttendanceSetting');


        let method =
            $('#formMethod').val();


        let settingId =
            $('#settingId').val();


        /*
        |--------------------------------------------------------------------------
        | DETERMINE URL
        |--------------------------------------------------------------------------
        */

        let url =
            "{{ route(
                'admin.attendance.settings.store'
            ) }}";


        if(method === 'PUT'){

            url =
                "{{ url(
                    '/attendance/settings'
                ) }}" + '/' + settingId;

        }


        /*
        |--------------------------------------------------------------------------
        | DISABLE BUTTON
        |--------------------------------------------------------------------------
        */

        button

            .prop('disabled', true)

            .html(`

                <span
                    class="spinner-border
                           spinner-border-sm me-1">
                </span>

                Saving...

            `);


        /*
        |--------------------------------------------------------------------------
        | CONFIRM
        |--------------------------------------------------------------------------
        */

        let actionText =
            method === 'PUT'
                ? 'update this attendance setting?'
                : 'save this attendance setting?';


        Swal.fire({

            title:
                method === 'PUT'
                    ? 'Update Attendance Setting?'
                    : 'Save Attendance Setting?',

            text:
                'Are you sure you want to ' +
                actionText,

            icon:'question',

            showCancelButton:true,

            confirmButtonColor:'#198754',

            cancelButtonColor:'#6c757d',

            confirmButtonText:
                method === 'PUT'
                    ? 'Yes, Update'
                    : 'Yes, Save',

            cancelButtonText:'Cancel',

            reverseButtons:true

        }).then(function(result){


            /*
            |--------------------------------------------------------------------------
            | CANCEL
            |--------------------------------------------------------------------------
            */

            if(!result.isConfirmed){

                button

                    .prop('disabled', false)

                    .html(

                        method === 'PUT'

                            ? `<i class="fas fa-save"></i>
                               Update Attendance Settings`

                            : `<i class="fas fa-save"></i>
                               Save Attendance Settings`

                    );

                return;

            }


            /*
            |--------------------------------------------------------------------------
            | DATA
            |--------------------------------------------------------------------------
            */

            let formData =
                form.serialize();


            /*
            |--------------------------------------------------------------------------
            | AJAX
            |--------------------------------------------------------------------------
            */

            $.ajax({

                url:url,

                type:'POST',

                data:formData,

                headers:{

                    'X-HTTP-Method-Override': method

                },


                beforeSend:function(){

                    Swal.fire({

                        title:
                            method === 'PUT'
                                ? 'Updating...'
                                : 'Saving...',

                        text:
                            'Please wait.',

                        allowOutsideClick:false,

                        allowEscapeKey:false,

                        showConfirmButton:false,

                        didOpen:()=>{

                            Swal.showLoading();

                        }

                    });

                },


                /*
                |--------------------------------------------------------------------------
                | SUCCESS
                |--------------------------------------------------------------------------
                */

                success:function(response){

                    Swal.fire({

                        icon:
                            response.icon ||
                            'success',

                        title:
                            response.title ||
                            'Success',

                        text:
                            response.message,

                        confirmButtonColor:
                            '#198754'

                    }).then(function(){

                        location.reload();

                    });

                },


                /*
                |--------------------------------------------------------------------------
                | ERROR
                |--------------------------------------------------------------------------
                */

                error:function(xhr){

                    button

                        .prop('disabled', false)

                        .html(

                            method === 'PUT'

                                ? `<i class="fas fa-save"></i>
                                   Update Attendance Settings`

                                : `<i class="fas fa-save"></i>
                                   Save Attendance Settings`

                        );


                    let message =
                        'Something went wrong.';


                    if(xhr.responseJSON){

                        if(
                            xhr.responseJSON.message
                        ){

                            message =
                                xhr.responseJSON.message;

                        }


                        if(
                            xhr.responseJSON.errors
                        ){

                            message =
                                Object.values(
                                    xhr.responseJSON.errors
                                )
                                .flat()
                                .join('<br>');

                        }

                    }


                    Swal.fire({

                        icon:'error',

                        title:'Error',

                        html:message,

                        confirmButtonColor:
                            '#dc3545'

                    });

                }

            });

        });

    });



    /*
    |--------------------------------------------------------------------------
    | EDIT ATTENDANCE SETTING
    |--------------------------------------------------------------------------
    */

    $(document).on(
        'click',
        '.editAttendance',
        function()
    {

        let id =
            $(this).data('id');


        /*
        |--------------------------------------------------------------------------
        | LOADING ALERT
        |--------------------------------------------------------------------------
        */

        Swal.fire({

            title:'Loading...',

            text:
                'Getting attendance setting.',

            allowOutsideClick:false,

            showConfirmButton:false,

            didOpen:()=>{

                Swal.showLoading();

            }

        });


        /*
        |--------------------------------------------------------------------------
        | AJAX
        |--------------------------------------------------------------------------
        */

        $.ajax({

            url:
                "{{ url(
                    '/attendance/settings'
                ) }}" +
                '/' +
                id +
                '/edit',

            type:'GET',


            success:function(response){

                Swal.close();


                let setting =
                    response.setting;


                /*
                |--------------------------------------------------------------------------
                | FILL FORM
                |--------------------------------------------------------------------------
                */

                $('#academic_session_id')
                    .val(
                        setting.academic_session_id
                    );


                $('#term')
                    .val(
                        setting.term
                    );


                $('#number_of_weeks')
                    .val(
                        setting.number_of_weeks
                    );


                $('#school_open_days')
                    .val(
                        setting.school_open_days
                    );


                $('#holiday_days')
                    .val(
                        setting.holiday_days
                    );


                /*
                |--------------------------------------------------------------------------
                | CHANGE FORM MODE
                |--------------------------------------------------------------------------
                */

                $('#formMethod')
                    .val('PUT');


                $('#settingId')
                    .val(setting.id);


                /*
                |--------------------------------------------------------------------------
                | CHANGE TITLE
                |--------------------------------------------------------------------------
                */

                $('#attendanceFormTitle')
                    .html(`

                        <i class="fas fa-edit"></i>

                        Edit Attendance Setting

                    `);


                /*
                |--------------------------------------------------------------------------
                | CHANGE BUTTON
                |--------------------------------------------------------------------------
                */

                $('#saveAttendanceSetting')
                    .html(`

                        <i class="fas fa-save"></i>

                        Update Attendance Settings

                    `);


                /*
                |--------------------------------------------------------------------------
                | SHOW CANCEL
                |--------------------------------------------------------------------------
                */

                $('#cancelEdit')
                    .removeClass('d-none');


                /*
                |--------------------------------------------------------------------------
                | SCROLL TO FORM
                |--------------------------------------------------------------------------
                */

                $('html, body').animate({

                    scrollTop:
                        $('#attendanceSettingForm')
                        .offset()
                        .top - 100

                },500);

            },


            error:function(xhr){

                Swal.fire({

                    icon:'error',

                    title:'Error',

                    text:
                        'Unable to load the attendance setting.'

                });

            }

        });

    });



    /*
    |--------------------------------------------------------------------------
    | CANCEL EDIT
    |--------------------------------------------------------------------------
    */

    $('#cancelEdit').click(function(){

        resetAttendanceForm();

    });



    /*
    |--------------------------------------------------------------------------
    | DELETE ATTENDANCE SETTING
    |--------------------------------------------------------------------------
    */

    $(document).on(
        'click',
        '.deleteAttendance',
        function()
    {

        let id =
            $(this).data('id');


        let name =
            $(this).data('name');


        /*
        |--------------------------------------------------------------------------
        | CONFIRM DELETE
        |--------------------------------------------------------------------------
        */

        Swal.fire({

            title:
                'Delete Attendance Setting?',

            html:

                'You are about to delete:<br><br>' +

                '<strong>' +

                name +

                '</strong><br><br>' +

                'This action cannot be undone.',

            icon:'warning',

            showCancelButton:true,

            confirmButtonColor:'#dc3545',

            cancelButtonColor:'#6c757d',

            confirmButtonText:
                'Yes, Delete',

            cancelButtonText:
                'Cancel',

            reverseButtons:true

        }).then(function(result){


            if(!result.isConfirmed){

                return;

            }


            /*
            |--------------------------------------------------------------------------
            | DELETE AJAX
            |--------------------------------------------------------------------------
            */

            $.ajax({

                url:
                    "{{ url(
                        '/attendance/settings'
                    ) }}" +
                    '/' +
                    id,

                type:'POST',

                data:{

                    _token:
                        "{{ csrf_token() }}",

                    _method:
                        'DELETE'

                },


                beforeSend:function(){

                    Swal.fire({

                        title:'Deleting...',

                        text:
                            'Please wait.',

                        allowOutsideClick:false,

                        showConfirmButton:false,

                        didOpen:()=>{

                            Swal.showLoading();

                        }

                    });

                },


                success:function(response){

                    Swal.fire({

                        icon:'success',

                        title:
                            response.title ||
                            'Deleted',

                        text:
                            response.message,

                        confirmButtonColor:
                            '#198754'

                    }).then(function(){

                        location.reload();

                    });

                },


                error:function(xhr){

                    let message =
                        'Unable to delete the attendance setting.';


                    if(
                        xhr.responseJSON &&
                        xhr.responseJSON.message
                    ){

                        message =
                            xhr.responseJSON.message;

                    }


                    Swal.fire({

                        icon:'error',

                        title:'Error',

                        text:message,

                        confirmButtonColor:
                            '#dc3545'

                    });

                }

            });

        });

    });



    /*
    |--------------------------------------------------------------------------
    | RESET FORM
    |--------------------------------------------------------------------------
    */

    function resetAttendanceForm(){

        $('#attendanceSettingForm')[0]
            .reset();


        /*
        | Keep holiday default at 0
        */

        $('#holiday_days')
            .val(0);


        /*
        | Reset method
        */

        $('#formMethod')
            .val('POST');


        /*
        | Reset ID
        */

        $('#settingId')
            .val('');


        /*
        | Reset title
        */

        $('#attendanceFormTitle')
            .html(`

                <i class="fas fa-cog"></i>

                Create Attendance Setting

            `);


        /*
        | Reset button
        */

        $('#saveAttendanceSetting')
            .html(`

                <i class="fas fa-save"></i>

                Save Attendance Settings

            `);


        /*
        | Hide cancel
        */

        $('#cancelEdit')
            .addClass('d-none');

    }


});

</script>

@endsection