@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>th {
            text-align: center !important;
        }

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

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

        .fc .fc-daygrid-day.fc-day-today {
            background-color: rgba(225, 220, 40, 0.15) !important;
        }

        /* .fc-event-title {
                        color: #fbfbfb;
                    } */
        /* background event style  */

        .fc-bg-event>.fc-event-title {
            color: white;
            text-decoration: none;
            font-style: normal !important;
            padding-top: 50px;
        }

        .fc-bg-event {
            background: url('{{ global_asset('assets/img/activity/off_day_orange.png') }}') no-repeat !important;
            background-position: center center !important;
            background-size: 9rem !important;
        }
    </style>

    {{-- <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script> --}}

    <!-- fullCalendar (big calendar) CDN  -->
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>

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

    <!-- calendar events customization script  -->
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var calendarEl = document.getElementById('calendar');

            var onDays = @json($onDays);
            var offDays = @json($offDays); // Encode and Parse data

            // combine all events
            var allEvents = [...onDays, ...offDays];

            var calendar = new FullCalendar.Calendar(calendarEl, {
                themeSystem: "bootstrap5",
                initialView: "dayGridMonth",
                start: "title",
                height: 650,
                contentHeight: 600,
                aspectRatio: 1.5,
                expandRows: true,
                handleWindowResize: true,
                dayHeaderFormat: {
                    weekday: "long",
                },
                selectable: true,
                firstDay: 5,
                titleFormat: {
                    year: "numeric",
                    month: "short"
                },
                buttonText: {
                    today: "",
                    month: "",
                    week: "",
                    day: "",
                    list: "",
                },
                events: allEvents
                // eventClick: (info) => {
                //     alert(info.event.end);
                // },
                // eventMouseEnter: (e) => {
                //   e.el.style.display = "none";
                // },
                // events: [{
                //         id: "a",
                //         title: "Start Shift At : 12:00 AM - 09:00 AM",
                //         start: "2023-10-20",
                //         end: "2023-10-24",
                //         backgroundColor: "#D6F0E2",
                //         borderColor: "transparent",
                //         textColor: "#3BB877",
                //     },
                //     {
                //         id: "b",
                //         title: "random event with id B",
                //         start: "2023-10-16",
                //         end: "2023-10-20",
                //         backgroundColor: "#DDEAF5",
                //         borderColor: "transparent",
                //         textColor: "#629DCF",
                //     },
                //     {
                //         id: "c",
                //         title: "random event with id C",
                //         start: "2023-10-24",
                //         end: "2023-10-29",
                //         backgroundColor: "#F5F8E6",
                //         borderColor: "transparent",
                //         textColor: "#D6E098",
                //     },
                //     {
                //         id: "d",
                //         title: "OFF Days",
                //         start: "2023-10-30",
                //         end: "2023-11-01",
                //         display: 'background',
                //         backgroundColor: "red",
                //         borderColor: "transparent",
                //     },
                // ],
            });
            calendar.render();
        });
    </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 class="fw-bold">My Schedule</h4>
                    <h6 class="mt-1 text-muted">
                        Check your schedule details on monthly 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">
                            <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">
                            <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 ps-xl-3 px-2">
                        <div class="row d-flex align-items-center mb-2 ps-lg-5 pe-lg-2 px-0 pt-3">
                            <div class="col-7 px-lg-2 d-flex justify-content-start px-3">
                                <img src="{{ global_asset('assets/img/icons/schedule_details.png') }}"
                                    class="logo rounded-0 me-3 align-middle" alt="Schedule Details" />
                                <h4 class="d-inline align-middle text-nowrap m-0">
                                    Schedule Details
                                </h4>
                            </div>
                            <!-- buttons column  -->
                            <div class="col-xl-5 col-12 d-flex justify-content-xl-end mt-xl-0 mt-2 px-lg-2 ps-5 pe-0 me-0">
                                <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 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 border-start-0 filter-buttons rounded-start-0">
                                    Monthly
                                </a>
                            </div>
                        </div>
                    </div>
                    <hr />

                    <!-- tables and calendar row  -->

                    <div class="row row px-xl-3 px-2">
                        <!-- tables column  -->

                        <!-- <p class="mb-0 fw-bold px-lg-4 px-5">August, 2023</p> -->

                        <!-- calendar 12 column  -->
                        <div class="col-12 mt-2 px-xl-4 px-1 pt-0 mt-0">
                            <div id="calendar"></div>
                            <!-- end of calendar column  -->
                        </div>
                    </div>
                    <!-- lower card body  -->
                </div>
                <!-- lower card div  -->
            </div>

            <!-- bottom row div -->
        </div>
        <!-- container div  -->


    </div>

@endsection

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

@endsection