@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 active"  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"  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('/allrequest') }}" 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>

                                <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>Workload Arrangement</td>
                                                    <td>
                                                        {{ $item->faculty_title }}
                                                        {{ $item->faculty_firstname }}
                                                        {{ $item->faculty_lastname }}
                                                    </td>
                                                    <td>{{ $item->adcontract_value_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="{{ url('/arrangementview/'.$item->flow_request) }}" 
                                                        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