@extends('layouts.app_hr')
@section('title', __('hr.public_holidays'))

@section('content')
    <section class="content-header">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-style1">
                <li class="breadcrumb-item">
                    <a href="#">{{ __('home.home') }}</a>
                </li><li class="breadcrumb-item">
                    <a href="#">{{ __('hr.attendance') }}</a>
                </li>
                <li class="breadcrumb-item active">{{ __('hr.public_holidays') }}</li>
            </ol>
        </nav>
    </section>

    <section class="content">
        <div class="nav-align-top">
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-top-home" aria-controls="navs-top-home" aria-selected="true">
                        {{__('hr.calendar')}}</button>
                </li>
                <li class="nav-item">
                    <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-top-profile" aria-controls="navs-top-profile" aria-selected="false">
                        {{__('hr.list')}}</button>
                </li>
            </ul>
            <div class="tab-content bg-transparent no-border" >
                <div class="tab-pane fade show active" id="navs-top-home" role="tabpanel">
                    <div class="card tw-transition-all tw-duration-200 tw-bg-white tw-shadow-sm hover:tw-shadow-md tw-rounded-xl hover:tw-translate-y-0.5 tw-ring-1 tw-ring-gray-200 no-print">
                        <div class="card-body">
                            <div class="add-new mb-4">
                                <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#add_holiday_modal">
                                    {{ __('messages.add') }}
                                </button>
                            </div>
                            <div id="calendar"></div>
                        </div>
                    </div>

                </div>
                <div class="tab-pane fade" id="navs-top-profile" role="tabpanel">
                    <div class="card tw-transition-all tw-duration-200 tw-bg-white tw-shadow-sm hover:tw-shadow-md tw-rounded-xl hover:tw-translate-y-0.5 tw-ring-1 tw-ring-gray-200 no-print">
                        <div class="add-new list_button m-5">
                            <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#add_holiday_modal">
                                <i class="ri-add-line"></i> {{ __('messages.add') }}
                            </button>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive w-100">
                                <table id="public_holidays_table" class="table w-100 table-bordered">
                                    <thead>
                                    <tr>
                                        <th>{{ __('hr.holiday_name') }}</th>
                                        <th>{{ __('hr.start_date') }}</th>
                                        <th>{{ __('hr.end_date') }}</th>
                                        <th>{{ __('hr.recurring_holiday') }}</th>
                                        <th>{{ __('messages.action') }}</th>
                                    </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @include('hr.public_holidays.create')
    <div class="modal fade edit_holiday_modal" id="edit_holiday_modal" tabindex="-1" aria-labelledby="editHolidayModalLabel" aria-hidden="true"></div>

    @endsection

@section('css')
    <style>
        .fc-daygrid-day {
            position: relative;
        }

        .fc-daygrid-event {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px; /* تكبير حجم النص */
            font-weight: bold; /* جعل النص عريضًا */
            background-color: #FF0000 !important; /* لون الخلفية */
            color: #FFFFFF !important; /* لون النص */
            border-radius: 0; /* إزالة الزوايا */
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3); /* ظل داخلي */
        }

    </style>
    @stop
@section('javascript')

    <script>
        $(document).ready(function () {
            //Date picker
            $('.date-picker').datepicker({
                autoclose: true,
                endDate: 'today',
            });
            var table = $('#public_holidays_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route("public-holidays.index") }}',
                columns: [
                    { data: 'name', name: 'name' },
                    { data: 'start_date', name: 'start_date' },
                    { data: 'end_date', name: 'end_date' },
                    { data: 'is_recurring', name: 'is_recurring' },
                    { data: 'action', name: 'action', orderable: false, searchable: false },
                ]
            });
            table.buttons().container().appendTo( '.list_button' );

            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                firstDay: '1',
                initialView: 'multiMonthYear',
                multiMonthMaxColumns: 2,
                events: '{{ route("public-holidays.events") }}',
                editable: true,
                eventRender: function (event, element) {
                    element.attr('title', event.description);
                },
                eventDidMount: function (info) {
                    // تخصيص مظهر الحدث
                    info.el.style.backgroundColor = info.event.backgroundColor; // لون الخلفية
                    info.el.style.color = info.event.textColor; // لون النص
                    info.el.style.fontWeight = 'bold'; // تكبير الخط
                    info.el.style.fontSize = '16px'; // حجم النص
                    info.el.style.textAlign = 'center'; // محاذاة النص
                    info.el.style.height = '100%'; // ملء الطول بالكامل
                },
                dayMaxEvents: true,
            });

            document.addEventListener('DOMContentLoaded', function () {
                var calendarEl = document.getElementById('calendar');

                var calendar = new FullCalendar.Calendar(calendarEl, {
                    initialView: 'dayGridMonth',
                    headerToolbar: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth,timeGridWeek,timeGridDay',
                    },
                    events: '/public-holidays/events', // الرابط لجلب الأحداث
                    eventDidMount: function (info) {
                        // تخصيص مظهر الحدث
                        info.el.style.backgroundColor = info.event.backgroundColor; // لون الخلفية
                        info.el.style.color = info.event.textColor; // لون النص
                        info.el.style.fontWeight = 'bold'; // تكبير الخط
                        info.el.style.fontSize = '16px'; // حجم النص
                        info.el.style.textAlign = 'center'; // محاذاة النص
                        info.el.style.height = '100%'; // ملء الطول بالكامل
                    },
                    dayMaxEvents: true, // عرض النقاط عند وجود أحداث كثيرة
                });

                calendar.render();
            });


            $(document).on('submit', 'form#add_holiday_form', function(e) {
                e.preventDefault();
                var form = $(this);
                var data = form.serialize();
                $.ajax({
                    method: 'POST',
                    url: $(this).attr('action'),
                    dataType: 'json',
                    data: data,
                    beforeSend: function(xhr) {
                        __disable_submit_button(form.find('button[type="submit"]'));
                    },
                    success: function(result) {
                        if (result.success == true) {
                            $('#add_holiday_modal').modal('hide');
                            toastr.success(result.msg);
                            form[0].reset();
                            form.find('button[type="submit"]').removeAttr('disabled');


                        } else {
                            toastr.error(result.msg);
                        }
                    },
                });
            });


            $(document).on('click', 'button.edit_holiday_button', function() {
                $('div.edit_holiday_modal').load($(this).data('href'), function() {
                    $(this).modal('show');

                    $('form#edit_holiday_form').submit(function(e) {
                        e.preventDefault();
                        var form = $(this);
                        var data = form.serialize();

                        $.ajax({
                            method: 'POST',
                            url: $(this).attr('action'),
                            dataType: 'json',
                            data: data,
                            beforeSend: function(xhr) {
                                __disable_submit_button(form.find('button[type="submit"]'));
                            },
                            success: function(result) {
                                if (result.success == true) {
                                    $('div.edit_holiday_modal').modal('hide');
                                    toastr.success(result.msg);
                                    form[0].reset();
                                    table.ajax.reload();
                                } else {
                                    $('div.edit_religion_modal').modal('hide');
                                    form[0].reset();
                                    toastr.error(result.msg);
                                    form.find('button[type="submit"]').removeAttr('disabled');
                                }
                            },
                        });
                    });
                });
            });

            $(document).on('click', 'button.delete_holiday_button', function() {
                swal({
                    title: LANG.sure,
                    text: LANG.confirm_delete,
                    icon: 'warning',
                    buttons: true,
                    dangerMode: true,
                }).then(willDelete => {
                    if (willDelete) {
                        var href = $(this).data('href');
                        var data = $(this).serialize();

                        $.ajax({
                            method: 'DELETE',
                            url: href,
                            dataType: 'json',
                            data: data,
                            success: function(result) {
                                if (result.success == true) {
                                    toastr.success(result.msg);
                                    table.ajax.reload();
                                } else {
                                    toastr.error(result.msg);
                                }
                            },
                        });
                    }
                });
            });
            // عرض الأخطاء في التوسترات
            @if($errors->any())
            @foreach($errors->all() as $error)
            toastr.error("{{ $error }}");
            @endforeach
            @endif
        });


    </script>
@endsection