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

{{-- Tilte Section --}}
@section('title', 'WFM Agent')

{{-- Style Section --}}
@section('style')
    <!-- Css file for summernote js plugins  -->
    <style>
        .logoInternal {
            aspect-ratio: 1/1;
            height: 20px;
            width: 20px;
            float: left;
            border-radius: 100%;
        }

        #shift-button {
            margin-left: 35%;
        }

        .grey-background {
            background-color: #FBFBFB !important;
        }

        .filter-buttons {
            background-color: white;
            color: black;
            font-size: 0.7rem;
        }

        .filter-buttons:hover {
            background-color: #00A34E;
            color: white;
        }

        .filter-buttons-active {
            background-color: #00A34E;
            color: white;
        }

        .frequency-buttons {
            background-color: #D6F0E2;
            color: black;
        }

        .frequency-buttons:hover {
            background-color: #00A34E;
        }

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

        .table-header {
            display: flex;
            justify-content: space-between;
        }

        .toggle-button {
            background-color: transparent;
            border: none;
            cursor: pointer;
            outline: none;
        }

        #tableCollapse-1 {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-in-out;
        }

        tr>th {
            text-align: center !important;
        }

        td {
            text-align: center !important;
            text-wrap: nowrap !important;
        }

        tr>td {
            height: 4rem;
            vertical-align: middle;
        }

        #calendar_first {
            padding: 1rem !important;
        }
    </style>

    <!-- jquery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

    <!-- calendar style and script  -->
    <link rel="stylesheet" href="{{ global_asset('assets/css/small-calendar-agent-styles/style.css') }}">
    <script src="{{ global_asset('assets/js/small-calendar-agent-scripts/main.js') }}"></script>

@endsection

{{-- Content Section --}}
@section('content')
    <div class="container-fluid px-5">
        <!-- 1st card row  -->
        <div class="row p-3">
            <div class="card shadow rounded rounded mb-1 p-3">
                <div class="card-body">
                    <img src="{{ global_asset('assets/img/icons/schedule_managment.png') }}" alt="Schedule Management icon" class="logoInternal me-1">
                    <h4>My Schedule</h4>
                    <h6 class="mt-1 text-muted">
                        Check your schedule details on weekly basis
                    </h6>
                </div>
            </div>
        </div>

        <!-- table row  -->
        <div class="row pt-3">
            <div class="col-12">
                <div class="table-responsive">
                    <table class="table table-bordered rounded rounded overflow-hidden shadow">
                        <thead class="text-center align-middle">
                            <tr>
                                <td class="text-center grey-background">USER ID</td>
                                <td class="text-center grey-background">HR ID</td>
                                <td class="text-center grey-background">ACCOUNT</td>
                                <td class="text-center grey-background">SKILL</td>
                            </tr>
                        </thead>
                        <tbody class="bg-white text-center">
                            <tr>
                                <td class="text-center">{{ $user->first_name }}</td>
                                <td class="text-center">{{ $user->last_name }}</td>
                                <td class="d-flex justify-content-center text-center align-items-center">
                                    {{-- <img src="{{ global_asset('assets/img/icons/bigo.png') }}" alt="logo"
                                        class="logo me-3" /> --}}
                                    <span>{{ $account }}</span>
                                </td>
                                <td class="text-center">{{ $user?->wfmUserSkill?->wfmSkill?->skill_name }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- bottom row  -->
        <div class="row p-3">
            <div class="card rounded px-0">
                <div class="card-body px-0">
                    <!-- header row  -->
                    <div class="row">
                        <div class="row d-flex align-items-baseline mb-2 px-lg-4 px-0">
                            <div class="col-xl-7 col-12 pt-3 ps-xl-4 px-3">
                                <img src="{{ global_asset('assets/img/icons/schedule_details.png') }}" class="logo rounded-0 me-2 ms-xl-4 ms-lg-3 ms-5 align-bottom" alt="Schedule Details" />
                                <h4 class="d-inline ms-2">Schedule Details</h4>
                            </div>
                            <!-- buttons column  -->
                            <div class="col-xl-5 col-12 d-flex justify-content-xl-end mt-xl-0 mt-2 ms-xl-0 ms-4">
                                <a href="{{ route('agent.wfm.daily-schedule.index') }}" class="btn btn-success w-25 border-end-0 text-nowrap frequency-buttons rounded-end-0">Daily</a>
                                <a href="{{ route('agent.wfm.weekly-schedule.index') }}" class="btn btn-success w-25 border-end-0 text-nowrap filter-buttons-active rounded-end-0 rounded-start-0">Weekly</a>
                                <a href="{{ route('agent.wfm.monthly-schedule.index') }}" class="btn btn-success w-25 text-nowrap frequency-buttons rounded-start-0">Monthly</a>
                            </div>
                        </div>
                    </div>
                    <hr />

                    <!-- tables and calendar row  -->

                    <div class="row">
                        <!-- tables column  -->
                        <div class="col-lg-9 col-12 mt-2" id="schedules-container">

                            @foreach ($schedules as $key => $schedule)
                                <div class="table-responsive mb-3 mx-xl-0 ms-xl-5 mx-5">
                                    <table class="table rounded rounded overflow-hidden">
                                        <thead class="grey-background text-center">
                                            <tr class="text-center ">
                                                <th class="border-end-0">DAY</th>
                                                <th>SCHEDULE</th>
                                                <th class="d-flex justify-content-center align-items-baseline">
                                                    <img class="logoInternal" src="{{ global_asset('assets/img/activity/activity.png') }}" alt="activity icon" class="logo">
                                                    <span class="ms-1">ACTIVITY</span>
                                                </th>
                                                <th>START</th>
                                                <th>END</th>
                                                <th class="table-header">
                                                    <button class="toggle-button" id="toggleButton-{{ $key + 1 }}" aria-expanded="false">
                                                        <i class="fas fa-chevron-right"></i>
                                                    </button>
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody id="tableCollapse-{{ $key + 1 }}" class="collapse text-center show">
                                            <tr>
                                                <td style="width: 15rem">{{ $schedule->date->format('l') }} {{ $schedule->date->day }}</td>
                                                {{-- <td>00:00 AM - 00:00 AM</td> --}}
                                                <td style="width: 15rem">{{ $schedule->shift?->from->format('h:i A') ?? 'X' }} -
                                                    {{ $schedule->shift?->to->format('h:i A') ?? 'X' }}</td>
                                                <td style="width: 15rem" class="d-flex justify-content-center text-center text-nowrap align-items-center">
                                                    <img src="{{ $schedule->wfm_work_day_type_id == 2 ? global_asset('assets/img/activity/off.png') : global_asset('assets/img/activity/ON (Regular).png') }}" alt="logo" class="logoInternal me-3" />
                                                    <span>{{ $schedule->wfm_work_day_type_id == 2 ? 'OFF' : 'ON' }}</span>
                                                </td style="width: 15rem">
                                                {{-- <td>09:00 AM</td> --}}
                                                <td style="width: 15rem">{{ $schedule->shift?->from->format('h:i A') ?? '-' }}</td>
                                                {{-- <td>06:00 PM</td> --}}
                                                <td style="width: 15rem">{{ $schedule->shift?->to->format('h:i A') ?? '-' }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            @endforeach

                            {{-- <div class="table-responsive mb-3 mx-xl-0 ms-xl-5 mx-5">
                                <table class="table rounded rounded overflow-hidden">
                                    <thead class="grey-background text-center">
                                        <tr>
                                            <th>DAY</th>
                                            <th>SCHEDULE</th>
                                            <th class="d-flex justify-content-center align-items-baseline">
                                                <img src="{{ global_asset('assets/img/activity/activity.png') }}" alt="activity icon" class="logo">
                                                <span class="ms-1">ACTIVITY</span>
                                            </th>
                                            <th>START</th>
                                            <th>END</th>
                                            <th class="table-header">
                                                <button class="toggle-button" id="toggleButton-2" aria-expanded="false">
                                                    <i class="fas fa-chevron-right"></i>
                                                </button>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableCollapse-2" class="collapse text-center show">
                                        <tr>
                                            <td>Friday 02</td>
                                            <td>00:00 AM - 00:00 AM</td>
                                            <td
                                                class="d-flex justify-content-center text-center text-nowrap align-items-center">
                                                <img src="{{ global_asset('assets/img/activity/ON (Regular).png') }}" alt="logo"
                                                    class="logo me-3" />
                                                <span>ON</span>
                                            </td>
                                            <td>09:00 AM</td>
                                            <td>06:00 PM</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="table-responsive mb-3 mx-xl-0 ms-xl-5 mx-5">
                                <table class="table rounded rounded overflow-hidden">
                                    <thead class="grey-background text-center">
                                        <tr>
                                            <th>DAY</th>
                                            <th>SCHEDULE</th>
                                            <th class="d-flex justify-content-center align-items-baseline">
                                                <img src="{{ global_asset('assets/img/activity/activity.png') }}" alt="activity icon" class="logo">
                                                <span class="ms-1">ACTIVITY</span>
                                            </th>
                                            <th>START</th>
                                            <th>END</th>
                                            <th class="table-header">
                                                <button class="toggle-button" id="toggleButton-3" aria-expanded="false">
                                                    <i class="fas fa-chevron-right"></i>
                                                </button>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableCollapse-3" class="collapse text-center show">
                                        <tr>
                                            <td>Friday 02</td>
                                            <td>00:00 AM - 00:00 AM</td>
                                            <td
                                                class="d-flex justify-content-center text-center text-nowrap align-items-center">
                                                <img src="{{ global_asset('assets/img/activity/ON (Regular).png') }}" alt="logo"
                                                    class="logo me-3" />
                                                <span>ON</span>
                                            </td>
                                            <td>09:00 AM</td>
                                            <td>06:00 PM</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="table-responsive mb-3 mx-xl-0 ms-xl-5 mx-5">
                                <table class="table rounded rounded overflow-hidden">
                                    <thead class="grey-background text-center">
                                        <tr>
                                            <th>DAY</th>
                                            <th>SCHEDULE</th>
                                            <th class="d-flex justify-content-center align-items-baseline">
                                                <img src="{{ global_asset('assets/img/activity/activity.png') }}" alt="activity icon" class="logo">
                                                <span class="ms-1">ACTIVITY</span>
                                            </th>
                                            <th>START</th>
                                            <th>END</th>
                                            <th class="table-header">
                                                <button class="toggle-button" id="toggleButton-4" aria-expanded="false">
                                                    <i class="fas fa-chevron-right"></i>
                                                </button>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableCollapse-4" class="collapse text-center show">
                                        <tr>
                                            <td>Friday 02</td>
                                            <td>00:00 AM - 00:00 AM</td>
                                            <td
                                                class="d-flex justify-content-center text-center text-nowrap align-items-center">
                                                <img src="{{ global_asset('assets/img/activity/ON (Regular).png') }}" alt="logo"
                                                    class="logo me-3" />
                                                <span>ON</span>
                                            </td>
                                            <td>09:00 AM</td>
                                            <td>06:00 PM</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="table-responsive mb-3 mx-xl-0 ms-xl-5 mx-5">
                                <table class="table rounded rounded overflow-hidden">
                                    <thead class="grey-background text-center">
                                        <tr>
                                            <th>DAY</th>
                                            <th>SCHEDULE</th>
                                            <th class="d-flex justify-content-center align-items-baseline">
                                                <img src="{{ global_asset('assets/img/activity/activity.png') }}" alt="activity icon" class="logo">
                                                <span class="ms-1">ACTIVITY</span>
                                            </th>
                                            <th>START</th>
                                            <th>END</th>
                                            <th class="table-header">
                                                <button class="toggle-button" id="toggleButton-5" aria-expanded="false">
                                                    <i class="fas fa-chevron-right"></i>
                                                </button>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableCollapse-5" class="collapse text-center show">
                                        <tr>
                                            <td>Friday 02</td>
                                            <td>00:00 AM - 00:00 AM</td>
                                            <td
                                                class="d-flex justify-content-center text-center text-nowrap align-items-center">
                                                <img src="{{ global_asset('assets/img/activity/ON (Regular).png') }}" alt="logo"
                                                    class="logo me-3" />
                                                <span>ON</span>
                                            </td>
                                            <td>09:00 AM</td>
                                            <td>06:00 PM</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div> --}}

                            {{-- <button class="btn btn-outline-success rounded mb-3 p-2 px-4 text-center w-50 mx-auto">
                                New Shift Start at : 12:00 AM - 09:00 AM
                            </button> --}}

                            {{-- <div class="table-responsive mb-3 mx-xl-0 ms-xl-5 mx-5">
                                <table class="table rounded rounded overflow-hidden">
                                    <thead class="grey-background text-center">
                                        <tr>
                                            <th>DAY</th>
                                            <th>SCHEDULE</th>
                                            <th class="d-flex justify-content-center align-items-baseline">
                                                <img src="{{ global_asset('assets/img/activity/activity.png') }}" alt="activity icon" class="logo">
                                                <span class="ms-1">ACTIVITY</span>
                                            </th>
                                            <th>START</th>
                                            <th>END</th>
                                            <th class="table-header">
                                                <button class="toggle-button" id="toggleButton-6" aria-expanded="false">
                                                    <i class="fas fa-chevron-right"></i>
                                                </button>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableCollapse-6" class="collapse text-center show">
                                        <tr>
                                            <td>Friday 02</td>
                                            <td>00:00 AM - 00:00 AM</td>
                                            <td
                                                class="d-flex justify-content-center text-center text-nowrap align-items-center">
                                                <img src="{{ global_asset('assets/img/activity/ON (Regular).png') }}" alt="logo"
                                                    class="logo me-3" />
                                                <span>ON</span>
                                            </td>
                                            <td>09:00 AM</td>
                                            <td>06:00 PM</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="table-responsive mb-3 mx-xl-0 ms-xl-5 mx-5">
                                <table class="table rounded rounded overflow-hidden">
                                    <thead class="grey-background text-center">
                                        <tr>
                                            <th>DAY</th>
                                            <th>SCHEDULE</th>
                                            <th class="d-flex justify-content-center align-items-baseline">
                                                <img src="{{ global_asset('assets/img/activity/activity.png') }}" alt="activity icon" class="logo">
                                                <span class="ms-1">ACTIVITY</span>
                                            </th>
                                            <th>START</th>
                                            <th>END</th>
                                            <th class="table-header">
                                                <button class="toggle-button" id="toggleButton-7" aria-expanded="false">
                                                    <i class="fas fa-chevron-right"></i>
                                                </button>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableCollapse-7" class="collapse text-center show">
                                        <tr>
                                            <td>Friday 02</td>
                                            <td>00:00 AM - 00:00 AM</td>
                                            <td
                                                class="d-flex justify-content-center text-center text-nowrap align-items-center">
                                                <img src="{{ global_asset('assets/img/activity/ON (Regular).png') }}" alt="logo"
                                                    class="logo me-3" />
                                                <span>ON</span>
                                            </td>
                                            <td>09:00 AM</td>
                                            <td>06:00 PM</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div> --}}

                            <!-- end of tables column  -->
                        </div>

                        <!-- calendar column  -->
                        <div class="col-xxl-3 col-12 mt-2">
                            <div class="card rounded rounded flex-grow-1 mx-xxl-0 me-xxl-3 me-xl-3 mx-5">
                                <h5 class="m-3 pb-0 mb-0">Date</h5>
                                <hr>
                                <div class="card-body d-flex flex-column align-items-center justify-content-center px-0 pt-0">
                                    <!-- calendar here  -->
                                    <section class="ftco-section">
                                        <!-- <div class="container"> -->
                                        <!-- <div class="row justify-content-center">
                                                                                    <div class="col-md-6 text-center mb-5">
                                                                                      <h2 class="heading-section">Calendar #01</h2>
                                                                                    </div> -->
                                        <!-- </div> -->
                                        <!-- <div class="row"> -->
                                        <!-- <div class="col-md-12"> -->
                                        <div class="calendar calendar-first" id="calendar_first">
                                            <div class="calendar_header">
                                                <button class="switch-month switch-left"> <i class="fa fa-chevron-left"></i></button>
                                                <h6></h6>
                                                <button class="switch-month switch-right"> <i class="fa fa-chevron-right"></i></button>
                                            </div>
                                            <div class="calendar_weekdays"></div>
                                            <div class="calendar_content"></div>
                                        </div>
                                        <!-- </div> -->
                                        <!-- </div> -->
                                </div>
                                </section>

                                <h5 class="align-self-start ps-3">Filter</h5>
                                <hr class="w-100 mt-0">

                                <div class="d-flex justify-content-start ms-4">
                                    <button class="btn btn-outline-success btn-sm rounded px-3 p-1 filter-buttons-active apply-week-filter" id="filter-all">All</button>
                                    <button class="btn btn-outline-success btn-sm rounded px-3 p-1 ms-1 filter-buttons text-muted apply-week-filter" id="filter-workingDays">Working days</button>
                                    <button class="btn btn-outline-success btn-sm rounded px-3 p-1 ms-1 filter-buttons text-muted apply-week-filter" id="filter-daysOff">Days OFF</button>
                                    <!-- end of 3 buttons column  -->
                                </div>
                                <button class="btn btn-success filter-buttons-active px-4 p-2 mt-3 rounded mb-3 w-50 align-self-center" id="apply-week">
                                    Apply
                                </button>
                                <!-- end of card body column  -->
                            </div>
                            <!-- end of card -->
                        </div>
                        <!-- end of calendars column  -->
                    </div>
                </div>
                <!-- lower card body  -->
            </div>
            <!-- lower card div  -->
        </div>

        <!-- bottom row div -->



    </div>

@endsection

{{-- Script Section --}}
@section('script')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Get all buttons
            const filterButtons = document.querySelectorAll(".btn.btn-outline-success.btn-sm");

            // Add click event listeners to each button
            filterButtons.forEach(button => {
                button.addEventListener("click", function() {
                    // Remove "filter-buttons-active" class from all buttons
                    filterButtons.forEach(btn => {
                        btn.classList.remove("filter-buttons-active");
                        if (!btn.classList.contains("filter-buttons")) {
                            btn.classList.add("filter-buttons");
                        }
                    });

                    // Add "filter-buttons-active" class to the clicked button
                    this.classList.add("filter-buttons-active");
                    this.classList.remove("filter-buttons");

                    // Log the name of the clicked button
                    const buttonText = this.textContent.trim();
                    console.log(buttonText);
                });
            });
        });

        tableAccordion();

        function tableAccordion() {
            const numberOfTables = 8;

            for (let id = 1; id <= numberOfTables; id++) { // Change the loop condition to include the last table
                const toggleButton = document.getElementById(`toggleButton-${id}`);
                const body = document.getElementById(`tableCollapse-${id}`);

                // Set the initial max-height to "none" (show) for tables with the "show" class
                if (body.classList.contains("show")) {
                    body.style.maxHeight = "none";
                    toggleButton.setAttribute("aria-expanded", "true");
                    toggleButton.innerHTML = '<i class="fas fa-chevron-down"></i>';
                }

                toggleButton.addEventListener("click", function() {
                    const expanded = toggleButton.getAttribute("aria-expanded");
                    const icon = toggleButton.querySelector("i");

                    body.classList.toggle("show", expanded === "false");
                    toggleButton.setAttribute("aria-expanded", expanded === "false" ? "true" : "false");
                    icon.classList.toggle("fa-chevron-down", expanded === "false");
                    icon.classList.toggle("fa-chevron-right", expanded === "true");

                    // Update the max-height based on the expanded state
                    body.style.maxHeight = expanded === "false" ? `${body.scrollHeight}px` : "0";
                });
            }
        }
    </script>

@endsection