@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: #00a34e;
            color: white;
        }

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

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

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

        tr>td {
            height: 4rem;
        }

        .schedule-day-image-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
        }

        .schedule-day-image {
            aspect-ratio: 1/1;
            width: 13rem;
        }

        #day-number {
            top: 44%;
        }

        /* #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-daily.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 daily 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 text-nowrap">
                        <thead class="text-center grey-background">
                            <tr class="align-middle grey-background">
                                <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 align-middle">
                            <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 ps-4 pt-3 d-flex justify-content-start align-items-baseline">
                                <img src="{{ global_asset('assets/img/icons/schedule_details.png') }}"
                                    class="logoInternal rounded-0 me-3 ms-xl-3 ms-5" alt="Schedule Details" />
                                <h4 class="d-inline text-nowrap">Schedule Details</h4>
                                <a href="{{ route('agent.wfm.daily-schedule-icons.index') }}"
                                    class="btn btn-dark d-inline rounded me-4 ms-xl-3 ms-5 mt-lg-0 mt-md-0 mt-2 px-4">
                                    Icons
                                </a>
                            </div>

                            <!-- buttons column  -->
                            <div class="col-xl-5 col-12 d-flex justify-content-xl-end mt-2 ms-xl-0 ms-5">
                                <a href="{{ route('agent.wfm.daily-schedule.index') }}"
                                    class="btn btn-success w-25 border-end-0 text-nowrap filter-buttons rounded-end-0">
                                    Daily
                                </a>
                                <a href="{{ route('agent.wfm.weekly-schedule.index') }}"
                                    class="btn btn-success w-25 border-end-0 border-start-0 text-nowrap frequency-buttons 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 border-start-0">
                                    Monthly
                                </a>
                            </div>
                        </div>
                    </div>
                    <hr />

                    <!-- tables and calendar row  -->

                    <div class="row d-flex">
                        <!-- tables column  -->
                        <div class="col-xl-9 col-12 mt-3">
                            <div class="table-responsive mx-xl-0 ms-xl-5 mx-5 d-flex flex-column h-100 ">
                                <table class="table table-bordered rounded rounded overflow-hidden" style="flex: 1;">
                                    <thead class="text-center grey-background">
                                        <tr class="grey-background">
                                            <td class="text-center align-middle grey-background" colspan="2">DAY &
                                                SCHEDULE</td>
                                            <td class="text-center align-middle grey-background">ACTIVITY</td>
                                            <td class="text-center align-middle grey-background">START</td>
                                            <td class="text-center align-middle grey-background">END</td>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white align-middle">
                                        <tr>
                                            <td class="text-center border-end position-relative" colspan="2"
                                                rowspan="20" id="day-td">

                                                <p class="fs-2 fw-bold mb-0" id="day-word">Friday</p>
                                                <div class="schedule-day-image-container">
                                                    <img src="{{ global_asset('assets/img/icons/schedule_details_day_icon.png') }}"
                                                        alt="schedule details day image"
                                                        class="schedule-day-image image-responsive" />
                                                    <p class="display-2 fw-bold d-inline mb-0 text-nowrap position-absolute text-white"
                                                        id="day-number">03</p>
                                                </div>
                                            </td>
                                            <td id="regular">
                                                @if ($schedule?->shift ?? null)
                                                    <div id="day_on"
                                                        class="d-flex justify-content-start align-items-center text-nowrap"
                                                        style="padding-left:30%">
                                                        <img src="{{ global_asset('assets/img/activity/ON (Regular).png') }}"
                                                            alt="logo" class="logoInternal me-3" />
                                                        <span>On</span>
                                                    </div>
                                                @else
                                                    <div id="day_off"
                                                        class="d-flex justify-content-start align-items-center text-nowrap"
                                                        style="padding-left:30%">
                                                        <img src="{{ global_asset('assets/img/activity/OFF.png') }}"
                                                            alt="logo" class="logoInternal me-3" />
                                                        <span>OFF</span>
                                                    </div>
                                                @endif
                                            </td>
                                            @if ($schedule)
                                                <td class="text-center text-nowrap" id="from">
                                                    {{ $schedule?->shift?->from->format('h:i A') ?? 'No Shift' }}</td>
                                                <td class="text-center text-nowrap" id="to">
                                                    {{ $schedule?->shift?->to->format('h:i A') ?? 'No Shift' }}
                                                </td>
                                            @else
                                                <td class="text-center text-nowrap" id="from">
                                                    No Shift</td>
                                                <td class="text-center text-nowrap" id="to">
                                                    No Shift
                                                </td>
                                            @endif
                                            {{-- <td class="text-center text-nowrap">09:00 AM</td>
                                            <td class="text-center text-nowrap">06:00 PM</td> --}}
                                        </tr>
                                        @if ($breaks)
                                            @foreach ($breaks as $key => $break)
                                                <tr id="break-{{ $key + 1 }}">
                                                    <td>
                                                        <div class="d-flex h-100 text-nowrap justify-content-start align-items-center overflow-hidden"
                                                            style="padding-left:30%">
                                                            <img src="{{ global_asset('assets/img/activity/break.png') }}"
                                                                alt="logo" class="logoInternal me-3" />
                                                            <span>Break</span>
                                                        </div>
                                                    </td>
                                                    <td class="text-center text-nowrap" id="break-from">
                                                        {{ $break->break_from->format('h:i A') }}</td>
                                                    <td class="text-center text-nowrap" id="break-to">
                                                        {{ $break->break_to->format('h:i A') }}
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @endif
                                        {{-- <tr>
                                            <td class="d-flex text-nowrap justify-content-start align-items-center overflow-hidden"
                                                style="padding-left: 30%">
                                                <img src="{{ global_asset('assets/img/activity/ON (Regular).png') }}"
                                                    alt="logo" class="logo me-3" />
                                                <span>On</span>
                                            </td>
                                            <td class="text-center text-nowrap">09:00 AM</td>
                                            <td class="text-center text-nowrap">06:00 PM</td>
                                        </tr> --}}
                                        {{-- <tr>
                                            <td class="d-flex text-nowrap justify-content-start align-items-center overflow-hidden"
                                                style="padding-left: 30%">
                                                <img src="{{ global_asset('assets/img/activity/break.png') }}"
                                                    alt="logo" class="logo me-3" />
                                                <span>Break</span>
                                            </td>
                                            <td class="text-center text-nowrap">09:00 AM</td>
                                            <td class="text-center text-nowrap">06:00 PM</td>
                                        </tr>
                                        <tr>
                                            <td class="d-flex text-nowrap justify-content-start align-items-center overflow-hidden"
                                                style="padding-left: 30%">
                                                <img src="{{ global_asset('assets/img/activity/ON (Regular).png') }}"
                                                    alt="logo" class="logo me-3" />
                                                <span>On</span>
                                            </td>
                                            <td class="text-center text-nowrap">09:00 AM</td>
                                            <td class="text-center text-nowrap">06:00 PM</td>
                                        </tr> --}}
                                    </tbody>
                                </table>
                            </div>

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

                        <!-- calendar column  -->
                        <div class="col-xl-3 col-12 mt-3">
                            <div class="card rounded rounded m-0 pb-3 mx-xl-0 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-2 py-0 mb-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> -->
                                    </section>
                                </div>
                                <button id="apply-day"
                                    class="btn btn-success filter-buttons px-1 p-1 mt-1 rounded w-50 align-self-center">
                                    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>


    </div>

@endsection

{{-- Script Section --}}
@section('script')
    <script>
        // getting the date of today
        // Get the current date
        const currentDate = new Date();

        // Extract the day part of the date
        const day = currentDate.getDate();

        // Find the div element by its id "day-number"
        const dayNumberDiv = document.getElementById("day-number");

        // Set the day as the content of the div
        dayNumberDiv.textContent = day;

        // Get the day of the week (0 for Sunday, 1 for Monday, etc.)
        const dayOfWeek = currentDate.getDay();

        // Array of day names
        const dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

        // Find the div element by its id "day-word"
        const dayWordDiv = document.getElementById("day-word");

        // Set the day name as the content of the div
        dayWordDiv.textContent = dayNames[dayOfWeek];
    </script>

@endsection