@extends('backend.admin_backend.admin_dashboard')

@section('admin')

<div class="container-fluid">

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

    <div class="row mb-1">

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

            <div class="card border-0 shadow-lg psycho-card">

                <div class="card-body py-4">

                    <div class="d-flex justify-content-between align-items-center flex-wrap">

                        {{-- PAGE TITLE --}}

                        <div>

                            <h2
                                class="fw-bold mb-1"
                                style="font-size:18px; color: #198754;"
                            >

                                <i class="fas fa-calendar-alt me-2"></i>

                                Academic Calendar

                            </h2>

                            <p class="text-muted mb-0">

                                Manage academic sessions, terms,
                                next term dates and school stamp.

                            </p>

                        </div>


                        {{-- ADMIN BADGE --}}

                        <div class="text-end">

                            <span
                                class="badge fs-6 px-3 py-2"
                                style="
                                    background-color: #198754;
                                    color:#fff;
                                    font-weight:bold;
                                "
                            >

                                <i class="fas fa-user-shield me-1"></i>

                                Admin Portal

                            </span>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>



    {{-- =========================================================
        TERM CALENDAR FORM
    ========================================================== --}}

    <div class="card border-0 shadow psycho-card">

        {{-- CARD HEADER --}}

        <div
            class="card-header text-white"
            style="background-color: #198754;"
        >

            <h5
                class="mb-0"
                style="
                    font-weight:bold;
                    color:#fff;
                    font-size:22px;
                "
            >

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

                Term Calendar Settings

            </h5>

        </div>


        <div class="card-body">


            {{-- =================================================
                FORM
            ================================================== --}}

            <form
                id="termCalendarForm"
                enctype="multipart/form-data"
            >

                @csrf


                {{-- =================================================
                    HIDDEN ID
                ================================================== --}}

                <input
                    type="hidden"
                    name="id"
                    id="record_id"
                    value=""
                >


                <div class="row">


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

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

                        <label class="form-label fw-bold">

                            <i class="fas fa-school me-1 text-success"></i>

                            Academic Session

                        </label>


                        <select
                            name="session"
                            id="session"
                            class="form-select"
                            required
                        >

                            <option value="">

                                -- Select Session --

                            </option>


                            @foreach($sessions as $session)

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

                                    @if(
                                        $currentSession &&
                                        $currentSession->name == $session->name
                                    )

                                        selected

                                    @endif
                                >

                                    {{ $session->name }}

                                </option>

                            @endforeach

                        </select>

                    </div>



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

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

                        <label class="form-label fw-bold">

                            <i class="fas fa-list-alt me-1 text-success"></i>

                            Current Term

                        </label>


                        <select
                            name="term"
                            id="term"
                            class="form-select"
                            required
                        >

                            <option value="">

                                -- Select Term --

                            </option>


                            @foreach($terms as $term)

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

                                    @if(
                                        $currentTerm &&
                                        $currentTerm->name == $term->name
                                    )

                                        selected

                                    @endif
                                >

                                    {{ $term->name }}

                                </option>

                            @endforeach

                        </select>

                    </div>



                    {{-- =================================================
                        NEXT TERM BEGINS
                    ================================================== --}}

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

                        <label class="form-label fw-bold">

                            <i class="fas fa-calendar-day me-1 text-success"></i>

                            Next Term Begins

                        </label>


                        <input
                            type="date"
                            name="next_term_begins"
                            id="next_term_begins"
                            class="form-control"
                            required
                        >

                    </div>


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

                        <label class="form-label fw-bold">

                            <i class="fas fa-calendar-day me-1 text-success"></i>

                            Term End

                        </label>


                        <input
                            type="date"
                            name="term_ended"
                            id="term_ended"
                            class="form-control"
                            required
                        >

                    </div>



                    {{-- =================================================
                        SCHOOL STAMP
                    ================================================== --}}

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

                        <label class="form-label fw-bold">

                            <i class="fas fa-stamp me-1 text-success"></i>

                            School Stamp

                        </label>


                        <input
                            type="file"
                            name="school_stamp"
                            id="school_stamp"
                            class="form-control"
                            accept=".jpg,.jpeg,.png,.webp"
                        >


                        <small class="text-muted">

                            Allowed: JPG, JPEG, PNG, WEBP.
                            Maximum size: 2MB.

                        </small>

                    </div>



                    {{-- =================================================
                        STAMP PREVIEW
                    ================================================== --}}

                    <div
                        class="col-lg-6 col-md-6 mb-3"
                        id="stampPreviewContainer"
                        style="display:none;"
                    >

                        <label class="form-label fw-bold">

                            Current School Stamp

                        </label>


                        <div>

                            <img
                                id="stampPreview"
                                src=""
                                alt="School Stamp"
                                class="stamp-preview"
                            >

                        </div>

                    </div>

                </div>



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

                <div class="text-start mt-3">


                    {{-- CANCEL EDIT BUTTON --}}

                    <button
                        type="button"
                        id="cancelEditBtn"
                        class="btn btn-secondary px-4 me-2"
                        style="display:none;"
                    >

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

                        Cancel

                    </button>


                    {{-- SAVE BUTTON --}}

                    <button
                        type="submit"
                        id="saveCalendarBtn"
                        class="btn btn-success px-5"
                    >

                        <span id="saveButtonNormal">

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

                            Save Calendar

                        </span>


                        {{-- LOADING STATE --}}

                        <span
                            id="saveButtonLoading"
                            style="display:none;"
                        >

                            <span
                                class="spinner-border spinner-border-sm me-2"
                                role="status"
                            ></span>

                            Saving...

                        </span>

                    </button>

                </div>

            </form>

        </div>

    </div>



    {{-- =========================================================
        SAVED RECORDS
    ========================================================== --}}

    <div class="card border-0 shadow psycho-card mt-4">

        <div
            class="card-header text-white"
            style="background-color:#198754;"
        >

            <h5
                class="mb-0"
                style="
                    font-weight:bold;
                    color:#fff;
                    font-size:18px;
                "
            >

                <i class="fas fa-table me-2"></i>

                Saved Academic Calendar

            </h5>

        </div>


        <div class="card-body">

            <div
                class="table-responsive"
                id="calendarTableContainer"
            >

                <table
                    class="table table-bordered table-hover align-middle"
                    id="calendarTable"
                >

                    <thead class="table-success text-center">

                        <tr>

                            <th>#</th>

                            <th>Session</th>

                            <th>Term</th>

                            <th>Term Ended</th>

                            <th>Next Term Begins</th>

                            <th>School Stamp</th>

                            <th>Action</th>

                        </tr>

                    </thead>


                    <tbody class="text-center">

                        @forelse($records as $key => $record)

                            <tr id="record-row-{{ $record->id }}">

                                {{-- NUMBER --}}

                                <td>

                                    {{ $key + 1 }}

                                </td>


                                {{-- SESSION --}}

                                <td>

                                    {{ $record->session }}

                                </td>


                                {{-- TERM --}}

                                <td>

                                    {{ $record->term }}

                                </td>

                                {{-- TERM END --}}

<td>

    @if($record->term_ended)

        {{ $record->term_ended->format('l, jS F, Y') }}

    @else

        <span class="text-muted">
            Not Set
        </span>

    @endif

</td>


                                {{-- NEXT TERM DATE --}}

<td>

    @if($record->next_term_begins)

        {{ $record->next_term_begins->format('l, jS F, Y') }}

    @else

        <span class="text-muted">
            Not Set
        </span>

    @endif

</td>


                                {{-- SCHOOL STAMP --}}

                                <td>

                                    @if($record->school_stamp)

                                        <img
                                            src="{{ asset('stamp_images/' . $record->school_stamp) }}"
                                            class="table-stamp"
                                            alt="School Stamp"
                                        >

                                    @else

                                        <span class="text-muted">

                                            No Stamp

                                        </span>

                                    @endif

                                </td>


                                {{-- ACTIONS --}}

                                <td>

                                    {{-- EDIT --}}

                                    <button
                                        type="button"
                                        class="btn btn-primary btn-sm editBtn"
                                        data-id="{{ $record->id }}"
                                    >

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

                                        Edit

                                    </button>


                                    {{-- DELETE --}}

                                    <button
                                        type="button"
                                        class="btn btn-danger btn-sm deleteBtn"
                                        data-id="{{ $record->id }}"
                                    >

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

                                        Delete

                                    </button>

                                </td>

                            </tr>

                        @empty

                            <tr id="emptyRow">

                                <td
                                    colspan="6"
                                    class="py-4 text-muted"
                                >

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

                                    <br>

                                    No academic calendar records found.

                                </td>

                            </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>



{{-- =============================================================
    PAGE CSS
============================================================= --}}

<style>

body{

    background:#f4f7fb;

}


.psycho-card{

    border-radius:15px;

}


.card-header{

    border-radius:15px 15px 0 0 !important;

}


.form-control,
.form-select{

    height:46px;

    border-radius:10px;

}


.btn{

    border-radius:10px;

}


.shadow-lg{

    box-shadow:
        0 10px 30px rgba(0,0,0,.08)
        !important;

}


.shadow{

    box-shadow:
        0 5px 20px rgba(0,0,0,.08)
        !important;

}


/*
|--------------------------------------------------------------------------
| SCHOOL STAMP PREVIEW
|--------------------------------------------------------------------------
*/

.stamp-preview{

    width:120px;

    height:120px;

    object-fit:contain;

    border:1px solid #ddd;

    border-radius:10px;

    padding:5px;

    background:#fff;

}


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

.table-stamp{

    width:60px;

    height:60px;

    object-fit:contain;

}


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

#calendarTable th{

    white-space:nowrap;

}


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

@media(max-width:768px){

    .card-body{

        padding:15px;

    }


    #calendarTable{

        font-size:13px;

    }

}

</style>



{{-- =============================================================
    JAVASCRIPT / AJAX
============================================================= --}}

<script>

$(document).ready(function(){


    /*
    |--------------------------------------------------------------------------
    | CSRF TOKEN
    |--------------------------------------------------------------------------
    */

    $.ajaxSetup({

        headers:{

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

        }

    });


    /*
    |--------------------------------------------------------------------------
    | FORM ELEMENTS
    |--------------------------------------------------------------------------
    */

    const form =
        $('#termCalendarForm');

    const saveButton =
        $('#saveCalendarBtn');

    const normalButton =
        $('#saveButtonNormal');

    const loadingButton =
        $('#saveButtonLoading');

    const recordId =
        $('#record_id');

    const cancelButton =
        $('#cancelEditBtn');



    /*
    |--------------------------------------------------------------------------
    | SAVE / UPDATE FORM
    |--------------------------------------------------------------------------
    */

    form.on('submit', function(e){

        e.preventDefault();


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

        Swal.fire({

            title:
                recordId.val()
                    ? 'Update Calendar?'
                    : 'Save Calendar?',

            text:
                recordId.val()
                    ? 'Do you want to update this academic calendar record?'
                    : 'Do you want to save this academic calendar record?',

            icon:'question',

            showCancelButton:true,

            confirmButtonColor:'#198754',

            cancelButtonColor:'#6c757d',

            confirmButtonText:
                recordId.val()
                    ? 'Yes, Update'
                    : 'Yes, Save',

            cancelButtonText:'Cancel'

        }).then(function(result){


            /*
            |--------------------------------------------------------------------------
            | USER CANCELLED
            |--------------------------------------------------------------------------
            */

            if(!result.isConfirmed){

                return;

            }


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

            saveButton.prop(
                'disabled',
                true
            );


            /*
            |--------------------------------------------------------------------------
            | SHOW SPINNER
            |--------------------------------------------------------------------------
            */

            normalButton.hide();

            loadingButton.show();


            /*
            |--------------------------------------------------------------------------
            | CREATE FORM DATA
            |--------------------------------------------------------------------------
            */

            let formData =
                new FormData(
                    document.getElementById(
                        'termCalendarForm'
                    )
                );


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

            $.ajax({

                url:
                    "{{ route('admin.term.calendar.save') }}",

                method:'POST',

                data:formData,

                processData:false,

                contentType:false,


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

                success:function(response){


                    /*
                    |--------------------------------------------------------------------------
                    | RESTORE BUTTON
                    |--------------------------------------------------------------------------
                    */

                    saveButton.prop(
                        'disabled',
                        false
                    );

                    normalButton.show();

                    loadingButton.hide();


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

                    Swal.fire({

                        icon:'success',

                        title:'Success!',

                        text:response.message,

                        confirmButtonColor:'#198754'

                    }).then(function(){

                        /*
                        |--------------------------------------------------------------------------
                        | RELOAD
                        |--------------------------------------------------------------------------
                        |
                        | This ensures the table contains the
                        | latest image from public/stamp_images.
                        |
                        */

                        location.reload();

                    });

                },


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

                error:function(xhr){


                    /*
                    |--------------------------------------------------------------------------
                    | RESTORE BUTTON
                    |--------------------------------------------------------------------------
                    */

                    saveButton.prop(
                        'disabled',
                        false
                    );

                    normalButton.show();

                    loadingButton.hide();


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

                    let message =
                        'Something went wrong. Please try again.';


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

                        message =
                            xhr.responseJSON.message;

                    }


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

                    Swal.fire({

                        icon:'error',

                        title:'Error',

                        text:message,

                        confirmButtonColor:'#198754'

                    });

                }

            });

        });

    });



    /*
    |--------------------------------------------------------------------------
    | EDIT BUTTON
    |--------------------------------------------------------------------------
    */

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


        /*
        |--------------------------------------------------------------------------
        | GET RECORD ID
        |--------------------------------------------------------------------------
        */

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


        /*
        |--------------------------------------------------------------------------
        | SHOW LOADING
        |--------------------------------------------------------------------------
        */

        Swal.fire({

            title:'Loading...',

            text:'Getting calendar information.',

            allowOutsideClick:false,

            didOpen:function(){

                Swal.showLoading();

            }

        });


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

        $.ajax({

            url:
                "{{ url('/term-calendar') }}/"
                + id
                + "/edit",

            method:'GET',


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

            success:function(response){


                Swal.close();


                /*
                |--------------------------------------------------------------------------
                | PUT ID INTO FORM
                |--------------------------------------------------------------------------
                */

                recordId.val(
                    response.record.id
                );


                /*
                |--------------------------------------------------------------------------
                | PUT SESSION
                |--------------------------------------------------------------------------
                */

                $('#session').val(
                    response.record.session
                );


                /*
                |--------------------------------------------------------------------------
                | PUT TERM
                |--------------------------------------------------------------------------
                */

                $('#term').val(
                    response.record.term
                );


               /*
                |--------------------------------------------------------------------------
                | PUT TERM ENDED DATE
                |--------------------------------------------------------------------------
                */

                $('#term_ended').val(
                    response.record.term_ended
                );



                /*
                |--------------------------------------------------------------------------
                | PUT DATE
                |--------------------------------------------------------------------------
                */

                $('#next_term_begins').val(
                    response.record.next_term_begins
                );


                /*
                |--------------------------------------------------------------------------
                | SHOW EXISTING STAMP
                |--------------------------------------------------------------------------
                */

                if(
                    response.record.school_stamp
                ){

                    $('#stampPreview')
                        .attr(
                            'src',
                            response.record.school_stamp
                        );

                    $('#stampPreviewContainer')
                        .show();

                }
                else{

                    $('#stampPreviewContainer')
                        .hide();

                }


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

                normalButton.html(

                    '<i class="fas fa-edit me-2"></i>' +
                    'Update Calendar'

                );


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

                cancelButton.show();


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

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

                    scrollTop:
                        form.offset().top - 100

                },500);

            },


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

            error:function(){

                Swal.close();


                Swal.fire({

                    icon:'error',

                    title:'Error',

                    text:
                        'Unable to load the calendar record.',

                    confirmButtonColor:'#198754'

                });

            }

        });

    });



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

    cancelButton.on(
        'click',
        function()
    {


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

        form[0].reset();


        /*
        |--------------------------------------------------------------------------
        | CLEAR ID
        |--------------------------------------------------------------------------
        */

        recordId.val('');


        /*
        |--------------------------------------------------------------------------
        | HIDE STAMP PREVIEW
        |--------------------------------------------------------------------------
        */

        $('#stampPreviewContainer')
            .hide();


        /*
        |--------------------------------------------------------------------------
        | RESTORE CURRENT SESSION
        |--------------------------------------------------------------------------
        */

        @if($currentSession)

            $('#session').val(
                @json($currentSession->name)
            );

        @endif


        /*
        |--------------------------------------------------------------------------
        | RESTORE CURRENT TERM
        |--------------------------------------------------------------------------
        */

        @if($currentTerm)

            $('#term').val(
                @json($currentTerm->name)
            );

        @endif


        /*
        |--------------------------------------------------------------------------
        | RESTORE BUTTON
        |--------------------------------------------------------------------------
        */

        normalButton.html(

            '<i class="fas fa-save me-2"></i>' +
            'Save Calendar'

        );


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

        cancelButton.hide();

    });



    /*
    |--------------------------------------------------------------------------
    | DELETE BUTTON
    |--------------------------------------------------------------------------
    */

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


        /*
        |--------------------------------------------------------------------------
        | GET ID
        |--------------------------------------------------------------------------
        */

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


        /*
        |--------------------------------------------------------------------------
        | GET TABLE ROW
        |--------------------------------------------------------------------------
        */

        let row =
            $('#record-row-' + id);


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

        Swal.fire({

            title:'Delete Calendar Record?',

            text:
                'The calendar record and its school stamp will be permanently deleted.',

            icon:'warning',

            showCancelButton:true,

            confirmButtonColor:'#dc3545',

            cancelButtonColor:'#6c757d',

            confirmButtonText:'Yes, Delete',

            cancelButtonText:'Cancel'

        }).then(function(result){


            if(!result.isConfirmed){

                return;

            }


            /*
            |--------------------------------------------------------------------------
            | SHOW LOADING
            |--------------------------------------------------------------------------
            */

            Swal.fire({

                title:'Deleting...',

                text:'Please wait.',

                allowOutsideClick:false,

                didOpen:function(){

                    Swal.showLoading();

                }

            });


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

            $.ajax({

                url:
                    "{{ url('/term-calendar') }}/"
                    + id,

                method:'DELETE',


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

                success:function(response){


                    /*
                    |--------------------------------------------------------------------------
                    | REMOVE ROW
                    |--------------------------------------------------------------------------
                    */

                    row.fadeOut(
                        400,
                        function(){

                            $(this).remove();

                        }
                    );


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

                    Swal.fire({

                        icon:'success',

                        title:'Deleted!',

                        text:
                            response.message,

                        confirmButtonColor:'#198754'

                    });

                },


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

                error:function(){

                    Swal.fire({

                        icon:'error',

                        title:'Error',

                        text:
                            'Unable to delete this record.',

                        confirmButtonColor:'#198754'

                    });

                }

            });

        });

    });



    /*
    |--------------------------------------------------------------------------
    | SCHOOL STAMP FILE PREVIEW
    |--------------------------------------------------------------------------
    |
    | When the administrator selects a new image,
    | preview it immediately before saving.
    |
    */

    $('#school_stamp').on(
        'change',
        function(event)
    {

        /*
        |--------------------------------------------------------------------------
        | GET SELECTED FILE
        |--------------------------------------------------------------------------
        */

        let file =
            event.target.files[0];


        /*
        |--------------------------------------------------------------------------
        | STOP IF NO FILE
        |--------------------------------------------------------------------------
        */

        if(!file){

            return;

        }


        /*
        |--------------------------------------------------------------------------
        | CREATE TEMPORARY IMAGE URL
        |--------------------------------------------------------------------------
        */

        let imageUrl =
            URL.createObjectURL(file);


        /*
        |--------------------------------------------------------------------------
        | SHOW PREVIEW
        |--------------------------------------------------------------------------
        */

        $('#stampPreview')
            .attr(
                'src',
                imageUrl
            );

        $('#stampPreviewContainer')
            .show();

    });

});

</script>


@endsection