@extends('layouts.master')

@section('title', 'Teaching Load')

@section('content')

@include('layouts.header')
@include('layouts.title')


<section class="wrapper bg-light">

    <div class="container-fluid py-10 px-lg-10">


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

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

            <div>

                <h3 class="text-primary fw-bold mb-1">

                    Teaching Load

                </h3>

                <div class="text-muted">

                    {{ $faculty->faculty_title ?? '' }}
                    {{ $faculty->faculty_firstname ?? '' }}
                    {{ $faculty->faculty_lastname ?? '' }}

                </div>

            </div>


            <button
                type="button"
                class="btn btn-primary"
                data-bs-toggle="modal"
                data-bs-target="#createTeachingLoadModal">

                <i class="uil uil-plus"></i>

                Create Teaching Load

            </button>

        </div>



        {{-- ================================================= --}}
        {{-- EMPLOYEE CONTRACT --}}
        {{-- ================================================= --}}

        <div class="card mb-5">

            <div class="card-header bg-light">

                <strong>
                    Employee Contract
                </strong>

            </div>


            <div class="card-body">

                @forelse($fcontracts as $contract)

                    <div class="row g-3 align-items-center mb-3">

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

                            <div class="text-muted small">
                                Contract ID
                            </div>

                            <strong>
                                {{ $contract->fcontract_id }}
                            </strong>

                        </div>


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

                            <div class="text-muted small">
                                Start Date
                            </div>

                            <strong>
                                {{ $contract->fcontract_start_date ?? '-' }}
                            </strong>

                        </div>


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

                            <div class="text-muted small">
                                End Date
                            </div>

                            <strong>
                                {{ $contract->fcontract_end_date ?? '-' }}
                            </strong>

                        </div>


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

                            <div class="text-muted small">
                                Status
                            </div>

                            <span class="badge bg-soft-success text-success">

                                {{ $contract->fcontract_status }}

                            </span>

                        </div>

                    </div>


                    @if(!$loop->last)

                        <hr>

                    @endif


                @empty

                    <div class="alert alert-warning mb-0">

                        Employee Contract not found.

                    </div>

                @endforelse

            </div>

        </div>



        {{-- ================================================= --}}
        {{-- FILTER --}}
        {{-- ================================================= --}}

        <div class="card mb-5">

            <div class="card-body">


                <form
                    method="GET"
                    action="{{ route('teachingload.list') }}">


                    <div class="row g-3 align-items-end">


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

                            <label class="form-label">
                                Academic Year
                            </label>

                            <select
                                name="year"
                                class="form-select">

                                <option value="">
                                    All
                                </option>

                                @foreach($yearOptions as $year)

                                    <option
                                        value="{{ $year }}"
                                        {{ request('year') == $year ? 'selected' : '' }}>

                                        {{ $year }}

                                    </option>

                                @endforeach

                            </select>

                        </div>


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

                            <label class="form-label">
                                Semester
                            </label>

                            <select
                                name="semester"
                                class="form-select">

                                <option value="">
                                    All
                                </option>

                                @foreach([1,2,3] as $semester)

                                    <option
                                        value="{{ $semester }}"
                                        {{ request('semester') == $semester ? 'selected' : '' }}>

                                        Semester {{ $semester }}

                                    </option>

                                @endforeach

                            </select>

                        </div>


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

                            <label class="form-label">
                                Status
                            </label>

                            <select
                                name="status"
                                class="form-select">

                                <option value="">
                                    All
                                </option>

                                @foreach([
                                    'Draft',
                                    'Pending',
                                    'Waiting',
                                    'Rejected',
                                    'Approved'
                                ] as $status)

                                    <option
                                        value="{{ $status }}"
                                        {{ request('status') == $status ? 'selected' : '' }}>

                                        {{ $status }}

                                    </option>

                                @endforeach

                            </select>

                        </div>


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

                            <button
                                type="submit"
                                class="btn btn-primary">

                                Search

                            </button>

                            <a
                                href="{{ route('teachingload.list') }}"
                                class="btn btn-light">

                                Clear

                            </a>

                        </div>


                    </div>


                </form>


            </div>

        </div>



        {{-- ================================================= --}}
        {{-- LIST --}}
        {{-- ================================================= --}}

        <div class="card">

            <div class="card-body">


                <div class="table-responsive">

                    <table class="table table-bordered align-middle">

                        <thead class="table-light">

                            <tr>

                                <th width="60">
                                    No.
                                </th>

                                <th>
                                    Academic Year
                                </th>

                                <th>
                                    Semester
                                </th>

                                <th>
                                    Contract
                                </th>

                                <th>
                                    Workload Arrangement
                                </th>

                                <th>
                                    Teaching Load Status
                                </th>

                                <th width="160">
                                    Action
                                </th>

                            </tr>

                        </thead>


                        <tbody>


                            @forelse($teachingLoads as $key => $row)


                                <tr>


                                    <td>
                                        {{ $key + 1 }}
                                    </td>


                                    <td>

                                        {{ $row->teaching_load_year }}

                                    </td>


                                    <td>

                                        Semester
                                        {{ $row->teaching_load_semester }}

                                    </td>


                                    <td>

                                        @if($row->arrangement_id)

                                            <span class="badge bg-soft-primary text-primary">

                                                Administrative Position

                                            </span>

                                            <div class="small mt-1">

                                                {{
                                                    $row->admin_position_name
                                                    ?? '-'
                                                }}

                                            </div>

                                        @else

                                            <span class="badge bg-soft-secondary text-dark">

                                                Employee Contract

                                            </span>

                                        @endif

                                    </td>


                                    <td>

                                        @if($row->arrangement_id)

                                            <div>

                                                {{
                                                    $row->adposition_type_name
                                                    ?? '-'
                                                }}

                                            </div>


                                            @if($row->arrangement_status)

                                                <small class="text-muted">

                                                    Status :
                                                    {{ $row->arrangement_status }}

                                                </small>

                                            @endif

                                        @else

                                            -

                                        @endif

                                    </td>


                                    <td>

                                        @php

                                            $status =
                                                $row->teaching_load_status
                                                ?? 'Draft';

                                        @endphp


                                        @if($status == 'Approved')

                                            <span class="badge bg-soft-success text-success">
                                                Approved
                                            </span>

                                        @elseif($status == 'Rejected')

                                            <span class="badge bg-soft-danger text-danger">
                                                Rejected
                                            </span>

                                        @elseif(
                                            $status == 'Pending'
                                            ||
                                            $status == 'Waiting'
                                        )

                                            <span class="badge bg-soft-warning text-warning">
                                                {{ $status }}
                                            </span>

                                        @else

                                            <span class="badge bg-soft-secondary text-dark">
                                                Draft
                                            </span>

                                        @endif

                                    </td>


                                    <td align="center">


                                        {{-- ===================================================== --}}
                                        {{-- EDIT --}}
                                        {{-- แก้ได้เฉพาะ Draft / Rejected --}}
                                        {{-- ===================================================== --}}

                                        @if(
                                            in_array(
                                                $row->teaching_load_status,
                                                [
                                                    'Draft',
                                                    'Rejected'
                                                ]
                                            )
                                        )

                                            <a
                                                href="{{ route(
                                                    'teachingload.form',
                                                    $row->teaching_load_id
                                                ) }}"
                                                class="btn btn-circle btn-blue btn-sm"
                                                title="Edit">

                                                <i class="uil uil-pen"></i>

                                            </a>

                                        @endif


                                        {{-- ===================================================== --}}
                                        {{-- VIEW --}}
                                        {{-- แสดงตลอดทุก Status --}}
                                        {{-- ===================================================== --}}

                                        <a
                                            href="{{ route(
                                                'teachingload.view',
                                                $row->teaching_load_id
                                            ) }}"
                                            class="btn btn-circle btn-green btn-sm"
                                            title="View">

                                            <i class="uil uil-eye"></i>

                                        </a>



                                        


                                    </td>


                                </tr>


                            @empty


                                <tr>

                                    <td
                                        colspan="7"
                                        class="text-center text-muted py-5">

                                        No Teaching Load found.

                                    </td>

                                </tr>


                            @endforelse


                        </tbody>

                    </table>

                </div>


            </div>

        </div>


    </div>

</section>



{{-- ========================================================= --}}
{{-- CREATE MODAL --}}
{{-- ========================================================= --}}

<div
    class="modal fade"
    id="createTeachingLoadModal"
    tabindex="-1">

    <div class="modal-dialog">

        <div class="modal-content">

            <form
                method="POST"
                action="{{ route('teachingload.create') }}">

                @csrf


                <div class="modal-header">

                    <h5 class="modal-title">
                        Create Teaching Load
                    </h5>

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

                </div>


                <div class="modal-body">


                    {{-- Academic Year --}}

                    <div class="mb-4">

                        <label class="form-label">
                            Academic Year
                        </label>


                        <select
                            name="teaching_load_year"
                            id="teachingLoadYear"
                            class="form-select"
                            required>

                            <option value="">
                                Select Academic Year
                            </option>


                            @foreach($yearOptions as $year)

                                <option value="{{ $year }}">

                                    {{ $year }}

                                </option>

                            @endforeach

                        </select>

                    </div>


                    {{-- Semester --}}

                    <div class="mb-4">

                        <label class="form-label">
                            Semester
                        </label>


                        <select
                            name="teaching_load_semester"
                            id="teachingLoadSemester"
                            class="form-select"
                            required>

                            <option value="">
                                Select Semester
                            </option>

                        </select>

                    </div>


                    <div class="alert alert-light border mb-0">

                        Employee Contract will be detected automatically.

                        <br>

                        If an approved Administrative Position arrangement
                        exists for the selected academic year and semester,
                        it will also be linked automatically.

                    </div>


                </div>


                <div class="modal-footer">

                    <button
                        type="button"
                        class="btn btn-light"
                        data-bs-dismiss="modal">

                        Cancel

                    </button>


                    <button
                        type="submit"
                        class="btn btn-primary">

                        Continue

                    </button>

                </div>

            </form>

        </div>

    </div>

</div>
<script>

    //=========================================================
    // Year / Semester ที่สามารถสร้าง Teaching Load ได้
    //=========================================================

    const teachingLoadAvailable =
        @json($available);


    //=========================================================
    // Teaching Load ที่เคยสร้างไปแล้ว
    //=========================================================

    const existingTeachingLoads =
        @json($existingTeachingLoads);


    //=========================================================
    // Element
    //=========================================================

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


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


    //=========================================================
    // Load Semester ตาม Academic Year
    //=========================================================

    function loadTeachingLoadSemester(year)
    {

        // Reset Semester ก่อน

        teachingLoadSemester.innerHTML =
            '<option value="">Select Semester</option>';


        //=====================================================
        // หา Semester ที่ใช้ได้ของ Year ที่เลือก
        //=====================================================

        teachingLoadAvailable.forEach(
            function(item) {

                if (
                    String(item.year)
                    ===
                    String(year)
                ) {

                    //=========================================
                    // เช็กว่า Year + Semester นี้
                    // เคยสร้าง Teaching Load แล้วหรือยัง
                    //=========================================

                    const existing =
                        existingTeachingLoads.find(
                            function(row) {

                                return (

                                    String(
                                        row.teaching_load_year
                                    )
                                    ===
                                    String(item.year)

                                    &&

                                    String(
                                        row.teaching_load_semester
                                    )
                                    ===
                                    String(item.semester)

                                );

                            }
                        );


                    //=========================================
                    // สร้าง Option
                    //=========================================

                    const option =
                        document.createElement(
                            'option'
                        );


                    option.value =
                        item.semester;


                    //=========================================
                    // ถ้ามี Teaching Load อยู่แล้ว
                    //=========================================

                    if (existing) {

                        option.textContent =
                            'Semester '
                            + item.semester
                            + ' - Already Created ('
                            + existing.teaching_load_status
                            + ')';


                        // ห้ามเลือกซ้ำ

                        option.disabled =
                            true;

                    }


                    //=========================================
                    // ถ้ายังไม่เคยสร้าง
                    //=========================================

                    else {

                        option.textContent =
                            'Semester '
                            + item.semester;

                    }


                    //=========================================
                    // ใส่เข้า Select
                    //=========================================

                    teachingLoadSemester
                        .appendChild(
                            option
                        );

                }

            }
        );

    }


    //=========================================================
    // เมื่อเลือก Academic Year
    //=========================================================

    teachingLoadYear
        ?.addEventListener(
            'change',
            function() {

                loadTeachingLoadSemester(
                    this.value
                );

            }
        );

</script>

@endsection