@php

    @endphp
@extends("template.layouts.simple.master")
@section('content')
    <div class="page-body">
        @include("master.notification")
        <div class="container-fluid calendar-basic">
            <div class="card">
                <div class="card-body">
                    <div class="row" id="wrap">
                        <div class="col-xxl-3 box-col-12">
                            <div class="md-sidebar mb-3"><a class="btn btn-primary md-sidebar-toggle"
                                                            href="javascript:void(0)">calendar filter</a>
                                <div class="md-sidebar-aside job-left-aside custom-scrollbar">
                                    <div id="external-events">
                                        <h4>Holidays</h4>
                                        <div id="external-events-list" class="holiday_list_con">
                                        </div>
                                        <p>
                                            {{--                                            <input class="checkbox_animated" id="drop-remove" type="checkbox">--}}
                                            {{--                                            <label for="drop-remove">remove after drop</label>--}}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-9 box-col-12">
                            <div class="calendar-default" id="calendar-container">
                                <div id="calendar"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="edit_holiday_modal" tabindex="-1" role="dialog"
             aria-labelledby="exampleModalCenter1"
             aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myExtraLargeModal">Edit Holiday </h4>
                        <button class="btn-close py-0" type="button" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form class="row g-3 needs-validation" action="{{route("holiday-update")}}" method="post" id=""
                              novalidate="">
                            @csrf
                            <input type="text" name="id" id="holiday_id" class="d-none">
                            <div class="col-xl-6 col-sm-4">
                                <label class="form-label">Date </label>
                                <input class="form-control" name="holiday_date" id="holiday_date" type="date" required>
                            </div>
                            <div class="col-xl-6 col-sm-4">
                                <label class="form-label">Holiday Title </label>
                                <input class="form-control" name="holiday_title" id="holiday_title" type="text"
                                       required>
                            </div>
                            <div class="col-xl-12 col-sm-4">
                                <label class="form-label">Description </label>
                                <input class="form-control" name="holiday_description" id="holiday_description"
                                       type="text">
                            </div>

                            <div class="col-12">
                                <button class="btn btn-primary" id="add_schedule_btn">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section("scripts")
    @include("master.notification_show_hide")
    <script>
        $(document).ready(function () {
            $(".fc-today-button").click();
            let holidays = [];
            @if(isset($holidays))
                holidays = null;
            render_holiday(holidays);
            render_holiday_list(holidays);
            @endif
            function render_holiday(data) {
                console.log(data)
                let td = $(".fc-daygrid-day");
                data.forEach((obj) => {
                    console.log(obj)
                    td.each((element) => {
                        let d = $(td[element]).data("date");
                        if (d == obj.date) {
                            let event_con = $(td[element]).find(".fc-daygrid-day-events .fc-daygrid-day-bottom");
                            $("<li />", {
                                text: obj.title
                            }).appendTo(event_con)
                            $(td[element]).css({
                                "background-color": "#d2f7ed"
                            });
                        }
                    })
                })

                td.each((e) => {
                    // $("<div />" , {html : "<button class='btn'>add</button><button class='btn btn-primary'>add</button>" }).addClass("button_con").appendTo($(td[e]).find(".fc-daygrid-day-frame"));
                })

            }

            function render_holiday_list(data = "") {
                if (data !== "") {
                    $(".holiday_list_con").children().remove();
                    data.forEach((obj) => {
                        let list = `
                                <div class="bg-primary p-2 m-1">
                                     <div class="fc-event-main">
                                    <i class="fa fa-birthday-cake me-2 d-none"></i>
                                    <i class="fa fa-edit edit_btn" data-id="${obj.id}"> </i>
                                    <i class="fa fa-trash delete_btn" data-id="${obj.id}"> </i>
                                         <span class="fw-bold"> ${obj.title}</span> (${obj.date})
                                     </div>
                                </div>                    `
                        $(".holiday_list_con").append(list);
                        delete_holiday_function();
                        edit_holiday_function();
                    })
                } else {
                    $(".holiday_list_con").children().remove();
                }
            }


            function edit_holiday_function() {
                $(".edit_btn").click(function (e) {
                    e.preventDefault();
                    console.log("hhuhu")
                    let id = $(this).data("id");
                    $("#edit_holiday_modal").modal("show")
                    $.ajax({
                        url: "{{route('get-holiday-details')}}",
                        type: "POST",
                        data: {
                            "_token": "{{ csrf_token() }}", // Add the CSRF token to the data
                            "id": id
                        },
                        success: function (data) {
                            console.log(data);
                            if (data.response != 0) {
                                $("#edit_holiday_modal #holiday_id").val(data.response.id)
                                $("#edit_holiday_modal #holiday_date").val(data.response.date)
                                $("#edit_holiday_modal #holiday_title").val(data.response.title)
                                $("#edit_holiday_modal #holiday_description").val(data.response.description)
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Oops...',
                                    text: 'Something went wrong!',
                                })
                            }
                        }
                    })


                })
            }

            function delete_holiday_function() {
                $(".delete_btn").click(function (e) {
                    e.preventDefault();
                    let id = $(this).data("id");
                    Swal.fire({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes, delete it!'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            $.ajax({
                                url: "{{route('holiday-destroy')}}",
                                type: "POST",
                                data: {
                                    "_token": "{{ csrf_token() }}", // Add the CSRF token to the data
                                    "id": id
                                },
                                success: function (data) {
                                    console.log(data);
                                    if (data.response == 1) {
                                        Swal.fire(
                                            'Deleted!',
                                            'Your file has been deleted.',
                                            'success'
                                        )
                                        location.reload();
                                    } else {
                                        Swal.fire({
                                            icon: 'error',
                                            title: 'Oops...',
                                            text: 'Something went wrong!',
                                        })
                                    }
                                }
                            })

                        }
                    })

                })
            }

            $(".fc-prev-button").click(function (e) {
                $(".fc-daygrid-event-harness").addClass('d-none');
                getHolidays($("#fc-dom-1").text())

            })

            $(".fc-next-button").click(function (e) {
                $(".fc-daygrid-event-harness").addClass('d-none');
                getHolidays($("#fc-dom-1").text())
            });

            function getHolidays(month_year) {
                $.ajax({
                    url: "{{route('holiday-searching')}}",
                    type: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}", // Add the CSRF token to the data
                        "month_year": month_year
                    },
                    success: function (data) {
                        console.log(data);
                        if (data.response != 0) {
                            render_holiday(data.response);
                            render_holiday_list(data.response);
                        } else {
                            render_holiday_list()
                            // render_holiday();
                        }

                    }
                })

            }

        });

    </script>

@endsection