@extends('layouts.crmtab')

@section('crm_content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">

<div class="row">
    <!-- Left Side - Mini Calendar & Filters -->
    <div class="col-md-3">
        <div class="card shadow p-3 mb-3">
            <h5 class="text-center"><i class="bi bi-calendar-check"></i> Mini Calendar</h5>
            <input type="text" id="miniCalendarContainer" class="form-control">
        </div>

        <div class="mb-3" style="display: grid;">
            <h5> Filter by Progress</h5>
            <div class="form-check">
                <input class="form-check-input progress-filter" type="radio" name="progress" id="progress_all" value="" checked>
                <label class="form-check-label" for="progress_all">All Progress</label>
            </div>
            @foreach ($status as $list)
                <div class="form-check">
                    <input class="form-check-input progress-filter" type="radio" name="progress" id="progress_{{ $list->id }}" value="{{ $list->id }}">
                    <label class="form-check-label" for="progress_{{ $list->id }}">{{ $list->name }}</label>
                </div>
            @endforeach
        </div>
    </div>

    <!-- Right Side - Full Calendar -->
  <div class="col-md-9">
            <div class="card shadow p-3">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <h5><i class="bi bi-calendar3"></i> CRM Calendar</h5>
                    <div>
                        <button class="btn btn-primary btn-sm change-view" data-view="dayGridMonth">Month</button>
                        <button class="btn btn-secondary btn-sm change-view" data-view="timeGridWeek">Week</button>
                        <button class="btn btn-success btn-sm change-view" data-view="timeGridDay">Day</button>
                        <button class="btn btn-warning btn-sm change-view" data-view="listYear">Year</button>
                        <button class="btn btn-info btn-sm change-view" data-view="listWeek">Schedule</button>
                    </div>
                </div>
                <div id="calendar"></div>
            </div>
        </div>
</div>

<!-- Offcanvas for Editing Event -->
  <div class="offcanvas offcanvas-end" tabindex="-1" id="eventOffcanvas">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">Edit Calendar</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
        </div>
        <div class="offcanvas-body">
            <form id="updateEventForm">
                <input type="hidden" id="event_id">
                <div class="mb-3">
                    <input type="hidden" class="form-control" id="user_id">

                </div>
                <div class="mb-3">
                    <label for="event_title" class="form-label">Title</label>
                    <input type="text" class="form-control" id="event_title" required>
                </div>
                <div class="mb-3">
                    <label for="event_title" class="form-label">Note</label>
                    <textarea name="note" id="note" class="form-control"></textarea>
                </div>
                <div class="mb-3">
                    <label for="event_start" class="form-label">Start Date & Time</label>
                    <input type="datetime-local" class="form-control" id="event_start" required>
                </div>
                <div class="mb-3">
                    <label for="event_end" class="form-label">End Date & Time</label>
                    <input type="datetime-local" class="form-control" id="event_end">
                </div>
                <div class="mb-3">
                    <label for="progress" class="form-label">Progress</label>
                    <select name="progress" id="progress" class="form-control">
                        @foreach ($status as $list)
                            <option value="{{ $list->id }}">{{ $list->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label for="event_color" class="form-label">Color</label>
                    <input type="color" class="form-control form-control-color" id="event_color">
                </div>
                <button type="submit" class="btn btn-primary mt-3">Update Event</button>
                <button type="button" class="btn btn-danger mt-3" id="deleteEvent">Delete Event</button>
                <!-- Bootstrap Tabs -->
                <ul class="nav nav-tabs mt-4" id="eventDetailsTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="contact-tab" data-bs-toggle="tab"
                            data-bs-target="#contactTabContent" type="button" role="tab">
                            Contact Info
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="followups-tab" data-bs-toggle="tab"
                            data-bs-target="#followupsTabContent" type="button" role="tab">
                            Follow-ups
                        </button>
                    </li>
                </ul>

                <div class="tab-content mt-3">
                    <!-- Contact Info Tab -->
                    <div class="tab-pane fade show active" id="contactTabContent" role="tabpanel">
                        <div id="contact_info">
                            <!-- Contact details will be dynamically injected here -->
                        </div>
                    </div>

                    <!-- Follow-ups Tab -->
                    <div class="tab-pane fade" id="followupsTabContent" role="tabpanel">
                        <div id="followups">
                            <!-- Follow-up details will be dynamically injected here -->
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
function formatDateForInput(date){
    if(!date) return '';
    let d = new Date(date);
    let pad = (n)=>n.toString().padStart(2,'0');
    return d.getFullYear()+'-'+pad(d.getMonth()+1)+'-'+pad(d.getDate())+'T'+pad(d.getHours())+':'+pad(d.getMinutes());
}

document.addEventListener('DOMContentLoaded', function () {

    // Mini Calendar
    flatpickr("#miniCalendarContainer", {
        inline:true,
        onChange:function(selectedDates){
            if(selectedDates.length){
                calendar.gotoDate(selectedDates[0]);
            }
        }
    });

    // FullCalendar
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: ''
        },
        events: '/calendar/events',
        editable: true,
        selectable: true,
        views: {
            listYear: { type: 'listYear', buttonText: 'Year' },
            listWeek: { type: 'listWeek', buttonText: 'Schedule' }
        },
select: function(info){
    $('#event_id').val('');
    $('#event_title').val('');
    $('#note').val('');
    let formattedDate = formatDateForInput(info.start);
    $('#event_start').val(formattedDate);
    $('#event_end').val(formattedDate);
    $('#progress').val('');
    $('#event_color').val('#'+Math.floor(Math.random()*16777215).toString(16));

    // Clear contact/follow-up tabs
    $('#contact_info').html('');
    $('#followups').html('');

    // Reset tab to Contact Info
    $('#contactTabContent').addClass('show active');
    $('#followupsTabContent').removeClass('show active');

    new bootstrap.Offcanvas(document.getElementById('eventOffcanvas')).show();
}

,
      eventClick: function(info){
    let event = info.event;

    // Clear previous data immediately
    $('#event_id').val('');
    $('#event_title').val('');
    $('#note').val('');
    $('#event_start').val('');
    $('#event_end').val('');
    $('#progress').val('');
    $('#event_color').val('#'+Math.floor(Math.random()*16777215).toString(16));
    $('#contact_info').html('');
    $('#followups').html('');

    function formatDate(date){
        if(!date) return '';
        let d = new Date(date);
        let offset = d.getTimezoneOffset() * 60000;
        let localDate = new Date(d.getTime() - offset);
        return localDate.toISOString().slice(0,16);
    }

    fetch(`/calendar/event-details/${event.id}`)
        .then(response => response.json())
        .then(data => {
            // Fill event details
            $('#event_id').val(data.event.id);
            $('#event_title').val(data.event.title);
            $('#note').val(data.event.note || '');
            $('#event_start').val(formatDate(data.event.start));
            $('#event_end').val(formatDate(data.event.end || data.event.start)); // if end missing, set same as start
            $('#event_color').val(data.event.color || '#'+Math.floor(Math.random()*16777215).toString(16));
            $('#progress').val(data.event.progress || '');

            if(data.contact){
                // Fill contact info
                let contactHtml = `
                    <h5>Client Contact Info</h5>
                    <p><strong>Name:</strong> ${data.contact.name}</p>
                    <p><strong>Email:</strong> ${data.contact.email}</p>
                    <p><strong>Phone:</strong> ${data.contact.phone || 'N/A'}</p>
                    <p><strong>Company:</strong> ${data.contact.company || 'N/A'}</p>
                `;
                $('#contact_info').html(contactHtml);

                // Fetch follow-ups
                fetch(`/calendar/followups/${data.contact.id}`)
                    .then(resp => resp.json())
                    .then(fData => {
                        if(fData.followups && fData.followups.length){
                            let html = '<h5>Follow-ups</h5><ul class="timeline mb-0">';
                            fData.followups.forEach((fu,index)=>{
                                let color = index===0?"timeline-point-success":"timeline-point-warning";
                                const fuDate = new Date(fu.next_follow_up_date).toLocaleDateString('en-GB', { day:'2-digit', month:'short', year:'numeric' });
                                html += `
                                <li class="timeline-item timeline-item-transparent">
                                    <span class="timeline-point ${color}"></span>
                                    <div class="timeline-event">
                                        <div class="timeline-header mb-3">
                                            <h6 class="mb-0">${fu.title}</h6>
                                            <small class="text-muted">${fuDate}</small>
                                        </div>
                                        <p class="mb-2">${fu.notes || ''}</p>
                                        <hr>
                                    </div>
                                </li>`;
                            });
                            html += '</ul>';
                            $('#followups').html(html);
                        } else {
                            $('#followups').html('<p>No follow-ups</p>');
                        }
                    }).catch(e=>{
                        console.error(e);
                        $('#followups').html('<p>Error loading follow-ups</p>');
                    });
            } else {
                $('#contact_info').html('<p>No client info</p>');
                $('#followups').html('');
            }

            // Show offcanvas only after data is ready
            var offcanvas = new bootstrap.Offcanvas(document.getElementById('eventOffcanvas'));
            offcanvas.show();
        })
        .catch(err=>{
            console.error(err);
            Swal.fire('Error','Could not fetch event details','error');
        });
}


    });

    calendar.render();

    // Change View Buttons
    $('.change-view').click(function(){
        calendar.changeView($(this).data('view'));
    });

    // Filter by Progress
    $('.progress-filter').change(function(){
        let val = $(this).val();
        calendar.refetchEvents();
        calendar.setOption('events', function(fetchInfo, successCallback){
            $.getJSON('/calendar/events', function(events){
                if(val) events = events.filter(e=>e.progress == val);
                successCallback(events);
            });
        });
    });

    // Save Event
 // Save Event
$('#updateEventForm').submit(function(e){
    e.preventDefault();
    let id = $('#event_id').val();
    let url = id ? `/calendar/events/${id}` : `/calendar/events`;
    let method = id ? 'PUT' : 'POST';

    $.ajax({
        url: url,
        method: 'POST',
        data: {
            _token: $('meta[name="csrf-token"]').attr('content'),
            _method: method,
            title: $('#event_title').val(),
            note: $('#note').val(),
            start: $('#event_start').val(),
            end: $('#event_end').val(),
            color: $('#event_color').val(),
            progress: $('#progress').val(),
            user_id: $('#user_id').val()
        },
        success: function(){
            Swal.fire({
                icon: 'success',
                title: 'Saved!',
                text: 'Event updated successfully',
                timer: 1500,
                showConfirmButton: false
            });

            calendar.refetchEvents();

            // Automatically close the offcanvas after update
            var offcanvasEl = document.getElementById('eventOffcanvas');
            var offcanvas = bootstrap.Offcanvas.getInstance(offcanvasEl) || new bootstrap.Offcanvas(offcanvasEl);
            offcanvas.hide();
        },
        error: function(err){
            console.log(err);
            Swal.fire('Error','Check console','error');
        }
    });
});


    // Delete Event
    $('#deleteEvent').click(function(){
        let id = $('#event_id').val();
        if(!id) return;
        Swal.fire({
            title:'Delete?',
            showCancelButton:true,
            confirmButtonText:'Yes'
        }).then(result=>{
            if(result.isConfirmed){
                $.ajax({
                    url:`/calendar/events/${id}`,
                    method:'POST',
                    data:{_token:$('meta[name="csrf-token"]').attr('content'), _method:'DELETE'},
                    success:function(){
                        calendar.refetchEvents();
                        new bootstrap.Offcanvas(document.getElementById('eventOffcanvas')).hide();
                    }
                });
            }
        });
    });

});
</script>

@endsection