@extends('backend.admin_backend.admin_dashboard')
@section('admin')



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

<style>

body{

    background:#f4f7fb;

}


.card{

    border-radius:15px;

}


.card-header{

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

}


.form-control{

    min-height:46px;

    border-radius:10px;

}


textarea.form-control{

    min-height:100px;

}


.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;

}


/*
|--------------------------------------------------------------------------
| LOGO PREVIEW
|--------------------------------------------------------------------------
*/

.logo-preview-box{

    min-height:150px;

    border:2px dashed #198754;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:15px;

    background:#f8fff9;

}


.logo-preview-box img{

    max-width:180px;

    max-height:130px;

    object-fit:contain;

}

</style>



<div class="container-fluid">


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

    <div class="row mb-1">

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

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

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

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

                        <div>

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

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

                                Report Card Header

                            </h2>

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

                                Manage the school information displayed
                                on the student's report card.

                            </p>

                        </div>


                        <div class="text-end">

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

                                Admin Portal

                            </span>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>



    {{-- =========================================================
        SUCCESS MESSAGE
    ========================================================== --}}

    @if(session('success'))

        <div class="alert alert-success alert-dismissible fade show">

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

            {{ session('success') }}

            <button
                type="button"
                class="btn-close"
                data-bs-dismiss="alert">
            </button>

        </div>

    @endif



    {{-- =========================================================
        ERROR MESSAGE
    ========================================================== --}}

    @if(session('error'))

        <div class="alert alert-danger alert-dismissible fade show">

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

            {{ session('error') }}

            <button
                type="button"
                class="btn-close"
                data-bs-dismiss="alert">
            </button>

        </div>

    @endif



    {{-- =========================================================
        VALIDATION ERRORS
    ========================================================== --}}

    @if($errors->any())

        <div class="alert alert-danger">

            <strong>
                Please correct the following:
            </strong>

            <ul class="mb-0 mt-2">

                @foreach($errors->all() as $error)

                    <li>{{ $error }}</li>

                @endforeach

            </ul>

        </div>

    @endif



    {{-- =========================================================
        RESULTS HEADER FORM
    ========================================================== --}}

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

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

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

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

                School Report Card Information

            </h5>

        </div>


        <div class="card-body">

            {{-- =================================================
                RESULTS HEADER FORM
            ================================================== --}}

            <form
                id="resultsHeaderForm"
                action="{{ route('admin.results.header.save') }}"
                method="POST"
                enctype="multipart/form-data">

                @csrf


                <div class="row">


                    {{-- =================================================
                        SCHOOL NAME
                    ================================================== --}}

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

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

                            School Name

                        </label>

                        <input
                            type="text"
                            name="school_name"
                            class="form-control"
                            placeholder="Enter school name"
                            value="{{ old('school_name', $header->school_name ?? '') }}">

                    </div>


                    {{-- =================================================
                        SCHOOL MOTO
                    ================================================== --}}

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

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

                            School Moto

                        </label>

                        <input
                            type="text"
                            name="school_moto"
                            class="form-control"
                            placeholder="Enter school moto"
                            value="{{ old('school_moto', $header->school_moto ?? '') }}">

                    </div>



                    {{-- =================================================
                        PHONE NUMBER 1
                    ================================================== --}}

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

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

                            Phone Number 1

                        </label>

                        <input
                            type="text"
                            name="phone_number_1"
                            class="form-control"
                            placeholder="Enter phone number"
                            value="{{ old('phone_number_1', $header->phone_number_1 ?? '') }}">

                    </div>



                    {{-- =================================================
                        PHONE NUMBER 2
                    ================================================== --}}

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

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

                            Phone Number 2

                        </label>

                        <input
                            type="text"
                            name="phone_number_2"
                            class="form-control"
                            placeholder="Enter second phone number"
                            value="{{ old('phone_number_2', $header->phone_number_2 ?? '') }}">

                    </div>



                    {{-- =================================================
                        SCHOOL ADDRESS
                    ================================================== --}}

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

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

                            School Address

                        </label>

                        <textarea
                            name="school_address"
                            class="form-control"
                            rows="3"
                            placeholder="Enter school address">{{ old('school_address', $header->school_address ?? '') }}</textarea>

                    </div>



                    {{-- =================================================
                        EMAIL
                    ================================================== --}}

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

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

                            Email Address

                        </label>

                        <input
                            type="email"
                            name="email"
                            class="form-control"
                            placeholder="school@example.com"
                            value="{{ old('email', $header->email ?? '') }}">

                    </div>



                    {{-- =================================================
                        WEBSITE
                    ================================================== --}}

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

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

                            School Website

                        </label>

                        <input
                            type="text"
                            name="website"
                            class="form-control"
                            placeholder="www.school.com"
                            value="{{ old('website', $header->website ?? '') }}">

                    </div>



                    {{-- =================================================
                        SCHOOL LOGO
                    ================================================== --}}

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

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

                            School Logo

                        </label>

                        <input
                            type="file"
                            name="school_logo"
                            id="school_logo"
                            class="form-control"
                            accept="image/png,image/jpeg,image/jpg,image/webp">


                        <small class="text-muted">

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

                        </small>

                    </div>



                    {{-- =================================================
                        LOGO PREVIEW
                    ================================================== --}}

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

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

                            Logo Preview

                        </label>


                        <div
                            class="logo-preview-box"
                            id="logoPreviewBox">


                            @if(!empty($header?->school_logo))

                                <img
                                    src="{{ asset('uploads/school_logos/' . $header->school_logo) }}"
                                    id="logoPreview"
                                    alt="School Logo">


                            @else

                                <div
                                    id="noLogoMessage"
                                    class="text-muted">

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

                                    <br>

                                    No school logo uploaded.

                                </div>

                            @endif

                        </div>

                    </div>

                </div>



                {{-- =================================================
                    SAVE BUTTON
                ================================================== --}}

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

                    <button
                        type="submit"
                        id="saveHeaderButton"
                        class="btn px-5"
                        style="background-color:#198754; color:#fff;">

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

                        <span id="saveHeaderText">

                            {{ $header ? 'Update Header' : 'Save Header' }}

                        </span>

                    </button>

                </div>

            </form>

        </div>

    </div>



    {{-- =========================================================
        CURRENT LOGO MANAGEMENT
    ========================================================== --}}

    @if(!empty($header?->school_logo))

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

            <div class="card-body">

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

                    <div>

                        <h5 class="fw-bold mb-1" style="color:#198754;">

                            <i class="fas fa-image text-success me-2"></i>

                            Current School Logo

                        </h5>

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

                            This logo will be used on the report card.

                        </p>

                    </div>


                    <div>

                        <form
                            action="{{ route('admin.results.header.logo.delete') }}"
                            method="POST"
                            class="delete-logo-form">

                            @csrf

                            @method('DELETE')

                            <button
                                type="button"
                                class="btn btn-danger delete-logo-btn">

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

                                Remove Logo

                            </button>

                        </form>

                    </div>

                </div>

            </div>

        </div>

    @endif


</div>



{{-- =============================================================
    JAVASCRIPT
============================================================= --}}

<script>

document.addEventListener(
    'DOMContentLoaded',
    function(){


        /*
        |--------------------------------------------------------------------------
        | SCHOOL LOGO LIVE PREVIEW
        |--------------------------------------------------------------------------
        |
        | When the administrator selects a logo, we immediately
        | display it inside the preview box before submitting.
        |
        */

        const logoInput =
            document.getElementById('school_logo');

        const previewBox =
            document.getElementById('logoPreviewBox');


        if(logoInput){

            logoInput.addEventListener(
                'change',
                function(){

                    const file =
                        this.files[0];


                    /*
                    |--------------------------------------------------------------------------
                    | MAKE SURE A FILE WAS SELECTED
                    |--------------------------------------------------------------------------
                    */

                    if(!file){

                        return;

                    }


                    /*
                    |--------------------------------------------------------------------------
                    | CREATE IMAGE PREVIEW
                    |--------------------------------------------------------------------------
                    */

                    const reader =
                        new FileReader();


                    reader.onload =
                        function(e){

                            previewBox.innerHTML =

                                '<img ' +

                                'src="' +
                                e.target.result +
                                '" ' +

                                'id="logoPreview" ' +

                                'alt="School Logo">';

                        };


                    reader.readAsDataURL(file);

                }
            );

        }



        /*
        |--------------------------------------------------------------------------
        | RESULTS HEADER FORM
        |--------------------------------------------------------------------------
        |
        | Before saving the report card header, we ask the
        | administrator for confirmation.
        |
        | If the administrator confirms:
        |
        | 1. Show saving spinner.
        | 2. Disable the button.
        | 3. Submit the original form normally.
        |
        */

        const resultsHeaderForm =
            document.getElementById(
                'resultsHeaderForm'
            );


        const saveHeaderButton =
            document.getElementById(
                'saveHeaderButton'
            );


        const saveHeaderText =
            document.getElementById(
                'saveHeaderText'
            );


        if(
            resultsHeaderForm &&
            saveHeaderButton
        ){

            resultsHeaderForm.addEventListener(
                'submit',
                function(e){

                    /*
                    |--------------------------------------------------------------------------
                    | STOP THE FORM TEMPORARILY
                    |--------------------------------------------------------------------------
                    |
                    | We stop the normal submission first so that
                    | SweetAlert can ask for confirmation.
                    |
                    */

                    e.preventDefault();


                    /*
                    |--------------------------------------------------------------------------
                    | SWEETALERT CONFIRMATION
                    |--------------------------------------------------------------------------
                    */

                    Swal.fire({

                        title:
                            'Save Report Card Header?',

                        text:
                            'Are you sure you want to save these school information details?',

                        icon:
                            'question',

                        showCancelButton:
                            true,

                        confirmButtonColor:
                            '#198754',

                        cancelButtonColor:
                            '#6c757d',

                        confirmButtonText:
                            'Yes, Save Header',

                        cancelButtonText:
                            'Cancel'

                    }).then(
                        (result) => {


                            /*
                            |--------------------------------------------------------------------------
                            | USER CONFIRMED
                            |--------------------------------------------------------------------------
                            */

                            if(
                                result.isConfirmed
                            ){

                                /*
                                |--------------------------------------------------------------------------
                                | DISABLE BUTTON
                                |--------------------------------------------------------------------------
                                |
                                | Prevents the administrator from
                                | clicking the button multiple times.
                                |
                                */

                                saveHeaderButton.disabled =
                                    true;


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

                                saveHeaderText.innerHTML =

                                    '<span ' +

                                    'class="spinner-border spinner-border-sm me-2" ' +

                                    'role="status" ' +

                                    'aria-hidden="true">' +

                                    '</span>' +

                                    'Saving Header...';


                                /*
                                |--------------------------------------------------------------------------
                                | SUBMIT ORIGINAL FORM
                                |--------------------------------------------------------------------------
                                |
                                | The controller will now receive the
                                | form exactly as before.
                                |
                                */

                                resultsHeaderForm.submit();

                            }

                        }
                    );

                }
            );

        }



        /*
        |--------------------------------------------------------------------------
        | SWEETALERT LOGO DELETE CONFIRMATION
        |--------------------------------------------------------------------------
        */

        const deleteButton =
            document.querySelector(
                '.delete-logo-btn'
            );


        if(deleteButton){

            deleteButton.addEventListener(
                'click',
                function(){

                    Swal.fire({

                        title:
                            'Remove School Logo?',

                        text:
                            'This will remove the logo from the report card.',

                        icon:
                            'warning',

                        showCancelButton:
                            true,

                        confirmButtonColor:
                            '#dc3545',

                        cancelButtonColor:
                            '#6c757d',

                        confirmButtonText:
                            'Yes, Remove It',

                        cancelButtonText:
                            'Cancel'

                    }).then(
                        (result) => {

                            if(
                                result.isConfirmed
                            ){

                                document
                                    .querySelector(
                                        '.delete-logo-form'
                                    )
                                    .submit();

                            }

                        }
                    );

                }
            );

        }

    }
);

</script>

@endsection