@extends('layouts.master')
@section('title', 'All Request')

@section('style')

    <style>

        /* checkbox ปกติ */
        .form-check-input[type="checkbox"]{
            width: 20px;
            height: 20px;
            border: 2px solid #4b5563;
            cursor: pointer;
            box-shadow: none;
        }

        /* hover */
        .form-check-input[type="checkbox"]:hover{
            border-color: #111827;
        }

        /* checked */
        .form-check-input[type="checkbox"]:checked{
            background-color: #2563eb;
            border-color: #1d4ed8;
        }

        /* focus */
        .form-check-input:focus{
            box-shadow: 0 0 0 0.15rem rgba(37, 99, 235, 0.25);
        }

    </style>

@endsection

@section('script')

<script>

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

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


        if (checkAll) {

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

                    const checkboxes =
                        document.querySelectorAll(
                            'input[name="ids[]"]:not(:disabled)'
                        );


                    checkboxes.forEach(
                        function (checkbox) {

                            checkbox.checked =
                                checkAll.checked;

                        }
                    );

                }
            );

        }

    }
);


function confirmSubmitDecisions()
{
    return confirm(
        'Are you sure you want to submit the selected decisions? '
        + 'Once submitted, the decisions can no longer be changed.'
    );
}

</script>

@endsection

@section('content')

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


    <section class="wrapper bg-light">
        <div class="container py-15 py-md-17">
            <div class="col-md-12">
                <h5 class="display-1 mb-3" style="font-size: 30px">@yield('title')</h5>
                <p class="lead fs-lg pe-lg-15 pe-xxl-12"></p>
            </div>
            <div class="col-lg-12">
                <div class="blog single">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex align-items-center gap-2 flex-wrap">

                                <ul class="nav nav-tabs nav-pills">
                                    <li class="nav-item"> 
                                                        <!-- <a class="nav-link active" data-bs-toggle="tab" href="#tab1-1">
                                                        <i class="uil uil-phone-volume pe-1"></i>
                                                        <span>Tab 1</span>
                                                        </a> -->

                                        <a class="btn btn-sm btn-outline-primary rounded-pill me-2 "  href="{{ url('/allrequest') }}">
                                            Workload Arrangement for Administrative Position
                                        </a>
                                        </li>
                                        <li class="nav-item"> 
                                        <a class="btn btn-sm btn-outline-primary rounded-pill me-2 active"  href="{{ url('/allrequestteaching') }}">
                                            Teaching Load
                                        </a>
                                    </li>
                                                    
                                </ul>
                                <hr style="border: 0; height: 4px; background-color: #0d6efd; opacity: 1;"/>
                                <div class="col-lg-12">
                                    <form method="get" action="{{ url('/allrequestteaching') }}" class="d-flex gap-2 flex-wrap mb-0">
                                        <select class="form-select" name="year" style="width: 200px;" onchange="this.form.submit()">
                                            <option value="">-- All Year --</option>
                                            @foreach ($academic_year as $item)
                                                <option value="{{ $item->academic_name }}"
                                                    {{ request('year') == $item->academic_name ? 'selected' : '' }}>
                                                    {{ $item->academic_name }}
                                                </option>
                                            @endforeach
                                        </select>

                                        <select class="form-select" name="school" style="width: 200px;" onchange="this.form.submit()">
                                            <option value="">-- All School --</option>
                                            @foreach ($school as $item)
                                                <option value="{{ $item->school_id }}"
                                                    {{ request('school') == $item->school_id ? 'selected' : '' }}>
                                                    {{ $item->school_name }}
                                                </option>
                                            @endforeach
                                        </select>

                                        <select class="form-select" name="faculty" style="width: 250px;" onchange="this.form.submit()">
                                            <option value="">-- All Faculty --</option>
                                            @foreach ($faculty as $item)
                                                <option value="{{ $item->faculty_userid }}"
                                                    {{ request('faculty') == $item->faculty_userid ? 'selected' : '' }}>
                                                    {{ $item->faculty_title }} {{ $item->faculty_firstname }} {{ $item->faculty_lastname }}
                                                </option>
                                            @endforeach
                                        </select>


                                        <select
                                            class="form-select"
                                            name="status"
                                            style="width: 240px;"
                                            onchange="this.form.submit()">


                                            <option value="">

                                                -- Current Tasks --

                                            </option>


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

                                                Pending Review

                                            </option>


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

                                                Reviewed - Ready to Submit

                                            </option>


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

                                                Submitted - Approved

                                            </option>


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

                                                Submitted - Rejected

                                            </option>


                                        </select>

                                    </form>   
                                </div>
                               

                            </div>

                            <hr style="border: 0; height: 4px; background-color: #0d6efd; opacity: 1;"/>
                            <!-- <div class="alert alert-warning alert-icon" role="alert">
                                <i class="uil uil-exclamation-triangle"></i> 
                                Step 1: Review each contract individually by clicking the 'View' icon. <br>
                                Step 2: Check the boxes for verified entries and <a href="#" class="alert-link hover alert-danger">proceed to the next stage</a>.
                            </div> -->
                            <div
                                class="alert alert-warning alert-icon"
                                role="alert">

                                <i class="uil uil-exclamation-triangle"></i>


                                <strong>Step 1:</strong>

                                Open each request and review the details.

                                <br>


                                <strong>Step 2:</strong>

                                Select either

                                <strong>
                                    Recommend Approval
                                </strong>

                                or

                                <strong>
                                    Recommend Rejection
                                </strong>.

                                <br>


                                <strong>Step 3:</strong>

                                Reviewed requests will become selectable.

                                Select the requests you are ready to finalize
                                and click

                                <strong>
                                    Submit Selected Decisions
                                </strong>.


                            </div>
                            <div class="table-responsive">
                                <form method="POST" action="{{ route('workflow.submitReviewed') }}">

                                    @csrf
                                    <table id="example" class="table datatable">
                                        <thead>
                                            <tr>
                                                <th style="width:5%">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" id="checkAll">
                                                    </div>
                                                </th>
                                                <th class="p-1" style="width: 5%">No.</th>
                                                <th class="p-1" >Details</th>
                                                <th class="p-1" >Faculty Member's Name</th>
                                                <th class="p-1">Academic Year</th>
                                                <th class="p-1" >Status</th>
                                                <th class="p-1" style="width: 10%">Manage</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($requests as $key => $item)
                                                <tr>
                                                    <td>
                                                        @if($item->flow_status == 'Waiting')
                                                            <div class="form-check">
                                                                <input 
                                                                    class="form-check-input" 
                                                                    type="checkbox" 
                                                                    name="ids[]" 
                                                                    value="{{ $item->flow_id }}"
                                                                    id="check_{{ $item->flow_id }}">
                                                            </div>
                                                        @endif
                                                    </td>
                                                    <td>{{ ++$key }}</td>
                                                    <td>Teaching Load</td>
                                                    <td>
                                                        {{ $item->faculty_title }}
                                                        {{ $item->faculty_firstname }}
                                                        {{ $item->faculty_lastname }}
                                                    </td>
                                                    <td>{{ $item->teaching_load_year }}</td>
                                                    <td>


                                                        @if(
                                                            $item->flow_status == 'Pending'
                                                        )

                                                            <span
                                                                class="badge bg-pale-yellow text-yellow rounded-pill">

                                                                Pending Review

                                                            </span>



                                                        @elseif(
                                                            $item->flow_status == 'Waiting'
                                                            &&
                                                            $item->flow_result == 'Approved'
                                                        )

                                                            <span
                                                                class="badge bg-pale-green text-green rounded-pill">

                                                                Reviewed - Recommend Approval

                                                            </span>



                                                        @elseif(
                                                            $item->flow_status == 'Waiting'
                                                            &&
                                                            $item->flow_result == 'Disapproved'
                                                        )

                                                            <span
                                                                class="badge bg-pale-red text-red rounded-pill">

                                                                Reviewed - Recommend Rejection

                                                            </span>



                                                        @elseif(
                                                            $item->flow_status == 'Waiting'
                                                        )

                                                            <span
                                                                class="badge bg-pale-blue text-aqua rounded-pill">

                                                                Reviewed - Ready to Submit

                                                            </span>



                                                        @elseif(
                                                            $item->flow_status == 'Success'
                                                        )

                                                            <span
                                                                class="badge bg-pale-green text-green rounded-pill">

                                                                Submitted - Approved

                                                            </span>



                                                        @elseif(
                                                            $item->flow_status == 'Rejected'
                                                        )

                                                            <span
                                                                class="badge bg-pale-red text-red rounded-pill">

                                                                Submitted - Rejected

                                                            </span>


                                                        @endif


                                                    </td>
                                                    <td align="center">
                                                        <a
                                                            href="{{ route(
                                                                'teachingload.view',
                                                                $item->teaching_load_id
                                                            ) }}"
                                                            class="btn btn-circle btn-success btn-sm">

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

                                                        </a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>

                                    @if(
                                        $requests
                                            ->where(
                                                'flow_status',
                                                'Waiting'
                                            )
                                            ->count() > 0
                                    )

                                        <button
                                            type="submit"
                                            class="btn btn-green rounded-pill"
                                            onclick="return confirmSubmitDecisions()">

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

                                            Submit Selected Decisions

                                        </button>

                                    @endif
                                </form>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>

    @include('layouts.footer')

@endsection