@extends('layout')

@section('h4-page', __('holiday'))

@section('contents')
    <style>
        .modal-content {
            background: white;
        }
    </style>
    <div class="row layout-top-spacing">
        <div class="col-lg-12 col-md-12 mb-md-0 mb-4">
            <div id='calendar'></div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">{{ __('holiday') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex justify-content-end">
                        <div class="mx-3" style="cursor: pointer;" onclick="editDate()">
                            <i class="fa-solid fa-pen-to-square text-primary"></i>
                        </div>
                        <div class="" style="cursor: pointer;" onclick="deleteDate()">
                            <i class="fa-solid fa-trash text-danger"></i>
                        </div>
                    </div>
                    <div class="form-group" style="text-align: start; font-weight: 600;">
                        <label class="form-label">{{ __('color') }}</label>
                        <input type="color" value="" id="showcolor" disabled>
                    </div>
                    <div class="form-group" style="text-align: start; font-weight: 600;">
                        <label class="form-label">{{ __('Name') }}</label>
                        <p id="showname" name="showname"></p>
                    </div>
                    <div class="form-group" style="text-align: start; font-weight: 600;">
                        <label class="form-label">{{ __('StartDate') }}</label>
                        <p id="showstart_date" name="showstart_date"></p>
                    </div>
                    <div class="form-group" style="text-align: start; font-weight: 600;">
                        <label class="form-label">{{ __('EndDate') }}</label>
                        <p id="showend_date" name="showend_date"></p>
                    </div>
                    <div class="form-group" style="text-align: start; font-weight: 600;">
                        <label class="form-label">{{ __('Remark') }}</label>
                        <p id="showremark" name="showremark"></p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('close') }}</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Import Holiday -->
    <div class="modal fade" id="importHolidayModal" tabindex="-1" aria-labelledby="importHolidayModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="importHolidayModalLabel">{{ __('holiday') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <div>
                        <p id="show-list-file-name"></p>
                    </div>
                    <div data-mdb-ripple-init class="btn btn-primary btn-rounded">
                        <label class="form-label text-white m-1" for="file">{{ __('ChooseFileExcel') }}</label>
                        <input type="file" class="form-control d-none" id="file"
                            onchange="displayListFile(event, 'show-list-file-name')" name="file"
                            accept=".csv,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="btn btn-secondary" data-bs-dismiss="modal">{{ __('close') }}</div>
                    <button type="submit" class="btn btn-success" onclick="importData()">{{ __('save') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('js/calendar.min.js') }}"></script>
    <script>
        let objectDate;
        document.addEventListener('DOMContentLoaded', function() {
            var dataJson = @json($main->toArray());
            console.log(dataJson);
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                headerToolbar: {
                    left: 'prev,next',
                    center: 'title',
                    end: 'dayGridMonth,timeGridWeek,listWeek,multiMonthYear,prev,next'
                },
                timeZone: 'Asia/Bangkok',
                initialView: 'dayGridMonth',
                events: dataJson,
                eventClick: function(info) {
                    const start_date = new Date(info.event.start);
                    // const utc7Offset = 7 * 60; // 7 hours converted to minutes
                    // start_date.setMinutes(start_date.getMinutes() + utc7Offset);
                    const formattedDateStart = start_date.toISOString().split('T')[0];
                    const end_date = new Date(info.event.end);
                    // end_date.setMinutes(end_date.getMinutes() + utc7Offset);
                    end_date.setDate(end_date.getDate() - 1);
                    const formattedDateEnd = end_date.toISOString().split('T')[0];
                    $('#editvalue').val(info.event.id);
                    $('#showname').html(info.event.title);
                    $('#showstart_date').html(formattedDateStart);
                    $('#showend_date').html(formattedDateEnd);
                    $('#showremark').html(info.event.extendedProps.description ?? '');
                    $('#showcolor').val(rgbToHex(info.el.style.backgroundColor));
                    $('#exampleModal').modal('show');
                    objectDate = {
                        id: info.event.id,
                        name: info.event.title,
                        start_date: formattedDateStart,
                        end_date: formattedDateEnd,
                        remark: info.event.extendedProps.description ?? '',
                        color: rgbToHex(info.el.style.backgroundColor),
                    };
                    console.log(objectDate)
                    // Swal.fire({
                    //     html: `
                //         <div class="form-group" style="text-align: start; font-weight: 600;">
                //             <label class="form-label">Name</label>
                //             <input class="form-control" type="text" id="name" name="name" max="100" value=${info.event.title}>
                //         </div>
                //         <div class="form-group" style="text-align: start; font-weight: 600;">
                //             <label class="form-label">Start Date</label>
                //             <input class="form-control" type="date" id="start_date" name="start_date" value="${formattedDateStart}">
                //         </div>
                //         <div class="form-group" style="text-align: start; font-weight: 600;">
                //             <label class="form-label">End Date</label>
                //             <input class="form-control" type="date" id="end_date" name="end_date" value="${formattedDateEnd}">
                //         </div>
                //         <div class="form-group" style="text-align: start; font-weight: 600;">
                //             <label class="form-label">Remark</label>
                //             <textarea class="form-control" rows="5" id="remark" name="remark">${info.event.extendedProps.description ?? ''}</textarea>
                //         </div>
                //     `,
                    //     icon: 'info',
                    //     showCancelButton: true,
                    // });
                },
                dateClick: function(info) {
                    Swal.fire({
                        html: `
                            <div class="form-group" style="text-align: start; font-weight: 600;">
                                <label class="form-label">{{ __('color') }}</label>
                                <input type="color" id="color" name="color" value="#0d64eb">
                            </div>
                            <div class="form-group" style="text-align: start; font-weight: 600;">
                                <label class="form-label">{{ __('Name') }}</label>
                                <input class="form-control" type="text" id="name" name="name" max="100">
                            </div>
                            <div class="form-group" style="text-align: start; font-weight: 600;">
                                <label class="form-label">{{ __('StartDate') }}</label>
                                <input class="form-control" type="date" id="start_date" name="start_date" value="${info.dateStr}">
                            </div>
                            <div class="form-group" style="text-align: start; font-weight: 600;">
                                <label class="form-label">{{ __('EndDate') }}</label>
                                <input class="form-control" type="date" id="end_date" name="end_date" value="${info.dateStr}">
                            </div>
                            <div class="form-group" style="text-align: start; font-weight: 600;">
                                <label class="form-label">{{ __('Remark') }}</label>
                                <textarea class="form-control" rows="5" id="remark" name="remark"></textarea>
                            </div>
                        `,
                        showCancelButton: true,
                        confirmButtonText: '{{ __('Yes') }}',
                        cancelButtonText: '{{ __('No') }}'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            var is_url = "{{ route('holiday.store') }}";
                            $.ajax({
                                url: is_url,
                                type: 'POST',
                                data: {
                                    _token: '{{ csrf_token() }}',
                                    name: document.getElementById("name").value,
                                    start_date: document.getElementById("start_date")
                                        .value,
                                    end_date: document.getElementById("end_date").value,
                                    remark: document.getElementById("remark").value,
                                    color: document.getElementById("color").value,
                                },
                                success: function(response) {
                                    if (response.code == 200) {
                                        Swal.fire({
                                            title: '{{ __('Success') }}',
                                            text: "{{ __('Save value success.') }}",
                                            confirmButtonText: '{{ __('OK') }}',
                                            icon: 'success',
                                        }).then((result) => {
                                            if (result.isConfirmed) {
                                                location.reload();
                                            }
                                        });
                                    } else {
                                        Swal.fire({
                                            title: '{{ __('Error') }}',
                                            text: "{{ __('Cannot save value.') }}",
                                            confirmButtonText: '{{ __('OK') }}',
                                            icon: 'error',
                                        });
                                    }

                                },
                                error: function(XMLHttpRequest, textStatus,
                                    errorThrown) {
                                    Swal.fire({
                                        title: '{{ __('Error') }}',
                                        text: "{{ __('Cannot save value.') }}",
                                        confirmButtonText: '{{ __('OK') }}',
                                        icon: 'error',
                                    });
                                }
                            });
                        }
                    });
                }
            });
            calendar.render();
        });

        function importData() {
            const formData = new FormData();
            var is_url = "{{ route('import.excel.importFile') }}";
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('file', document.getElementById("file").files[0] ?? null);
            $.ajax({
                type: "POST",
                url: is_url,
                data: formData,
                processData: false, // Prevent jQuery from processing the FormData
                contentType: false, // Prevent jQuery from setting contentType
                success: function(response) {
                    if (response.status == 200) {
                        Swal.fire({
                            title: '{{ __('Success') }}',
                            text: "{{ __('Save value success.') }}",
                            confirmButtonText: '{{ __('OK') }}',
                            icon: 'success',
                        }).then((result) => {
                            if (result.isConfirmed) {
                                location.reload();
                            }
                        });
                    } else {
                        Swal.fire({
                            title: '{{ __('Error') }}',
                            text: "{{ __('Cannot save value.') }}",
                            confirmButtonText: '{{ __('OK') }}',
                            icon: 'error',
                        });
                    }

                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    Swal.fire({
                        title: '{{ __('Error') }}',
                        text: "{{ __('Cannot save value.') }}",
                        confirmButtonText: '{{ __('OK') }}',
                        icon: 'error',
                    });
                }

            });
        }

        function displayListFile(e, id) {
            let showlist = document.getElementById(id);
            const fileInput = event.target;
            console.log(event.target)
            showlist.innerHTML = fileInput.files[0].name;
        }

        function editDate() {
            console.log(objectDate.color)
            $('#exampleModal').modal('hide');
            Swal.fire({
                html: `
                        <div class="form-group" style="text-align: start; font-weight: 600;">
                                <label class="form-label">{{ __('color') }}</label>
                                <input type="color" id="color" name="color" value="${objectDate.color}">
                            </div>
                        <div class="form-group" style="text-align: start; font-weight: 600;">
                            <label class="form-label">{{ __('Name') }}</label>
                            <input class="form-control" type="text" id="name" name="name" max="100" value=${objectDate.name}>
                        </div>
                        <div class="form-group" style="text-align: start; font-weight: 600;">
                            <label class="form-label">{{ __('StartDate') }}</label>
                            <input class="form-control" type="date" id="start_date" name="start_date" value="${objectDate.start_date}">
                        </div>
                        <div class="form-group" style="text-align: start; font-weight: 600;">
                            <label class="form-label">{{ __('EndDate') }}</label>
                            <input class="form-control" type="date" id="end_date" name="end_date" value="${objectDate.end_date}">
                        </div>
                        <div class="form-group" style="text-align: start; font-weight: 600;">
                            <label class="form-label">{{ __('Remark') }}</label>
                            <textarea class="form-control" rows="5" id="remark" name="remark">${objectDate.remark ?? ''}</textarea>
                        </div>
                    `,
                showCancelButton: true,
                confirmButtonText: '{{ __('Yes') }}',
                cancelButtonText: '{{ __('No') }}'
            }).then((result) => {
                if (result.isConfirmed) {
                    var is_url = "{{ route('holiday.update', ':id') }}";
                    $.ajax({
                        url: is_url.replace(':id', objectDate.id),
                        type: 'PUT',
                        data: {
                            _token: '{{ csrf_token() }}',
                            name: document.getElementById("name").value,
                            start_date: document.getElementById("start_date").value,
                            end_date: document.getElementById("end_date").value,
                            remark: document.getElementById("remark").value,
                            color: document.getElementById("color").value,
                        },
                        success: function(response) {
                            if (response.code == 200) {
                                Swal.fire({
                                    title: '{{ __('Success') }}',
                                    text: "{{ __('Save value success.') }}",
                                    confirmButtonText: '{{ __('OK') }}',
                                    icon: 'success',
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        location.reload();
                                    }
                                });
                            } else {
                                Swal.fire({
                                    title: '{{ __('Error') }}',
                                    text: "{{ __('Cannot save value.') }}",
                                    confirmButtonText: '{{ __('OK') }}',
                                    icon: 'error',
                                });
                            }

                        },
                        error: function(XMLHttpRequest, textStatus,
                            errorThrown) {
                            Swal.fire({
                                title: '{{ __('Error') }}',
                                text: "{{ __('Cannot save value.') }}",
                                confirmButtonText: '{{ __('OK') }}',
                                icon: 'error',
                            });
                        }
                    });
                }
            });
        }

        function deleteDate() {
            Swal.fire({
                title: '{{ __('Delete') }}',
                text: "{{ __('You want delete value ?') }}",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#5e72e4',
                cancelButtonColor: '#d33',
                confirmButtonText: '{{ __('Yes') }}',
                cancelButtonText: '{{ __('No') }}'
            }).then((result) => {
                if (result.isConfirmed) {
                    var is_url = "{{ route('holiday.destroy', ':id') }}";
                    $.ajax({
                        url: is_url.replace(':id', objectDate.id),
                        type: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}',
                            status: 0,
                        },
                        success: function(response) {
                            Swal.fire({
                                title: '{{ __('Success') }}',
                                text: "{{ __('Delete value success.') }}",
                                confirmButtonText: '{{ __('OK') }}',
                                icon: 'success',
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    location.reload();
                                }
                            });
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            Swal.fire({
                                title: '{{ __('Error') }}',
                                text: "{{ __('Cannot delete value.') }}",
                                confirmButtonText: '{{ __('OK') }}',
                                icon: 'error',
                            });
                        }
                    });
                }
            })
        }

        function rgbToHex(rgb) {
            // Extract the RGB values from the string
            const rgbValues = rgb.match(/\d+/g);
            const r = parseInt(rgbValues[0]);
            const g = parseInt(rgbValues[1]);
            const b = parseInt(rgbValues[2]);

            // Convert each RGB value to Hex and ensure it's two digits
            const hex = `#${(1 << 24 | (r << 16) | (g << 8) | b).toString(16).slice(1).toUpperCase()}`;

            return hex;
        }
    </script>
@endsection