@extends('layout')

@inject('carbon', 'Carbon\Carbon')

@section('content')
    <div class="page-header page-header-light">

        <div class="d-flex justify-content-between align-items-center mx-3 my-1">

            <div class="d-flex flex-column tailwind-scope">

                <h4 class="text-white text-2xl font-bold mb-1">Réservation et séjour</h4>
                <p class="text-white text-sm">Calendrier</p>
            </div>
            @include('shared.navbar')
        </div>
        @include('calendar._search')
    </div>

    <div class="content">


        <div class="chart_source mt-xxl-auto">
            <div class="chart-container">
                <div class="chart has-fixed-height" id="pie_basic"></div>
            </div>
        </div>

        <div class="card-body">
            <div id="calendar"></div>
        </div>

    </div>

    <script>
        // Create a style element using jQuery
        var style = $('<style></style>').attr('type', 'text/css');

        // Add your CSS as text to the style element
        style.text(`
                                        .custom-event {
                                            border-radius: 50px;
                                        }

                                        /* Apply height: 10px only for mobile devices and only in month view */
                                        @media (max-width: 768px) {
                                            .fc-month-view .custom-event {
                                                height: 10px;
                                                margin-top: -1px;
                                            }
                                        }
                                    `);

        // Append the style element to the document head using jQuery
        $('head').append(style);

        // Initialize the FullCalendar
        $('#calendar').fullCalendar({
            locale: 'fr', // Set locale to French
            header: {
                left: 'today prev,next', // Add custom buttons for navigation
                center: 'title',
                right: 'month,agendaWeek,agendaDay' // Include day, week, and month views
            },
            defaultView: 'month', // Set default view to month
            defaultDate: '{{ date('Y-m-d') }}', // Set default date
            navLinks: true, // Enable navigation links
            eventLimit: 4, // Enable event limiting
            events: [
                @foreach($reservations as $reservation)
                    @if($reservation->getProperty() !== null)
                        {
                            title: '{{ $reservation->getProperty()->name }} ({{ $reservation->reservation_id }})',
                            body: '{{ $reservation->getProperty()->name }}\n{{ $reservation->reservation_id }}\n/ {{ $reservation->getTotalPrice() }} TND \n/ [{{ $carbon::parse($reservation->check_in)->format('d-m-Y') }} , {{$carbon::parse($reservation->check_out)->format('d-m-Y') }}]',
                            start: '{{ $carbon::parse($reservation->check_in)->setTime(12, 0)->format('Y-m-d\TH:i:s') }}', // Start time at 12 PM
                            end: '{{ $carbon::parse($reservation->check_out)->setTime(12, 0)->format('Y-m-d\TH:i:s') }}', // End time at 12 PM
                            backgroundColor: @if(str_contains($reservation->creator, 'thelandlord')) '#36b292'
                            @elseif(str_contains($reservation->creator, 'airbnb'))'#FF5A5F'
                                        @elseif(str_contains($reservation->creator, 'travelstaytion'))'#000001'
                                @elseif(str_contains($reservation->creator, 'hometogo'))'#5221b2'
                                @elseif(str_contains($reservation->creator, 'booking'))'#003580'
                                @else'#ff9f89' @endif,
                                borderColor: '#ccc',
                                textColor: '#000000',
                                className: 'custom-event',
                                imgUrl: @if(str_contains($reservation->creator, 'thelandlord')) '{{ asset('ttl_assets/creatorLogo/thelandlord.png') }}'
                                @elseif(str_contains($reservation->creator, 'airbnb'))'{{ asset('ttl_assets/creatorLogo/airbnb.png') }}'
                                            @elseif(str_contains($reservation->creator, 'travelstaytion'))'{{ asset('ttl_assets/creatorLogo/travelstaytion.png') }}'
                                    @elseif(str_contains($reservation->creator, 'booking'))'{{ asset('ttl_assets/creatorLogo/booking.png') }}'
                                    @else'{{ asset('ttl_assets/creatorLogo/tll.png') }}'
                                    @endif,
                                    url: '{{ url("reservation/" . $reservation->id . "/edit") }}'
                                                                                                                                                                                                                            },
                    @endif
                @endforeach
                                        ],
            eventRender: function (event, element) {
                if (event.imgUrl) {
                    element.find('.fc-content').prepend('<img src="' + event.imgUrl + '" alt="Event Image">');
                }
                // Add custom class to identify half-day events
                element.addClass('custom-event');
                // Add data attributes for tippy.js
                element.attr('data-tippy-content', event.body);
            },
            eventMouseover: function (event, jsEvent) {
                // Initialize tippy.js tooltip
                tippy(jsEvent.currentTarget, {
                    content: event.body.replace(/\n/g, '<br>'), // Replace newline with <br> for HTML content
                    allowHTML: true,
                    placement: 'top',
                    theme: 'light',
                    arrow: true,
                    duration: [200, 200]
                });
            },
            eventMouseout: function (event, jsEvent) {
                // Destroy tippy.js tooltip
                if (jsEvent.currentTarget._tippy) {
                    jsEvent.currentTarget._tippy.destroy();
                }
            }
        });

        // Initialize the Echarts pie/donut chart
        var EchartsPiesDonuts = function () {
            var _piesDonutsExamples = function () {
                if (typeof echarts == 'undefined') {
                    return;
                }
                var pie_basic_element = document.getElementById('pie_basic');
                if (pie_basic_element) {
                    var pie_basic = echarts.init(pie_basic_element);
                    pie_basic.setOption({
                        color: [
                                                        @if(isset($totalNightsBySource['thelandlord']))
                                                            '#36b292',
                                                        @endif
                                                            @if(isset($totalNightsBySource['airbnb']))
                                                                '#FF5A5F',
                                                            @endif
                                                            @if(isset($totalNightsBySource['travelstaytion']))
                                                                '#000001',
                                                            @endif
                                                            @if(isset($totalNightsBySource['hometogo']))
                                                                '#5221b2',
                                                            @endif
                                                            @if(isset($totalNightsBySource['booking']))
                                                                '#003580',
                                                            @endif
                                            '#ccc111',
                                                    ],
                                            textStyle: {
                                            fontFamily: 'Roboto, Arial, Verdana, sans-serif',
                                            fontSize: 13
                                        },
                                            title: {
                                            text: 'Total des nuits passées selon l\'origine',
                                            subtext: 'Basé sur les réservations',
                                            top: 'center',
                                            left: 'center',
                                            textStyle: {
                                                fontSize: 17,
                                                fontWeight: 500
                                            },
                                            subtextStyle: {
                                                fontSize: 12
                                            }
                                        },
                                            tooltip: {
                                            trigger: 'item',
                                            backgroundColor: 'rgba(0,0,0,0.75)',
                                            padding: 10,
                                            textStyle: {
                                                fontSize: 13,
                                                fontFamily: 'Roboto, sans-serif'
                                            },
                                            formatter: "{a} <br/>{b}: {c} ({d}%)"
                                        },
                                            series: [{
                                                name: 'Reservations',
                                                type: 'pie',
                                                radius: ['40%', '70%'],
                                                center: ['50%', '50%'],
                                                itemStyle: {
                                                    normal: {
                                                        borderWidth: 1,
                                                        borderColor: '#fff'
                                                    }
                                                },
                                                data: [
                                                                @if(isset($totalNightsBySource['thelandlord']))
                                                                    { value: {{$totalNightsBySource['thelandlord']}}, name: 'Thelandlord' },
                                                                @endif
                                                                @if(isset($totalNightsBySource['airbnb']))
                                                                    { value: {{$totalNightsBySource['airbnb']}}, name: 'Airbnb' },
                                                                @endif
                                                                @if(isset($totalNightsBySource['travelstaytion']))
                                                                    { value: {{$totalNightsBySource['travelstaytion']}}, name: 'Travelstaytion' },
                                                                @endif
                                                                @if(isset($totalNightsBySource['hometogo']))
                                                                    { value: {{$totalNightsBySource['hometogo']}}, name: 'Hometogo' },
                                                                @endif
                                                                @if(isset($totalNightsBySource['booking']))
                                                                    { value: {{$totalNightsBySource['booking']}}, name: 'Booking' },
                                                                @endif
                                                                @if(isset($totalNightsBySource['other']))
                                                                    { value: {{$totalNightsBySource['other']}}, name: 'Autre' },
                                                                @endif
                                                        ]
                                                    }]
                                                });
                }
                var triggerChartResize = function () {
                    pie_basic_element && pie_basic.resize();
                };
                // On sidebar width change
                $(document).on('click', '.sidebar-control', function () {
                    setTimeout(function () {
                        triggerChartResize();
                    }, 0);
                });
                var resizeCharts;
                window.onresize = function () {
                    clearTimeout(resizeCharts);
                    resizeCharts = setTimeout(function () {
                        triggerChartResize();
                    }, 200);
                };
            };

            return {
                init: function () {
                    _piesDonutsExamples();
                }
            }
        }();

        // Initialize the Echarts when the DOM content is loaded
        document.addEventListener('DOMContentLoaded', function () {
            EchartsPiesDonuts.init();
        });
    </script>
@endsection