@extends('front.layouts.master')
@section('title', isset($title) ? $title : 'Home')
@section('description', isset($description) ? $description : '')
@section('keywords', isset($keywords) ? $keywords : '')
@section('content')
    <!-- Breadcrumb Area  -->
    <div class="breadcrumb-area">
        <div class="container">
            <div class="breadcrumb-wrap text-center">
                <h2 class="page-title">{{ __('Activities Calendar') }}</h2>
                <ul class="breadcrumb-pages">
                    <li class="page-item"><a class="page-item-link" href="{{ route('front') }}">{{ __('Home') }}</a></li>
                    <li class="page-item">{{ __('Activities Calendar') }}</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- work Area -->
    <div class="section">
        <div class="container-fluid">
            <form action="" method="">
                <div class="row position-relative">
                    <div class="col-lg-8">
                        <div class="rscnCalendarHeader">
                            <div class="row">
                                <div class="col-md-6 rscnFieldHeight"></div>
                                <div class="col-md-6 text-end">
                                    <div class="row align-items-center">
                                        <div class="col-md-6">
                                            <select class="form-select rscnCalendarFormField" id="reservation"
                                                name="reservation_id">
                                                <option value="0">{{ __('Select') }}</option>
                                                @foreach (reservations() as $reservation)
                                                    <option @if (request()->id == $reservation->id) selected="selected" @endif
                                                        value="{{ $reservation->id }}">
                                                        {{ langConverter($reservation->en_name, $reservation->fr_name) }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('reservation_id')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        <div class="col-md-6">
                                            <select class="form-select rscnCalendarFormField" id="activity"
                                                name="activity_id">
                                                <option selected value="0">{{ __('Select') }}</option>
                                                @foreach (activities()->where('slug','!=','lodging') as $activity)
                                                <option @if (request()->type == $activity->id) selected="selected" @endif
                                                    value="{{ $activity->id }}">
                                                    {{ langConverter($activity->en_name, $activity->fr_name) }}
                                                </option>
                                            @endforeach
                                            </select>
                                            @error('activity_id')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="rscnCalendarBody">
                            <div id='full_calendar_events'></div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="card border-0 rscnMonthsCalendar">
                            {{-- Months Calendar --}}
                            <div class="rscnMonthsCalendarBox">
                                <div class="text-center yearFilterBox">
                                    <span class="year">{{ $year }}</span>
                                </div>
                                <div class="row">
                                    @foreach ($months as $month)
                                        <div class="col-md-3 col-sm-4 col-6 d-flex">
                                            <div data-month="{{ $month['index'] }}" 
                                                class="monthBox d-flex align-items-center justify-content-center w-100">
                                                <div class="monthName">{{ $month['name'] }}</div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            {{-- /Months Calendar --}}
                            <hr class="rscnCalendarDividor">
                            {{-- Day Activities --}}
                            <div class="card border-0 rscnDayActivities">
                                <div class="card-header border-bottom-0 d-flex justify-content-between align-items-center">
                                    <div class="rscnDayTit">-</div>
                                    <div class="rscnDayDate">-</div>
                                </div>
                                <div class="card-body">
                                    {{-- Activity Box --}}
                                    <div class="rscnDayActivityBox">
                                        <div id="event-container">
                                        <div id="rscnReserveName" class="rscnReserveName">-</div>
                                        </div>
                                        <a id="bookActivityBtn" href="#"><button type="button" class="btn rscnBookActiv"
                                        name="book_activity">{{ __('Book Now') }}</button></a>
                                    </div>
                                    {{-- /Activity Box --}}
                                </div>
                            </div>
                            {{-- /Day Activities --}}
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection
@push('post_script')
    <script>
        $(document).ready(function() {
            eventData = {!! json_encode($data->toArray()) !!};
        });
        @if (request()->id)
            activityRequest('{{request()->id}}')
        @endif
        $('#reservation').on('change', function(e) {
            id = this.value
            var url = '{{ route('calender.front') }}?id=' + id;
            location.href = url
        })

        function getDatesInRange(startDate, endDate) {
            const date = new Date(startDate.getTime());
            date.setDate(date.getDate() - 1);
            const dates = [];
            while (date < endDate) {
                dates.push(new Date(date));
                date.setDate(date.getDate() + 1);
            }

            return dates;
        }

        function activityRequest(id) {
            var url = '{{ route('reservation.activity', ':id') }}';
            url = url.replace(':id', id);
            $.ajax({
                url: url,

                beforeSend: function() {
                    $("#activity").html('');
                },

                success: function(result) {
                    html = '<option value ="0" >Select</option>'
                    selected = "{{ request()->type }}";
                    console.log(selected)
                    $.each(result, function(index, row) {
                        if (selected == row.id) html += '<option selected value ="' + row.id + '" >' +
                            row.en_name + '</option>'
                        else html += '<option value ="' + row.id + '" >' + row.en_name + '</option>'
                    })
                    $("#activity").append(html);
                },
                complete: function() {},
                error: function(jqXHR, testStatus, error) {
                    console.log(error);
                    $('#loader').hide();
                },
                timeout: 8000
            })
        }
        $('#activity').on('change', function(e) {

            type = this.value
            let element = $('#reservation');
            id = element.val();
            var url = '{{ route('calender.front') }}?type=' + type + '&id=' + id;
            location.href = url
        });
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var calendar = $('#full_calendar_events').fullCalendar({

                editable: false,
                nowIndicator: true,
                dayMaxEvents: true,

                header: {
                    left: 'title',
                    center: '',
                    right: 'prevYear,nextYear'
                },
                eventLimit: 3, // If you set a number it will hide the itens
                eventLimitText: "{{ __('More') }}", // Default is `more` (or "more" in the lang you pick in the option)
                events: "{{ route('calender.front') }}",
                displayEventTime: true,
                defaultDate: new Date(),
                displayEventEnd: {
                    month: true,
                    basicWeek: true,
                    "default": true
                },
                validRange: function(nowDate) {
                    return {
                        start: nowDate
                    };
                },
                events: [