@extends('admin.layout.layout')
@section('title', 'GAS LMS | Material Requests')
{{-- Breadcrumb section --}}
@section('breadcrumb')
    <!--begin::Breadcrumb-->
    <ul class="breadcrumb breadcrumb-dot fw-semibold text-gray-600 fs-7 my-1">
        <!--begin::Item-->
        <li class="breadcrumb-item text-gray-600">
            <a href="{{ route('admin.dashboard') }}" class="text-gray-600 text-hover-primary">Home</a>
        </li>
        <!--end::Item-->
        <!--begin::Item-->
        <li class="breadcrumb-item text-gray-600">Material Requests</li>
        <!--end::Item-->
    </ul>
    <!--end::Breadcrumb-->
@endsection
@section('content')
    @include('components._error')

    {{-- Filter --}}
    <form action="{{ route('admin.material.request') }}">
        <!--begin::Card-->
        <div class="card mb-10 shadow">
            <!--begin::Card body-->
            <div class="card-body">
                <!--begin::Compact form-->
                <div class="d-flex align-items-center">
                    <!--begin::Input group-->
                    <div class="position-relative w-md-800px me-md-2">
                        <select class="form-select form-control form-control-solid" data-control="select2" id="course"
                            required name="course" data-placeholder="Select course">
                            <option></option>
                            @foreach ($offered_courses as $course)
                                <option value="{{ $course->coffid }}">
                                    {{ $course->acyname . '_' . $course->cname . ' (' . $course->lshort_name . ')_' . $course->ttname }}
                                    {{ $course->has_label ? '(' . $course->label . ')' : '' }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <!--end::Input group-->
                    <div class="d-flex align-items-center">
                        <button type="submit" class="btn btn-primary me-5 submit_btn">
                            <!--begin::Svg Icon | path: icons/duotune/general/gen016.svg-->
                            <span class="svg-icon svg-icon-3">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M15.43 8.56949L10.744 15.1395C10.6422 15.282 10.5804 15.4492 10.5651 15.6236C10.5498 15.7981 10.5815 15.9734 10.657 16.1315L13.194 21.4425C13.2737 21.6097 13.3991 21.751 13.5557 21.8499C13.7123 21.9488 13.8938 22.0014 14.079 22.0015H14.117C14.3087 21.9941 14.4941 21.9307 14.6502 21.8191C14.8062 21.7075 14.9261 21.5526 14.995 21.3735L21.933 3.33649C22.0011 3.15918 22.0164 2.96594 21.977 2.78013C21.9376 2.59432 21.8452 2.4239 21.711 2.28949L15.43 8.56949Z"
                                        fill="currentColor"></path>
                                    <path opacity="0.3"
                                        d="M20.664 2.06648L2.62602 9.00148C2.44768 9.07085 2.29348 9.19082 2.1824 9.34663C2.07131 9.50244 2.00818 9.68731 2.00074 9.87853C1.99331 10.0697 2.04189 10.259 2.14054 10.4229C2.23919 10.5869 2.38359 10.7185 2.55601 10.8015L7.86601 13.3365C8.02383 13.4126 8.19925 13.4448 8.37382 13.4297C8.54839 13.4145 8.71565 13.3526 8.85801 13.2505L15.43 8.56548L21.711 2.28448C21.5762 2.15096 21.4055 2.05932 21.2198 2.02064C21.034 1.98196 20.8409 1.99788 20.664 2.06648Z"
                                        fill="currentColor"></path>
                                </svg>
                            </span>
                            <span class="pulse-ring"></span>
                            <span class="indicator-label">
                                Search
                            </span>
                            <span class="indicator-progress">
                                Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                            </span>
                            <!--end::Svg Icon-->
                        </button>
                        <a class="btn btn-danger me-5" href="{{ route('admin.material.request') }}">
                            Reset
                            <!--begin::Svg Icon | path: C:/wamp64/www/keenthemes/core/html/src/media/icons/duotune/arrows/arr029.svg-->
                            <span class="svg-icon svg-icon-muted svg-icon-1x"><svg width="24" height="24"
                                    viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M14.5 20.7259C14.6 21.2259 14.2 21.826 13.7 21.926C13.2 22.026 12.6 22.0259 12.1 22.0259C9.5 22.0259 6.9 21.0259 5 19.1259C1.4 15.5259 1.09998 9.72592 4.29998 5.82592L5.70001 7.22595C3.30001 10.3259 3.59999 14.8259 6.39999 17.7259C8.19999 19.5259 10.8 20.426 13.4 19.926C13.9 19.826 14.4 20.2259 14.5 20.7259ZM18.4 16.8259L19.8 18.2259C22.9 14.3259 22.7 8.52593 19 4.92593C16.7 2.62593 13.5 1.62594 10.3 2.12594C9.79998 2.22594 9.4 2.72595 9.5 3.22595C9.6 3.72595 10.1 4.12594 10.6 4.02594C13.1 3.62594 15.7 4.42595 17.6 6.22595C20.5 9.22595 20.7 13.7259 18.4 16.8259Z"
                                        fill="currentColor" />
                                    <path opacity="0.3"
                                        d="M2 3.62592H7C7.6 3.62592 8 4.02592 8 4.62592V9.62589L2 3.62592ZM16 14.4259V19.4259C16 20.0259 16.4 20.4259 17 20.4259H22L16 14.4259Z"
                                        fill="currentColor" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                        </a>
                    </div>
                </div>
                <!--end::Compact form-->
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Card-->
    </form>
    {{-- Requests table --}}
    <div class="card card-flush shadow">
        <!--begin::Card header-->
        <div class="card-header align-items-center py-5 gap-2 gap-md-5">
            <!--begin::Card title-->
            <div class="card-title">
                <h2>Requests List </h2>
            </div>
            <!--end::Card title-->
        </div>
        <div class="separator"></div>
        <!--end::Card header-->

        <!--begin::Card body-->
        <div class="card-body pt-0" id="material_transactions_post">
            <div class="d-flex justify-content-center">
                <ul class="nav nav-pills nav-pills-custom mb-3">
                    <!--begin::Item-->
                    <li class="nav-item mb-3 me-3 me-lg-6">
                        <!--begin::Link-->
                        <a href="{{ route('admin.material.request', ['status=unposted']) }}"
                            class=" {{ (request()->status == 'unposted') ? 'active' : ((!request()->status) ? 'active' : '') }}
                            nav-link btn btn-outline btn-flex btn-color-muted btn-active-color-primary flex-column overflow-hidden h-85px pt-5 pb-2">
                            <!--begin::Icon-->
                            <div class="nav-icon mb-3">
                                <!--begin::Svg Icon | path: C:/wamp64/www/keenthemes/core/html/src/media/icons/duotune/files/fil015.svg-->
                                <span class="svg-icon text-danger svg-icon-2hx"><svg width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path opacity="0.3" d="M10 4H21C21.6 4 22 4.4 22 5V7H10V4Z" fill="currentColor" />
                                        <path opacity="0.3"
                                            d="M12 14.4L9.89999 16.5C9.69999 16.7 9.39999 16.8 9.19999 16.8C8.99999 16.8 8.7 16.7 8.5 16.5C8.1 16.1 8.1 15.5 8.5 15.1L10.6 13L12 14.4ZM13.4 13L15.5 10.9C15.9 10.5 15.9 9.90001 15.5 9.50001C15.1 9.10001 14.5 9.10001 14.1 9.50001L12 11.6L13.4 13Z"
                                            fill="currentColor" />
                                        <path
                                            d="M10.4 3.60001L12 6H21C21.6 6 22 6.4 22 7V19C22 19.6 21.6 20 21 20H3C2.4 20 2 19.6 2 19V4C2 3.4 2.4 3 3 3H9.2C9.7 3 10.2 3.20001 10.4 3.60001ZM13.4 13L15.5 10.9C15.9 10.5 15.9 9.9 15.5 9.5C15.1 9.1 14.5 9.1 14.1 9.5L12 11.6L9.89999 9.5C9.49999 9.1 8.9 9.1 8.5 9.5C8.1 9.9 8.1 10.5 8.5 10.9L10.6 13L8.5 15.1C8.1 15.5 8.1 16.1 8.5 16.5C8.7 16.7 9 16.8 9.2 16.8C9.4 16.8 9.69999 16.7 9.89999 16.5L12 14.4L14.1 16.5C14.3 16.7 14.6 16.8 14.8 16.8C15 16.8 15.3 16.7 15.5 16.5C15.9 16.1 15.9 15.5 15.5 15.1L13.4 13Z"
                                            fill="currentColor" />
                                    </svg>
                                </span>
                                <!--end::Svg Icon-->
                            </div>
                            <!--end::Icon-->
                            <!--begin::Title-->
                            <span class="nav-text text-gray-800 fw-bold fs-6 lh-1">Pending</span>
                            <!--end::Title-->
                            <!--begin::Bullet-->
                            <span class="bullet-custom position-absolute bottom-0 w-100 h-4px bg-danger"></span>
                            <!--end::Bullet-->
                        </a>
                        <!--end::Link-->
                    </li>
                    <!--end::Item-->
                    <!--begin::Item-->
                    <li class="nav-item mb-3 me-3 me-lg-6">
                        <!--begin::Link-->
                        <a href="{{ route('admin.material.request', ['status=posted']) }}"
                            class="{{ request()->status == 'posted' ? 'active' : '' }} nav-link btn btn-outline btn-flex btn-color-muted btn-active-color-primary flex-column overflow-hidden w-100px h-85px pt-5 pb-2">
                            <!--begin::Icon-->
                            <div class="nav-icon mb-3">
                                <!--begin::Svg Icon | path: C:/wamp64/www/keenthemes/core/html/src/media/icons/duotune/files/fil016.svg-->
                                <span class="svg-icon text-success svg-icon-2hx"><svg width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path opacity="0.3" d="M10 4H21C21.6 4 22 4.4 22 5V7H10V4Z" fill="currentColor" />
                                        <path opacity="0.3"
                                            d="M10.3 15.3L11 14.6L8.70002 12.3C8.30002 11.9 7.7 11.9 7.3 12.3C6.9 12.7 6.9 13.3 7.3 13.7L10.3 16.7C9.9 16.3 9.9 15.7 10.3 15.3Z"
                                            fill="currentColor" />
                                        <path
                                            d="M10.4 3.60001L12 6H21C21.6 6 22 6.4 22 7V19C22 19.6 21.6 20 21 20H3C2.4 20 2 19.6 2 19V4C2 3.4 2.4 3 3 3H9.20001C9.70001 3 10.2 3.20001 10.4 3.60001ZM11.7 16.7L16.7 11.7C17.1 11.3 17.1 10.7 16.7 10.3C16.3 9.89999 15.7 9.89999 15.3 10.3L11 14.6L8.70001 12.3C8.30001 11.9 7.69999 11.9 7.29999 12.3C6.89999 12.7 6.89999 13.3 7.29999 13.7L10.3 16.7C10.5 16.9 10.8 17 11 17C11.2 17 11.5 16.9 11.7 16.7Z"
                                            fill="currentColor" />
                                    </svg>
                                </span>
                                <!--end::Svg Icon-->
                            </div>
                            <!--end::Icon-->
                            <!--begin::Title-->
                            <span class="nav-text text-gray-800 fw-bold fs-6 lh-1">Approved</span>
                            <!--end::Title-->
                            <!--begin::Bullet-->
                            <span class="bullet-custom position-absolute bottom-0 w-100 h-4px bg-success"></span>
                            <!--end::Bullet-->
                        </a>
                        <!--end::Link-->
                    </li>
                    <!--end::Item-->
                </ul>
            </div>
            <!--begin::Table-->
            <table class="table align-middle table-row-dashed fs-6 gy-5" id="server_side_datatable">
                <!--begin::Table head-->
                <thead>
                    <!--begin::Table row-->
                    <tr class="text-gray-400 fw-bold fs-7 text-uppercase gs-0">
                        <th class="text-center">
                            id
                        </th>
                        <th class="text-center">Type</th>
                        <th class="text-center">Course</th>
                        <th class="text-center">Teacher</th>
                        <th class="text-center">Group</th>
                        <th class="text-center">Title</th>
                        <th class="text-center">amount</th>
                        <th class="text-center">Actions</th>
                    </tr>
                    <!--end::Table row-->
                </thead>
                <!--end::Table head-->
                <!--begin::Table body-->
                <tbody class="fw-semibold text-gray-600">
                    @if (request()->status == 'unposted' || request()->course || !request()->status)
                        @foreach ($material_requests as $key => $material)
                            <!--begin::Table row-->
                            <tr class="text-center">
                                <!--begin::id-->
                                <td>
                                    <div class="position-relative ps-5 pe-3 py-2">

                                        <div class="position-absolute start-0 top-0 w-4px h-100 rounded-2 bg-primary">
                                        </div>
                                        {{ ++$key }}
                                    </div>
                                </td>
                                <td>
                                    <i class="bi bi-journal-bookmark-fill fs-2x text-primary me-3"></i>
                                </td>
                                <!--end::id-->
                                <td class="">
                                    <span class="fw-bold">
                                        {{ $material->acyname . '_' . $material->cname . ' (' . $material->lshort_name . ')' }}
                                        {{ $material->has_label ? '(' . $material->label . ')' : '' }}
                                    </span>
                                </td>
                                <td class="">
                                    <span
                                        class="fw-bold">{{ $material->first_name . ' ' . $material->middle_name . ' ' . $material->last_name }}</span>
                                </td>
                                <td class="">
                                    <span class="">{{ $material->gname }}</span>
                                </td>
                                <td class="">
                                    <span class="">{{ $material->name }}</span>
                                </td>

                                <td class="">
                                    <span class=""> - </span>
                                </td>

                                <td class="">
                                    <a href="#" class="btn btn-sm btn-light btn-active-light-primary"
                                        data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">Actions
                                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr072.svg-->
                                        <span class="svg-icon svg-icon-5 m-0">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M11.4343 12.7344L7.25 8.55005C6.83579 8.13583 6.16421 8.13584 5.75 8.55005C5.33579 8.96426 5.33579 9.63583 5.75 10.05L11.2929 15.5929C11.6834 15.9835 12.3166 15.9835 12.7071 15.5929L18.25 10.05C18.6642 9.63584 18.6642 8.96426 18.25 8.55005C17.8358 8.13584 17.1642 8.13584 16.75 8.55005L12.5657 12.7344C12.2533 13.0468 11.7467 13.0468 11.4343 12.7344Z"
                                                    fill="currentColor" />
                                            </svg>
                                        </span>
                                        <!--end::Svg Icon-->
                                    </a>
                                    <!--begin::Menu-->
                                    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4"
                                        data-kt-menu="true">
                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3">
                                            <a href="#" data-request-id="{{ $material->id }}"
                                                class="approve_drawer menu-link px-3">Approve</a>
                                        </div>
                                        <!--end::Menu item-->
                                    </div>
                                    <!--end::Menu-->
                                </td>
                                <!--end::Action=-->
                            </tr>
                            <!--end::Table row-->
                        @endforeach

                        @foreach ($hyper_material_requests as $key => $material)
                            <!--begin::Table row-->
                            <tr class="text-center">
                                <!--begin::id-->
                                <td>
                                    <div class="position-relative ps-5 pe-3 py-2">

                                        <div class="position-absolute start-0 top-0 w-4px h-100 rounded-2 bg-primary">
                                        </div>
                                        {{ ++$key }}
                                    </div>
                                </td>
                                <td>
                                    <span class="svg-icon svg-icon-2x text-primary me-1"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path opacity="0.3" d="M18.4 5.59998C18.7766 5.9772 18.9881 6.48846 18.9881 7.02148C18.9881 7.55451 18.7766 8.06577 18.4 8.44299L14.843 12C14.466 12.377 13.9547 12.5887 13.4215 12.5887C12.8883 12.5887 12.377 12.377 12 12C11.623 11.623 11.4112 11.1117 11.4112 10.5785C11.4112 10.0453 11.623 9.53399 12 9.15698L15.553 5.604C15.9302 5.22741 16.4415 5.01587 16.9745 5.01587C17.5075 5.01587 18.0188 5.22741 18.396 5.604L18.4 5.59998ZM20.528 3.47205C20.0614 3.00535 19.5074 2.63503 18.8977 2.38245C18.288 2.12987 17.6344 1.99988 16.9745 1.99988C16.3145 1.99988 15.661 2.12987 15.0513 2.38245C14.4416 2.63503 13.8876 3.00535 13.421 3.47205L9.86801 7.02502C9.40136 7.49168 9.03118 8.04568 8.77863 8.6554C8.52608 9.26511 8.39609 9.91855 8.39609 10.5785C8.39609 11.2384 8.52608 11.8919 8.77863 12.5016C9.03118 13.1113 9.40136 13.6653 9.86801 14.132C10.3347 14.5986 10.8886 14.9688 11.4984 15.2213C12.1081 15.4739 12.7616 15.6039 13.4215 15.6039C14.0815 15.6039 14.7349 15.4739 15.3446 15.2213C15.9543 14.9688 16.5084 14.5986 16.975 14.132L20.528 10.579C20.9947 10.1124 21.3649 9.55844 21.6175 8.94873C21.8701 8.33902 22.0001 7.68547 22.0001 7.02551C22.0001 6.36555 21.8701 5.71201 21.6175 5.10229C21.3649 4.49258 20.9947 3.93867 20.528 3.47205Z" fill="currentColor"/>
                                        <path d="M14.132 9.86804C13.6421 9.37931 13.0561 8.99749 12.411 8.74695L12 9.15698C11.6234 9.53421 11.4119 10.0455 11.4119 10.5785C11.4119 11.1115 11.6234 11.6228 12 12C12.3766 12.3772 12.5881 12.8885 12.5881 13.4215C12.5881 13.9545 12.3766 14.4658 12 14.843L8.44699 18.396C8.06999 18.773 7.55868 18.9849 7.02551 18.9849C6.49235 18.9849 5.98101 18.773 5.604 18.396C5.227 18.019 5.0152 17.5077 5.0152 16.9745C5.0152 16.4413 5.227 15.93 5.604 15.553L8.74701 12.411C8.28705 11.233 8.28705 9.92498 8.74701 8.74695C8.10159 8.99737 7.5152 9.37919 7.02499 9.86804L3.47198 13.421C2.52954 14.3635 2.00009 15.6417 2.00009 16.9745C2.00009 18.3073 2.52957 19.5855 3.47202 20.528C4.41446 21.4704 5.69269 21.9999 7.02551 21.9999C8.35833 21.9999 9.63656 21.4704 10.579 20.528L14.132 16.975C14.5987 16.5084 14.9689 15.9544 15.2215 15.3447C15.4741 14.735 15.6041 14.0815 15.6041 13.4215C15.6041 12.7615 15.4741 12.108 15.2215 11.4983C14.9689 10.8886 14.5987 10.3347 14.132 9.86804Z" fill="currentColor"/>
                                        </svg></span>
                                </td>
                                <!--end::id-->
                                <td class="">
                                    <span class="fw-bold">
                                        {{ $material->acyname . '_' . $material->cname . ' (' . $material->lshort_name . ')' }}
                                        {{ $material->has_label ? '(' . $material->label . ')' : '' }}
                                    </span>
                                </td>
                                <td class="">
                                    <span
                                        class="fw-bold">{{ $material->first_name . ' ' . $material->middle_name . ' ' . $material->last_name }}</span>
                                </td>
                                <td class="">
                                    <span class="">{{ $material->gname }}</span>
                                </td>
                                <td class="">
                                    <span class="">{{ $material->name }}</span>
                                </td>

                                <td class="">
                                    <span class=""> - </span>
                                </td>

                                <td class="">
                                    <a href="#" class="btn btn-sm btn-light btn-active-light-primary"
                                        data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">Actions
                                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr072.svg-->
                                        <span class="svg-icon svg-icon-5 m-0">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M11.4343 12.7344L7.25 8.55005C6.83579 8.13583 6.16421 8.13584 5.75 8.55005C5.33579 8.96426 5.33579 9.63583 5.75 10.05L11.2929 15.5929C11.6834 15.9835 12.3166 15.9835 12.7071 15.5929L18.25 10.05C18.6642 9.63584 18.6642 8.96426 18.25 8.55005C17.8358 8.13584 17.1642 8.13584 16.75 8.55005L12.5657 12.7344C12.2533 13.0468 11.7467 13.0468 11.4343 12.7344Z"
                                                    fill="currentColor" />
                                            </svg>
                                        </span>
                                        <!--end::Svg Icon-->
                                    </a>
                                    <!--begin::Menu-->
                                    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4"
                                        data-kt-menu="true">
                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3">
                                            <a href="#" data-request-id="{{ $material->id }}"
                                                class="hyper_approve_drawer menu-link px-3">Approve</a>
                                        </div>
                                        <!--end::Menu item-->
                                    </div>
                                    <!--end::Menu-->
                                </td>
                                <!--end::Action=-->
                            </tr>
                            <!--end::Table row-->
                        @endforeach
                    @elseif (request()->status == 'posted')
                        @foreach ($material_requests_post as $key => $material)
                            <!--begin::Table row-->
                            <tr class="text-center">
                                <!--begin::id-->
                                <td>
                                    <div class="position-relative ps-6 pe-3 py-2">

                                        <div class="position-absolute start-0 top-0 w-4px h-100 rounded-2 bg-primary">
                                        </div>
                                        {{ ++$key }}
                                    </div>
                                </td>
                                <!--end::id-->
                                <td>
                                    <i class="bi bi-journal-bookmark-fill fs-2x text-primary me-3"></i>
                                </td>
                                <td class="">
                                    <span class="fw-bold">
                                        {{ $material->acyname . '_' . $material->cname . ' (' . $material->lshort_name . ')' }}
                                        {{ $material->has_label ? '(' . $material->label . ')' : '' }}
                                    </span>
                                </td>
                                <td class="">
                                    <span
                                        class="fw-bold">{{ $material->first_name . ' ' . $material->middle_name . ' ' . $material->last_name }}</span>
                                </td>
                                <td class="">
                                    <span class="">{{ $material->gname }}</span>
                                </td>
                                <td class="">
                                    <span class="">{{ $material->name }}</span>
                                </td>
                                <td class="">
                                    <span class="fw-bold">
                                        {{$material->amount_due}}
                                        <span class="svg-icon svg-icon-muted" data-bs-toggle="tooltip" data-bs-html="true" data-bs-custom-class="tooltip-inverse" data-bs-placement="top" title="
                                            eshra7ly amount={{$material->eshra7ly_amount}} <br>
                                            teacher amount={{$material->teacher_amount}} <br>
                                            amount due={{$material->amount_due}}
                                            ">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="currentColor"/>
                                            <rect x="11" y="14" width="7" height="2" rx="1" transform="rotate(-90 11 14)" fill="currentColor"/>
                                            <rect x="11" y="17" width="2" height="2" rx="1" transform="rotate(-90 11 17)" fill="currentColor"/>
                                            </svg>
                                        </span>
                                    </span>
                                </td>
                                <td class="">
                                    <span class=""> Approved </span>
                                    <!--begin::Menu-->
                                    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4"
                                        data-kt-menu="true">
                                        <!--begin::Menu item-->
                                        {{-- <div class="menu-item px-3">
                                            <a href="#" data-request-id="{{ $material->id }}"
                                                class="approve_drawer menu-link px-3">Approve</a>
                                        </div> --}}
                                        <!--end::Menu item-->
                                    </div>
                                    <!--end::Menu-->
                                </td>
                                <!--end::Action=-->
                            </tr>
                            <!--end::Table row-->
                        @endforeach

                        @foreach ($hyper_material_requests_post as $key => $material)
                            <!--begin::Table row-->
                            <tr class="text-center">
                                <!--begin::id-->
                                <td>
                                    <div class="position-relative ps-6 pe-3 py-2">

                                        <div class="position-absolute start-0 top-0 w-4px h-100 rounded-2 bg-primary">
                                        </div>
                                        {{ ++$key }}
                                    </div>
                                </td>
                                <!--end::id-->
                                <td>
                                    <span class="svg-icon svg-icon-2x text-primary me-1"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path opacity="0.3" d="M18.4 5.59998C18.7766 5.9772 18.9881 6.48846 18.9881 7.02148C18.9881 7.55451 18.7766 8.06577 18.4 8.44299L14.843 12C14.466 12.377 13.9547 12.5887 13.4215 12.5887C12.8883 12.5887 12.377 12.377 12 12C11.623 11.623 11.4112 11.1117 11.4112 10.5785C11.4112 10.0453 11.623 9.53399 12 9.15698L15.553 5.604C15.9302 5.22741 16.4415 5.01587 16.9745 5.01587C17.5075 5.01587 18.0188 5.22741 18.396 5.604L18.4 5.59998ZM20.528 3.47205C20.0614 3.00535 19.5074 2.63503 18.8977 2.38245C18.288 2.12987 17.6344 1.99988 16.9745 1.99988C16.3145 1.99988 15.661 2.12987 15.0513 2.38245C14.4416 2.63503 13.8876 3.00535 13.421 3.47205L9.86801 7.02502C9.40136 7.49168 9.03118 8.04568 8.77863 8.6554C8.52608 9.26511 8.39609 9.91855 8.39609 10.5785C8.39609 11.2384 8.52608 11.8919 8.77863 12.5016C9.03118 13.1113 9.40136 13.6653 9.86801 14.132C10.3347 14.5986 10.8886 14.9688 11.4984 15.2213C12.1081 15.4739 12.7616 15.6039 13.4215 15.6039C14.0815 15.6039 14.7349 15.4739 15.3446 15.2213C15.9543 14.9688 16.5084 14.5986 16.975 14.132L20.528 10.579C20.9947 10.1124 21.3649 9.55844 21.6175 8.94873C21.8701 8.33902 22.0001 7.68547 22.0001 7.02551C22.0001 6.36555 21.8701 5.71201 21.6175 5.10229C21.3649 4.49258 20.9947 3.93867 20.528 3.47205Z" fill="currentColor"/>
                                        <path d="M14.132 9.86804C13.6421 9.37931 13.0561 8.99749 12.411 8.74695L12 9.15698C11.6234 9.53421 11.4119 10.0455 11.4119 10.5785C11.4119 11.1115 11.6234 11.6228 12 12C12.3766 12.3772 12.5881 12.8885 12.5881 13.4215C12.5881 13.9545 12.3766 14.4658 12 14.843L8.44699 18.396C8.06999 18.773 7.55868 18.9849 7.02551 18.9849C6.49235 18.9849 5.98101 18.773 5.604 18.396C5.227 18.019 5.0152 17.5077 5.0152 16.9745C5.0152 16.4413 5.227 15.93 5.604 15.553L8.74701 12.411C8.28705 11.233 8.28705 9.92498 8.74701 8.74695C8.10159 8.99737 7.5152 9.37919 7.02499 9.86804L3.47198 13.421C2.52954 14.3635 2.00009 15.6417 2.00009 16.9745C2.00009 18.3073 2.52957 19.5855 3.47202 20.528C4.41446 21.4704 5.69269 21.9999 7.02551 21.9999C8.35833 21.9999 9.63656 21.4704 10.579 20.528L14.132 16.975C14.5987 16.5084 14.9689 15.9544 15.2215 15.3447C15.4741 14.735 15.6041 14.0815 15.6041 13.4215C15.6041 12.7615 15.4741 12.108 15.2215 11.4983C14.9689 10.8886 14.5987 10.3347 14.132 9.86804Z" fill="currentColor"/>
                                        </svg></span>
                                </td>
                                <td class="">
                                    <span class="fw-bold">
                                        {{ $material->acyname . '_' . $material->cname . ' (' . $material->lshort_name . ')' }}
                                        {{ $material->has_label ? '(' . $material->label . ')' : '' }}
                                    </span>
                                </td>
                                <td class="">
                                    <span
                                        class="fw-bold">{{ $material->first_name . ' ' . $material->middle_name . ' ' . $material->last_name }}</span>
                                </td>
                                <td class="">
                                    <span class="">{{ $material->gname }}</span>
                                </td>
                                <td class="">
                                    <span class="">{{ $material->name }}</span>
                                </td>
                                <td class="">
                                    <span class="fw-bold">
                                        {{$material->amount_due}}
                                        <span class="svg-icon svg-icon-muted" data-bs-toggle="tooltip" data-bs-html="true" data-bs-custom-class="tooltip-inverse" data-bs-placement="top" title="
                                            eshra7ly amount={{$material->eshra7ly_amount}} <br>
                                            teacher amount={{$material->teacher_amount}} <br>
                                            amount due={{$material->amount_due}}
                                            ">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="currentColor"/>
                                            <rect x="11" y="14" width="7" height="2" rx="1" transform="rotate(-90 11 14)" fill="currentColor"/>
                                            <rect x="11" y="17" width="2" height="2" rx="1" transform="rotate(-90 11 17)" fill="currentColor"/>
                                            </svg>
                                        </span>
                                    </span>
                                </td>
                                <td class="">
                                    <span class=""> Approved </span>
                                    <!--begin::Menu-->
                                    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4"
                                        data-kt-menu="true">
                                        <!--begin::Menu item-->
                                        {{-- <div class="menu-item px-3">
                                            <a href="#" data-request-id="{{ $material->id }}"
                                                class="approve_drawer menu-link px-3">Approve</a>
                                        </div> --}}
                                        <!--end::Menu item-->
                                    </div>
                                    <!--end::Menu-->
                                </td>
                                <!--end::Action=-->
                            </tr>
                            <!--end::Table row-->
                        @endforeach
                    @endif

                </tbody>
                <!--end::Table body-->
            </table>
            <!--end::Table-->
        </div>
        <!--end::Card body-->


    </div>

    <!--begin::View component-->
    <div id="kt_drawer_example_dismiss" class="bg-white" data-kt-drawer="true" data-kt-drawer-activate="true"
        data-kt-drawer-toggle=".approve_drawer" data-kt-drawer-close="#kt_drawer_example_dismiss_close"
        data-kt-drawer-overlay="true" data-kt-drawer-width="{default:'300px', 'md': '500px'}">

        <div class="card rounded-0 w-100">
            <!--begin::Card header-->
            <div class="card-header pe-5">
                <!--begin::Title-->
                <div class="card-title">
                    <!--begin::User-->
                    <div class="d-flex justify-content-center flex-column me-3">
                        <a href="#" class="fs-4 fw-bold text-gray-900 text-hover-primary me-1 lh-1">Approve Material
                            Request</a>
                    </div>
                    <!--end::User-->
                </div>
                <!--end::Title-->
                <!--begin::Card toolbar-->
                <div class="card-toolbar">
                    <!--begin::Close-->
                    <div class="btn btn-sm btn-icon btn-active-light-primary" id="kt_drawer_example_dismiss_close">
                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                        <span class="svg-icon svg-icon-2">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <rect opacity="0.5" x="6" y="17.3137" width="16" height="2"
                                    rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor"></rect>
                                <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                    transform="rotate(45 7.41422 6)" fill="currentColor"></rect>
                            </svg>
                        </span>
                        <!--end::Svg Icon-->
                    </div>
                    <!--end::Close-->
                </div>
                <!--end::Card toolbar-->
            </div>
            <!--end::Card header-->
            <!--begin::Card body-->

            <div class="card-body hover-scroll-overlay-y">
                <div class="mb-6 text-center">
                    <img src="{{ env('SECURE_ASSETS') . '/assets/media/illustrations/sigma-1/4.png' }}" width="200"
                        alt="">
                </div>

                <div id="calc_container">
                    <form method="POST" id="approve_request_form">
                        @csrf
                        <div class="row my-10">
                            <!--begin::Input group-->
                            <div class="form-floating col-md-4">
                                <input type="number" required name="teacher_amount" step="0.01"
                                    value="{{ old('teacher_amount') }}" class="form-control numCal" id="teacher_amount"
                                    placeholder="teacher amount" />
                                <label for="teacher_amount" class="required text-muted mb-2 ms-3">teacher</label>
                            </div>

                            <!--begin::Input group-->
                            <div class="form-floating col-md-4">
                                <input type="number" required name="eshra7ly_amount" step="0.01"
                                    value="{{ old('eshra7ly_amount') }}" class="form-control numCal"
                                    id="eshra7ly_amount" placeholder="eshra7ly amount" />
                                <label for="eshra7ly_amount" class="required text-muted ms-3 mb-2">eshra7ly</label>
                            </div>

                            <!--begin::Input group-->
                            <div class="form-floating col-md-4">
                                <input type="text" required name="amount_due" readonly
                                    value="{{ old('amount_due') }}" class="form-control form-control-solid"
                                    id="total_sum_value" placeholder="amount due" />
                                <label for="amount_due" class="text-muted ms-3 mb-2 required">amount due</label>
                            </div>

                        </div>
                        <button type="submit" class=" submit_btn btn btn-primary mx-auto d-block w-45 mt-4">
                            <!--begin::Svg Icon | path: icons/duotune/general/gen016.svg-->
                            <span class="svg-icon svg-icon-3">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M15.43 8.56949L10.744 15.1395C10.6422 15.282 10.5804 15.4492 10.5651 15.6236C10.5498 15.7981 10.5815 15.9734 10.657 16.1315L13.194 21.4425C13.2737 21.6097 13.3991 21.751 13.5557 21.8499C13.7123 21.9488 13.8938 22.0014 14.079 22.0015H14.117C14.3087 21.9941 14.4941 21.9307 14.6502 21.8191C14.8062 21.7075 14.9261 21.5526 14.995 21.3735L21.933 3.33649C22.0011 3.15918 22.0164 2.96594 21.977 2.78013C21.9376 2.59432 21.8452 2.4239 21.711 2.28949L15.43 8.56949Z"
                                        fill="currentColor"></path>
                                    <path opacity="0.3"
                                        d="M20.664 2.06648L2.62602 9.00148C2.44768 9.07085 2.29348 9.19082 2.1824 9.34663C2.07131 9.50244 2.00818 9.68731 2.00074 9.87853C1.99331 10.0697 2.04189 10.259 2.14054 10.4229C2.23919 10.5869 2.38359 10.7185 2.55601 10.8015L7.86601 13.3365C8.02383 13.4126 8.19925 13.4448 8.37382 13.4297C8.54839 13.4145 8.71565 13.3526 8.85801 13.2505L15.43 8.56548L21.711 2.28448C21.5762 2.15096 21.4055 2.05932 21.2198 2.02064C21.034 1.98196 20.8409 1.99788 20.664 2.06648Z"
                                        fill="currentColor"></path>
                                </svg>
                            </span>
                            <span class="pulse-ring"></span>
                            <span class="indicator-label">
                                Approve
                            </span>
                            <span class="indicator-progress">
                                Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                            </span>
                            <!--end::Svg Icon-->
                        </button>
                    </form>
                </div>

            </div>
            <!--end::Card body-->
            <!--begin::Card footer-->
            <div class="card-footer">
                <!--begin::Dismiss button-->
                <button class="submit_btn btn btn-light-danger" data-kt-drawer-dismiss="true">Dismiss</button>
                <!--end::Dismiss button-->
            </div>
            <!--end::Card footer-->
        </div>
    </div>
    <!--end::View component-->

    <!--begin::View component-->
    <div id="kt_drawer_example_dismiss" class="bg-white" data-kt-drawer="true" data-kt-drawer-activate="true"
        data-kt-drawer-toggle=".hyper_approve_drawer" data-kt-drawer-close="#kt_drawer_example_dismiss_close"
        data-kt-drawer-overlay="true" data-kt-drawer-width="{default:'300px', 'md': '500px'}">

        <div class="card rounded-0 w-100">
            <!--begin::Card header-->
            <div class="card-header pe-5">
                <!--begin::Title-->
                <div class="card-title">
                    <!--begin::User-->
                    <div class="d-flex justify-content-center flex-column me-3">
                        <a href="#" class="fs-4 fw-bold text-gray-900 text-hover-primary me-1 lh-1">Approve Hyper Material
                            Request</a>
                    </div>
                    <!--end::User-->
                </div>
                <!--end::Title-->
                <!--begin::Card toolbar-->
                <div class="card-toolbar">
                    <!--begin::Close-->
                    <div class="btn btn-sm btn-icon btn-active-light-primary" id="kt_drawer_example_dismiss_close">
                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                        <span class="svg-icon svg-icon-2">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <rect opacity="0.5" x="6" y="17.3137" width="16" height="2"
                                    rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor"></rect>
                                <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                    transform="rotate(45 7.41422 6)" fill="currentColor"></rect>
                            </svg>
                        </span>
                        <!--end::Svg Icon-->
                    </div>
                    <!--end::Close-->
                </div>
                <!--end::Card toolbar-->
            </div>
            <!--end::Card header-->
            <!--begin::Card body-->

            <div class="card-body hover-scroll-overlay-y">
                <div class="mb-6 text-center">
                    <img src="{{ env('SECURE_ASSETS') . '/assets/media/illustrations/sigma-1/4.png' }}" width="200"
                        alt="">
                </div>

                <div id="calc_container_hyper">
                    <form method="POST" id="approve_hyper_request_form">
                        @csrf
                        <div class="row my-10">
                            <!--begin::Input group-->
                            <div class="form-floating col-md-4">
                                <input type="number" required name="teacher_amount" step="0.01"
                                    value="{{ old('teacher_amount') }}" class="form-control numCalH" id="teacher_amount"
                                    placeholder="teacher amount" />
                                <label for="teacher_amount" class="required text-muted mb-2 ms-3">teacher</label>
                            </div>

                            <!--begin::Input group-->
                            <div class="form-floating col-md-4">
                                <input type="number" required name="eshra7ly_amount" step="0.01"
                                    value="{{ old('eshra7ly_amount') }}" class="form-control numCalH"
                                    id="eshra7ly_amount" placeholder="eshra7ly amount" />
                                <label for="eshra7ly_amount" class="required text-muted ms-3 mb-2">eshra7ly</label>
                            </div>

                            <!--begin::Input group-->
                            <div class="form-floating col-md-4">
                                <input type="text" required name="amount_due" readonly
                                    value="{{ old('amount_due') }}" class="form-control form-control-solid"
                                    id="total_sum_hyper_value" placeholder="amount due" />
                                <label for="amount_due" class="text-muted ms-3 mb-2 required">amount due</label>
                            </div>

                        </div>
                        <button type="submit" class=" submit_btn btn btn-primary mx-auto d-block w-45 mt-4">
                            <!--begin::Svg Icon | path: icons/duotune/general/gen016.svg-->
                            <span class="svg-icon svg-icon-3">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M15.43 8.56949L10.744 15.1395C10.6422 15.282 10.5804 15.4492 10.5651 15.6236C10.5498 15.7981 10.5815 15.9734 10.657 16.1315L13.194 21.4425C13.2737 21.6097 13.3991 21.751 13.5557 21.8499C13.7123 21.9488 13.8938 22.0014 14.079 22.0015H14.117C14.3087 21.9941 14.4941 21.9307 14.6502 21.8191C14.8062 21.7075 14.9261 21.5526 14.995 21.3735L21.933 3.33649C22.0011 3.15918 22.0164 2.96594 21.977 2.78013C21.9376 2.59432 21.8452 2.4239 21.711 2.28949L15.43 8.56949Z"
                                        fill="currentColor"></path>
                                    <path opacity="0.3"
                                        d="M20.664 2.06648L2.62602 9.00148C2.44768 9.07085 2.29348 9.19082 2.1824 9.34663C2.07131 9.50244 2.00818 9.68731 2.00074 9.87853C1.99331 10.0697 2.04189 10.259 2.14054 10.4229C2.23919 10.5869 2.38359 10.7185 2.55601 10.8015L7.86601 13.3365C8.02383 13.4126 8.19925 13.4448 8.37382 13.4297C8.54839 13.4145 8.71565 13.3526 8.85801 13.2505L15.43 8.56548L21.711 2.28448C21.5762 2.15096 21.4055 2.05932 21.2198 2.02064C21.034 1.98196 20.8409 1.99788 20.664 2.06648Z"
                                        fill="currentColor"></path>
                                </svg>
                            </span>
                            <span class="pulse-ring"></span>
                            <span class="indicator-label">
                                Approve
                            </span>
                            <span class="indicator-progress">
                                Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                            </span>
                            <!--end::Svg Icon-->
                        </button>
                    </form>
                </div>

            </div>
            <!--end::Card body-->
            <!--begin::Card footer-->
            <div class="card-footer">
                <!--begin::Dismiss button-->
                <button class="submit_btn btn btn-light-danger" data-kt-drawer-dismiss="true">Dismiss</button>
                <!--end::Dismiss button-->
            </div>
            <!--end::Card footer-->
        </div>
    </div>
    <!--end::View component-->

@endsection
@section('js')

    {{-- drawer --}}
    <script>
        $('.approve_drawer').on('click', function() {
            let request_id = $(this).attr('data-request-id')
            let editUrl = "{{ route('admin.material.request.approve', [':request_id']) }}"
            editUrl = editUrl.replace(':request_id', request_id);
            $('#approve_request_form').attr('action', editUrl)
        })
    </script>

    {{-- hyper drawer --}}
    <script>
        $('.hyper_approve_drawer').on('click', function() {
            let request_id = $(this).attr('data-request-id')
            let editUrl = "{{ route('admin.material.request.hyper.approve', [':request_id']) }}"
            editUrl = editUrl.replace(':request_id', request_id);
            $('#approve_hyper_request_form').attr('action', editUrl)
        })
    </script>
    {{-- calculate sum of all inputs --}}
    <script>
        $(document).ready(function() {

            $("#calc_container").on('keyup', '.numCal', function() {
                var calculated_total_sum = 0;

                $("#calc_container .numCal").each(function() {
                    var get_textbox_value = $(this).val();
                    if ($.isNumeric(get_textbox_value)) {
                        calculated_total_sum += parseFloat(get_textbox_value);
                    }
                });
                $("#total_sum_value").val(calculated_total_sum);
            });
        });
    </script>

    {{-- calculate sum of all hyper inputs --}}
    <script>
        $(document).ready(function() {

            $("#calc_container_hyper").on('keyup', '.numCalH', function() {
                var calculated_total_sum = 0;

                $("#calc_container_hyper .numCalH").each(function() {
                    var get_textbox_value = $(this).val();
                    if ($.isNumeric(get_textbox_value)) {
                        calculated_total_sum += parseFloat(get_textbox_value);
                    }
                });
                $("#total_sum_hyper_value").val(calculated_total_sum);
            });
        });
    </script>
@endsection