@extends('crm.layouts.master')
@section('title','Events')
@section('page-css')

@endsection
@section('main-content')
    <div class="breadcrumb">
        <h3>Events</h3>
    </div>
    <div class="separator-breadcrumb border-top"></div>
    <div class="row">
        <div class="col-md-12 mb-4">
            <div class="card text-left">
                <div class="card-body">
{{--                    <div class="text-end mb-2 me-2 pe-1">--}}
{{--                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#add_event_modal">--}}
{{--                            <i class="fa fa-plus fa-lg"></i> Add Event--}}
{{--                        </button>--}}
{{--                    </div>--}}
                    <div class="table-responsive">
                        <div id="calendar"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- The Add Modal -->
    <div class="modal" id="add_event_modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Add Event</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    <form class="" id="save_event">
                        <input type="hidden" value="events" id="submit_form">
                        <div class="form-group">
                            <label>Select Date</label>
                            <input type="date" class="form-control" value="" required id="event_date">
                        </div>

                        <div class="form-group">
                            <label>Event Description</label>
                            <textarea type="text" id="event_description" rows="4" required class="form-control" ></textarea>
                        </div>

                        <div class="text-center">
                            <button class="btn btn-primary" id="submit_event_btn" type="submit">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-js')
    <script src="{{ asset('assets/js/full-calander.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                height: 'auto',
                selectable: true, // Enable date selection
                validRange: {
                    start: new Date(),
                    end: new Date(new Date().setMonth(new Date().getMonth() + 12))
                },
                dateClick: function(info) {
                    // Check if the clicked date is within the valid range
                    if (calendar.view.validRange && !calendar.view.validRange.containsDate(info.date)) {
                        return false;
                    }

                    console.log(info);
                },
                events: @json($events),
                eventClick: function(info) {
                    // Check if the event has a lead_id
                    if (info.event.extendedProps.lead_id) {
                        let lead_id = info.event.extendedProps.lead_id;
                        // Dynamically construct the URL for lead_detail
                        let url = `{{ route('lead_detail', ['id' => '__lead_id__']) }}`.replace('__lead_id__', lead_id);
                        window.location.href = url;
                    } else {
                        alert('This event does not have a lead associated with it.');
                    }
                }
            });

            // Render the calendar
            calendar.render();
        });
    </script>

@endsection