@extends('tenant.layouts.supervisor-wfm')

{{-- Tilte Section --}}
@section('title', 'Schedule Management')

{{-- Style Section --}}
@section('style')
    <!-- Css file for summernote js plugins  -->
    <style>
        .list-dropdown {
            height: inherit;
        }

        .list-dropdown::after {
            float: right;
            margin-top: 1rem;
        }

        .modal-close {
            cursor: pointer;
        }

        #modal-dropdown {
            padding: 1.2rem;
        }

        #modal-dropdown:hover {
            cursor: pointer;
        }

        #modal-dropdown::after {
            margin-top: -5px;
            color: #00a34e;
            float: right;
        }

        #modal-dropdown {
            background-color: #fbfbfb;
        }

        #modal-dropdown-menu {
            width: 100% !important;
            inset: 0 2rem auto 0px !important;
            padding: 0.5rem;
        }

        #upper-dropdown-menu {
            inset: 10px auto auto -230px !important;
        }

        @media only screen and (max-width: 567px) {
            #upper-dropdown-menu {
                inset: 0px auto auto 70px !important;
            }
        }

        @media (min-width: 568px) and (max-width: 1200px) {
            #upper-dropdown-menu {
                inset: 0px auto auto 20% !important;
            }
        }

        .greenIcon {
            color: #38b775;
            background-color: #e0f4ea;
            border: 1px solid #e0f4ea;
            padding: 0px 15px 0px 15px;
            border-radius: 30px;
            text-align: center;
        }

        .logo {
            aspect-ratio: 1/1;
            height: 28px;
            width: 28px;
            float: left;
            object-fit: contain;
        }

        .statistics-image {
            height: 7rem;
            width: 7rem;
            aspect-ratio: 1/1;
            object-fit: cover;
        }

        a.dropdown-item {
            /* width: 20%; */
            font-size: 0.9rem;
            padding-left: 0.1rem;
        }

        .calendar-style {
            right: 1.2rem;
            bottom: 0.7rem;
            cursor: pointer;
        }

        .tabs {
            height: 2.5rem;
            padding-top: 2rem !important;
            padding-bottom: 2rem !important;
        }

        .fixed-height {
            max-height: 18rem;
        }

        ::-webkit-scrollbar {
            display: none;
        }

        .badges {
            background-color: #05A78D;
            width: 2.2rem !important;
            padding-top: 0.7rem !important;
        }

        .edit-icon {
            width: 17px;
            height: 17px;
            float: right;
            cursor: pointer;
        }

        .gradient-border {
            height: 4rem;
            background: linear-gradient(to right, #00a34e 50%, #a8c859);
            color: white !important;
        }

        .submit-button {
            background-color: #01A44F !important;
            padding: 0.7rem !important;
        }

        select {
            height: 2.7rem;
        }

        option {
            height: 4rem;
        }

        select:hover {
            cursor: pointer;
        }

        #shiftStatusModal {
            /* height: fit-content; */
            overflow: visible;
            /* z-index: 999999; */
        }

        .modal-dialog {
            min-width: 35%;
            margin-top: 6.5rem;
            overflow: visible;
            /* z-index: 999999999999; */
        }

        .modal-body {
            height: 20rem;
            padding-top: 0;
        }

        .modal-content {
            overflow: visible;
        }

        .status-icon {
            padding: 0.2rem;
            margin-left: 1rem;
            margin-right: 0.2rem;
        }

        input[type="date"]::-webkit-calendar-picker-indicator {
            /* display: none; */
            /* -webkit-appearance: none; */
            width: 15px;
            padding: 0px;
            margin: 0px;
            /* margin-top: 10px; */
            cursor: pointer;
        }

        th,
        td {
            text-align: center;
            height:3.2rem;
            text-wrap:nowrap;
            vertical-align: middle;
        }

        th[scope="row"] {
            background-color: white;
        }

        .outlines {
            outline: 0.5rem solid #E6F5F6;
        }
    </style>
@endsection

{{-- Content Section --}}
@section('content')
    <div class="container-fluid px-5">
        <!-- 1st row  -->
        <!-- 1st row  -->
        <div class="row pt-3 p-2 px-3">
            <div class="card shadow rounded rounded mb-1 pt-2 p-3 py-2">
                <div class="card-body">
                    <img src="{{ global_asset('assets/img/icons/skill_managment.png') }}" alt="Schedule Management icon"
                        class="logo me-1">
                    <h5>Schedule Management</h5>
                    <h6 class="pt-2" style="font-size: 14px; color:#919191">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Pellentesque pellentesque tincidunt est id sagittis.
                    </h6>
                </div>
            </div>
        </div>

        <!-- 2nd row  -->
        <div class="row p-3">
            <div class="card shadow m-0 p-0 rounded rounded">
                <div class="card-body p-0 pb-2">
                    {{-- the row of account, skill group, and clear & apply buttons  --}}
                    <div class="row m-0 p-0">
                        {{-- Account  --}}
                        <div
                            class="col-lg-5 col-12 mb-lg-0 mb-5 dropdown d-flex align-items-center border border-top-0 border-start-0 ps-lg-4 tabs py-4">
                            <span style="width: 90px;">Account:&nbsp;&nbsp;</span>
                            <i class="fa fa-search" aria-hidden="true"></i>
                            <span class="greenIcon mx-2 align-middle text-nowrap overflow-x-hidden px-0 w-75">Fanchen
                                <span aria-hidden="true">&times;</span>
                            </span>
                            <div class="dropdown-toggle w-100 list-dropdown" data-bs-toggle="dropdown" type="button">
                            </div>
                            <ul class="dropdown-menu w-75 shadow p-2" id="upper-dropdown-menu">
                                <h6 class="text-muted">Choose Account</h6>
                                <li class="border rounded border-success m-1">
                                    <a class="dropdown-item text-center d-flex justify-content-center align-items-center"
                                        href="#">
                                        <img src="{{ global_asset('assets/img/icons/noon.png') }}" alt="logo"
                                            class="logo me-1">
                                        <span>NOON</span>
                                    </a>
                                </li>
                                <li class="border rounded border-success m-1">
                                    <a class="dropdown-item text-center d-flex justify-content-center align-items-center"
                                        href="#">
                                        <img src="{{ global_asset('assets/img/icons/shahid.png') }}" alt="logo"
                                            class="logo me-1">
                                        <span>SHAHID</span>
                                    </a>
                                </li>
                                <li
                                    class="border rounded border-success d-flex justify-content-center align-items-center m-1">
                                    <a class="dropdown-item text-center d-flex justify-content-center align-items-center"
                                        href="#">
                                        <img src="{{ global_asset('assets/img/icons/noon.png') }}" alt="logo"
                                            class="logo me-1">
                                        <span>NOON</span>
                                    </a>
                                </li>
                                <li
                                    class="border rounded border-success d-flex justify-content-center align-items-center m-1">
                                    <a class="dropdown-item text-center d-flex justify-content-center align-items-center"
                                        href="#">
                                        <img src="{{ global_asset('assets/img/icons/noon.png') }}" alt="logo"
                                            class="logo me-1">
                                        <span>NOON</span>
                                    </a>
                                </li>
                                <li
                                    class="border rounded border-success d-flex justify-content-center align-items-center m-1">
                                    <a class="dropdown-item text-center d-flex justify-content-center align-items-center"
                                        href="#">
                                        <img src="{{ global_asset('assets/img/icons/bigo.png') }}" alt="logo"
                                            class="logo me-1">
                                        <span>BIGO Live</span>
                                    </a>
                                </li>
                            </ul>
                        </div>

                        {{-- skill group  --}}
                        <div
                            class="col-lg-5 col-12 mb-lg-0 mb-5 dropdown d-flex align-items-center border border-top-0 border-start-0 tabs py-4">
                            <span class="text-nowrap" style="width: 6rem;">Skill Group:&nbsp;&nbsp; </span>
                            <i class="fa fa-search" aria-hidden="true"></i>
                            <span class="greenIcon mx-2 align-middle text-nowrap overflow-x-hidden px-0 w-75">Fanchen - Live
                                Chat
                                <span aria-hidden="true">&times;</span>
                            </span>
                            <div class="dropdown-toggle w-100 list-dropdown" data-bs-toggle="dropdown" type="button">
                            </div>
                            <ul class="dropdown-menu w-75 shadow p-2" id="upper-dropdown-menu">
                                <h6 class="text-muted">Choose Skill Group</h6>
                                <li
                                    class="border rounded border-success d-flex justify-content-center align-items-center m-1">
                                    <a class="dropdown-item text-center w-100" href="#">Fanchen - Live Chat</a>
                                </li>
                                <li
                                    class="border rounded border-success d-flex justify-content-center align-items-center m-1">
                                    <a class="dropdown-item text-center w-100" href="#">NOON - Live Chat</a>
                                </li>
                                <li
                                    class="border rounded border-success d-flex justify-content-center align-items-center m-1">
                                    <a class="dropdown-item text-center w-100" href="#">SHAHID - Call Center</a>
                                </li>
                                <li
                                    class="border rounded border-success d-flex justify-content-center align-items-center m-1">
                                    <a class="dropdown-item text-center w-100" href="#">Fanchen - Live Chat</a>
                                </li>
                                <li
                                    class="border rounded border-success d-flex justify-content-center align-items-center m-1">
                                    <a class="dropdown-item text-center w-100" href="#">NOON - Live Chat</a>
                                </li>
                            </ul>
                        </div>

                        {{-- clear and apply buttons  --}}
                        <div
                            class="col-lg-2 col-12 border border-top-0 border-start-0 border-end-0 d-flex justify-content-evenly p-3 pt-0 ">
                            <button type="submit" class="btn btn-default btn-sm mt-3">Clear</button>
                            <button type="submit" class="btn btn-success btn-sm px-4 p-0 rounded mt-3">Apply</button>
                        </div>
                    </div>


                    <div class="row p-3 pt-2">
                        <form class="row g-3 mt-0">
                            <div class="col-auto ps-lg-4">
                                <label for="id" class="form-label">User ID</label>
                                <input type="text" class="form-control" id="id" name="id">
                            </div>
                            <div class="col-auto position-relative">
                                <label for="from" class="form-label">From</label>
                                <input type="date" class="form-control text-muted fw-light" id="from"
                                    placeholder="08/16/2023">
                                {{-- <i class="bi bi-calendar3 text-success position-absolute calendar-style"></i> --}}
                            </div>
                            <div class="col-auto position-relative">
                                <label for="inputPassword2" class="form-label">To</label>
                                <input type="date" class="form-control text-muted fw-light" id="to"
                                    placeholder="08/20/2023">
                                {{-- <i class="bi bi-calendar3 text-success position-absolute calendar-style"></i> --}}
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- 3rd row  -->
        <div class="row pt-3 px-0 d-flex">
            <div class="col-xl-9 col-12 mb-xl-0 mb-lg-3">
                <div class="table-responsive overflow-y-auto fixed-height">
                    <table class="table table-bordered rounded rounded overflow-hidden shadow">
                        <thead class="text-center">
                            <tr>
                                <th>
                                    <input type="checkbox" aria-label="Checkbox for following text input">
                                </th>
                                <th class="text-muted">NAME</th>
                                <th class="text-muted">USER ID</th>
                                <th class="text-muted">HR ID</th>
                                <th class="text-muted">ACCOUNT</th>
                                <th class="text-muted">SKILL</th>
                            </tr>
                        </thead>
                        <tbody class="text-center bg-white">
                            <tr>
                                <th scope="row">
                                    <input type="checkbox" aria-label="Checkbox for following text input">
                                </th>
                                <td>Abdulelah Basyouni</td>
                                <td><span class="greenIcon">#652489</span></td>
                                <td>#652489</td>
                                <td class="d-flex align-items-center justify-content-start">
                                    <img src="{{ global_asset('assets/img/icons/bigo.png') }}" alt="logo"
                                        class="logo ms-xl-5 ms-3">
                                    <p class="mb-0 ms-2">BIGO Live</p>
                                </td>
                                <td class="text-nowrap">Fanchen - Live Chat</td>
                                </th>
                            </tr>
                            <tr>
                                <th scope="row">
                                    <input type="checkbox" aria-label="Checkbox for following text input">
                                </th>
                                <td>Asem</td>
                                <td><span class="greenIcon">#652489</span></td>
                                <td>#652489</td>
                                <td class="d-flex align-items-center justify-content-start">
                                    <img src="{{ global_asset('assets/img/icons/noon.png') }}" alt="logo"
                                        class="logo ms-xl-5 ms-3">
                                    <p class="mb-0 ms-2">NOON</p>
                                </td>
                                <td class="text-nowrap">Fanchen - Live Chat</td>
                                </th>
                            </tr>
                            <tr>
                                <th scope="row">
                                    <input type="checkbox" aria-label="Checkbox for following text input">
                                </th>
                                <td>Ali</td>
                                <td><span class="greenIcon">#652489</span></td>
                                <td>#652489</td>
                                <td class="d-flex align-items-center justify-content-start">
                                    <img src="{{ global_asset('assets/img/icons/shahid.png') }}" alt="logo"
                                        class="logo ms-xl-5 ms-3">
                                    <p class="mb-0 ms-2">SHAHID</p>
                                </td>
                                <td class="text-nowrap">Fanchen - Live Chat</td>
                                </th>
                            </tr>
                            <tr>
                                <th scope="row">
                                    <input type="checkbox" aria-label="Checkbox for following text input">
                                </th>
                                <td>Mohammad</td>
                                <td><span class="greenIcon">#652489</span></td>
                                <td>#652489</td>
                                <td class="d-flex align-items-center justify-content-start">
                                    <img src="{{ global_asset('assets/img/icons/noon.png') }}" alt="logo"
                                        class="logo ms-xl-5 ms-3">
                                    <p class="mb-0 ms-2">NOON</p>
                                </td>
                                <td class="text-nowrap">Fanchen - Live Chat</td>
                                </th>
                            </tr>
                            <tr>
                                <th scope="row">
                                    <input type="checkbox" aria-label="Checkbox for following text input">
                                </th>
                                <td>Majd</td>
                                <td><span class="greenIcon">#652489</span></td>
                                <td>#652489</td>
                                <td class="d-flex align-items-center justify-content-start">
                                    <img src="{{ global_asset('assets/img/icons/shahid.png') }}" alt="logo"
                                        class="logo ms-xl-5 ms-3">
                                    <p class="mb-0 ms-2">SHAHID</p>
                                </td>
                                <td class="text-nowrap">Fanchen - Live Chat</td>
                                </th>
                            </tr>
                            <tr>
                                <th scope="row">
                                    <input type="checkbox" aria-label="Checkbox for following text input">
                                </th>
                                <td>Khaled</td>
                                <td><span class="greenIcon">#652489</span></td>
                                <td>#652489</td>
                                <td class="d-flex align-items-center justify-content-start">
                                    <img src="{{ global_asset('assets/img/icons/bigo.png') }}" alt="logo"
                                        class="logo ms-xl-5 ms-3">
                                    <p class="mb-0 ms-2">BIGO Live</p>
                                </td>
                                <td class="text-nowrap">Fanchen - live Chat</td>
                                </th>
                            </tr>
                            <tr>
                                <th scope="row">
                                    <input type="checkbox" aria-label="Checkbox for following text input">
                                </th>
                                <td>Khaled</td>
                                <td><span class="greenIcon">#652489</span></td>
                                <td>#652489</td>
                                <td class="d-flex align-items-center justify-content-start">
                                    <img src="{{ global_asset('assets/img/icons/bigo.png') }}" alt="logo"
                                        class="logo ms-xl-5 ms-3">
                                    <p class="mb-0 ms-2">BIGO Live</p>
                                </td>
                                <td class="text-nowrap">Fanchen - live Chat</td>
                                </th>
                            </tr>

                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-xl-3 col-12 mt-4 mt-md-3 mt-lg-0 d-flex flex-column fixed-height overflow-y-scroll">
                <div class="card  rounded rounded">
                    <h5 class="m-3 pb-0 mb-0">Date</h5>
                    <hr>
                    {{-- the outermost card  --}}
                    <div class="card-body d-flex flex-column align-items-center justify-content-center pt-0">

                        {{-- 1st inner card  --}}
                        <div class="card w-100 rounded mb-2">
                            <div class="card-body d-flex justify-content-evenly p-2">
                                <div
                                    class="col-xl-3 col-2 badge rounded-circle m-1 text-center align-middle badges outlines fs-5">
                                    1</div>
                                <div class="col-xl-9 col-10">
                                    <p class="text-nowrap-lg m-0">Abdelelah Basyouni</p>
                                    <b>08/17/2023</b>
                                    <img src="{{ global_asset('assets/img/icons/edit.png') }}" alt="edit icon"
                                        class="edit-icon" data-bs-toggle="modal" data-bs-target="#shiftStatusModal">
                                </div>
                            </div>
                        </div>

                        {{-- 2nd inner card  --}}
                        <div class="card w-100 rounded mb-2">
                            <div class="card-body d-flex justify-content-evenly p-2">
                                <div
                                    class="col-xl-3 col-2 badge rounded-circle m-1 text-center align-middle badges outlines fs-5">
                                    2</div>
                                <div class="col-xl-9 col-10">
                                    <p class="text-nowrap-lg m-0">Abdelelah Basyouni</p>
                                    <b>08/17/2023</b>
                                    <img src="{{ global_asset('assets/img/icons/edit.png') }}" alt="edit icon"
                                        class="edit-icon" data-bs-toggle="modal" data-bs-target="#shiftStatusModal">
                                </div>
                            </div>
                        </div>

                        {{-- 3rd inner card  --}}
                        <div class="card w-100 rounded mb-2">
                            <div class="card-body d-flex justify-content-evenly p-2">
                                <div
                                    class="col-xl-3 col-2 badge rounded-circle m-1 text-center align-middle badges outlines fs-5">
                                    3</div>
                                <div class="col-xl-9 col-10">
                                    <p class="text-nowrap-lg m-0">Abdelelah Basyouni</p>
                                    <b>08/17/2023</b>
                                    <img src="{{ global_asset('assets/img/icons/edit.png') }}" alt="edit icon"
                                        class="edit-icon" data-bs-toggle="modal" data-bs-target="#shiftStatusModal">
                                </div>
                            </div>
                        </div>

                        {{-- 4th inner card --}}
                        <div class="card w-100 rounded mb-2">
                            <div class="card-body d-flex justify-content-evenly p-2">
                                <div
                                    class="col-xl-3 col-2 badge rounded-circle m-1 text-center align-middle badges outlines fs-5">
                                    4</div>
                                <div class="col-xl-9 col-10">
                                    <p class="text-nowrap-lg m-0">Abdelelah Basyouni</p>
                                    <b>08/17/2023</b>
                                    <img src="{{ global_asset('assets/img/icons/edit.png') }}" alt="edit icon"
                                        class="edit-icon" data-bs-toggle="modal" data-bs-target="#shiftStatusModal">
                                </div>
                            </div>
                        </div>

                        {{-- 5th inner card --}}
                        <div class="card w-100 rounded mb-2">
                            <div class="card-body d-flex justify-content-evenly p-2">
                                <div
                                    class="col-xl-3 col-2 badge rounded-circle m-1 text-center align-middle badges outlines fs-5">
                                    5</div>
                                <div class="col-xl-9 col-10">
                                    <p class="text-nowrap-lg m-0">Abdelelah Basyouni</p>
                                    <b>08/17/2023</b>
                                    <img src="{{ global_asset('assets/img/icons/edit.png') }}" alt="edit icon"
                                        class="edit-icon" data-bs-toggle="modal" data-bs-target="#shiftStatusModal">
                                </div>
                            </div>
                        </div>

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

    <!-- Modal -->
    <div class="modal fade" id="shiftStatusModal" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header gradient-border">
                    <h1 class="modal-title fs-4 text-white m-2">Edit Shift Time/Status</h1>
                    <i class="bi bi-x-circle fs-2 modal-close" data-bs-dismiss="modal" aria-label="Close"></i>
                    <!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -->
                </div>
                <div class="modal-body d-flex flex-column justify-content-evenly px-4">
                    <form action="">
                        <div class="mb-3">
                            <label for="exampleFormControlInput1" class="form-label text-muted">Shift Name</label>
                            <div class="dropdown">
                                <div class="dropdown-toggle border" type="div" data-bs-toggle="dropdown"
                                    aria-expanded="false" id="modal-dropdown">
                                </div>
                                <ul id="modal-dropdown-menu" class="dropdown-menu border rounded">
                                    <li class="border-bottom p-1"><a class="dropdown-item w-100" href="#">AB</a>
                                    </li>
                                    <li class="border-bottom p-1"><a class="dropdown-item w-100" href="#">ADB</a>
                                    </li>
                                    <li class="border-bottom p-1"><a class="dropdown-item w-100" href="#">A</a>
                                    </li>
                                    <li class="border-bottom p-1"><a class="dropdown-item w-100" href="#">BC</a>
                                    </li>
                                    <li class="p-1"><a class="dropdown-item w-100" href="#">SA</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="exampleFormControlInput1" class="form-label text-muted">Status</label>
                            <div class="dropdown">
                                <div class="dropdown-toggle border" type="div" data-bs-toggle="dropdown"
                                    aria-expanded="false" id="modal-dropdown">
                                </div>
                                <ul id="modal-dropdown-menu" class="dropdown-menu border rounded">
                                    <li class="d-flex justify-content-start border-bottom p-1">
                                        <img src="{{ global_asset('assets/img/activity/ON (Regular).png') }}"
                                            class="logo status-icon">
                                        <a class="dropdown-item w-100 d-inline" href="#">ON (Regular)</a>
                                    </li>
                                    <li class="d-flex justify-content-start border-bottom p-1">
                                        <img src="{{ global_asset('assets/img/activity/break.png') }}"
                                            class="logo status-icon">
                                        <a class="dropdown-item w-100" href="#">Break</a>
                                    </li>
                                    <li class="d-flex justify-content-start border-bottom p-1">
                                        <img src="{{ global_asset('assets/img/activity/off.png') }}"
                                            class="logo status-icon">
                                        <a class="dropdown-item w-100" href="#">OFF</a>
                                    </li>
                                    <li class="d-flex justify-content-start border-bottom p-1">
                                        <img src="{{ global_asset('assets/img/activity/sick leave.png') }}"
                                            class="logo status-icon">
                                        <a class="dropdown-item w-100" href="#">Sick Leave</a>
                                    </li>
                                    <li class="d-flex justify-content-start border-bottom p-1">
                                        <img src="{{ global_asset('assets/img/activity/ES.png') }}"
                                            class="logo status-icon">
                                        <a class="dropdown-item w-100" href="#">ES</a>
                                    </li>
                                    <li class="d-flex justify-content-start border-bottom p-1">
                                        <img src="{{ global_asset('assets/img/activity/ML.png') }}"
                                            class="logo status-icon">
                                        <a class="dropdown-item w-100" href="#">ML</a>
                                    </li>
                                    <li class="d-flex justify-content-start">
                                        <img src="{{ global_asset('assets/img/activity/Annual.png') }}"
                                            class="logo status-icon">
                                        <a class="dropdown-item w-100" href="#">AL</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </form>
                    <div class="d-flex justify-content-around">
                        <button type="button"
                            class="btn btn-success w-50 mx-2 submit-button rounded fw-light">Submit</button>
                        <button type="button" class="btn btn-outline-dark w-50 mx-2 rounded"
                            data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

{{-- Script Section --}}
@section('script')
    <script></script>

@endsection