@extends('layouts.app')
@section('title', 'Bangladesh Unbound - Ongoing Tours')
@section('page-title', 'Ongoing Tours')

@section('breadcrumb')
<nav class="mb-4 breadcrumb-container" aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ route('customer.dashboard') }}">
                <img src="{{ asset('backend/img/ico/ico-dashboard.svg') }}" alt="Dashboard" class="breadcrumb-icon">
                Dashboard
            </a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            <img src="{{ asset('backend/img/ico/ico-bookings.svg') }}" alt="Bookings" class="breadcrumb-icon">
            Ongoing Tours
        </li>
    </ol>
</nav>
@endsection

@section('content')
<div class="ongoing-tours-container">

    <!-- Tour Header -->
    <div class="mb-4 tour-header">
        <div class="row align-items-center">
            <div class="col-md-8">
                <div class="tour-info d-flex align-items-start">
                    <div class="tour-icon me-3">
                        <img src="{{ asset('backend/img/ico/ico-package.svg') }}" alt="Tour Icon" class="tour-icon-img">
                    </div>
                    <div class="tour-details">
                        <h2 class="tour-title">{{ $booking?->tourPackage?->name ?? 'Tour Package' }}</h2>
                        <p class="tour-duration">{{ $booking->duration ?? 'N/A' }}</p>
                        <div class="gap-3 mt-2 tour-locations d-flex">
                            <div><strong>Pickup:</strong> {{ $booking->pickup_location ?? 'N/A' }}</div>
                            <div><strong>Drop off:</strong> {{ $booking->dropoff_location ?? 'N/A' }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="tour-guide-card">
                    <div class="guide-header">Tour Guide</div>
                    <div class="guide-info-card d-flex align-items-center">
                        <div class="guide-avatar-large me-3">
                            <img src="{{ Auth::guard('customer')->user()->profile_photo_path ? asset('storage/' . Auth::guard('customer')->user()->profile_photo_path) : asset('backend/img/avatar.jpg') }}"
                                alt="{{ Auth::guard('customer')->user()->full_name ?? '' }}" class="guide-img">
                        </div>
                        <div class="guide-details">
                            <h4 class="guide-name">{{ Auth::guard('customer')->user()->full_name ?? 'N/A' }}</h4>
                            <p class="guide-phone">{{ Auth::guard('customer')->user()->phone ?? 'N/A' }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tour Calendar -->
    <div class="mb-5 tour-progress">
        <div class="mb-3 progress-header d-flex justify-content-between align-items-center">
            <h4 class="progress-title">Tour Calendar</h4>
            <a href="{{ route('customer.booking.feedback.export', $booking->id) }}" class="download-btn" id="downloadFullItinerary">
                <div class="btn-text">
                    <span>Download</span>
                    <span>Entire Tour Plan</span>
                </div>
                <img src="{{ asset('backend/img/ico/ico-download.svg') }}" alt="Download" class="download-icon">
            </a>
        </div>

        <div class="calendar-grid" id="calendarGrid">
            @php
            use Carbon\Carbon;

            $totalDays = $booking->duration_days ?? 30;
            $submittedDays = $submittedDays ?? [];
            $currentDay = $currentDay ?? 1;

            $firstOfMonth = Carbon::now()->startOfMonth();
            $lastOfMonth = Carbon::now()->endOfMonth();
            $monthDays = [];

            for ($day = 1; $day <= $lastOfMonth->day; $day++) {
                $monthDays[] = Carbon::createFromDate($firstOfMonth->year, $firstOfMonth->month, $day);
                }
                $nextPendingDay = !empty($submittedDays) ? max($submittedDays) + 1 : 1;

                @endphp

                @foreach($monthDays as $dayDate)
                @php
                $dayNumber = $dayDate->day;
                $inFeedbackRange = $dayNumber <= $totalDays; $isCompleted=in_array($dayNumber, $submittedDays);
                    $isEnabled=$dayNumber==$nextPendingDay; $isLocked=$inFeedbackRange && !$isEnabled && !$isCompleted;
                    $isActive=$dayNumber==$currentDay; @endphp <div
                    class="calendar-day {{ $isActive ? 'active' : '' }} {{ $isLocked ? 'locked' : '' }} {{ $isEnabled ? 'enabled' : '' }}"
                    data-day="{{ $dayNumber }}">
                    <div class="day-number">Day-{{ $dayNumber }}</div>
                    <div class="day-date">{{ $dayDate->format('d M') }}</div>
                    <div class="day-name">{{ $dayDate->format('D') }}</div>

                    @if($isLocked)
                    <div class="lock-icon"><i class="bi bi-lock"></i></div>
                    @endif

                    @if($isCompleted)
                    <div class="completed-icon"><i class="bi bi-check-circle"></i></div>
                    @endif
        </div>
        @endforeach
    </div>
</div>

<!-- Day Details -->
<div class="day-details">
    <div class="day-content">
        @for($day = 1; $day <= $totalDays; $day++) @php $dayData=$dayItineraries[$day] ?? [];
            $isCompleted=in_array($day, $submittedDays); $feedback=$feedbackData[$day] ?? null; @endphp <div
            class="day-section {{ $day == $currentDay ? 'active' : '' }}" id="day-{{ $day }}">
            <h3>{{ $isCompleted ? "Feedback for Day $day" : "Day $day" }}</h3>

            <div class="checklist">
                @foreach($dayData['activities'] ?? [] as $index => $activity)
                @php $completedActivities = $feedback->activities_completed ?? []; @endphp
                <div class="checklist-item">
                    <input type="checkbox" id="activity_{{ $day }}_{{ $index }}" class="checklist-checkbox" {{
                        $isCompleted && in_array($activity, (array)$completedActivities) ? 'checked' : '' }} {{
                        $isCompleted ? 'disabled' : '' }}>
                    <label for="activity_{{ $day }}_{{ $index }}">{{ $activity }}</label>
                </div>
                @endforeach
            </div>

            <textarea class="form-control comments-textarea" id="comments_{{ $day }}" rows="3"
                placeholder="Your comments" {{ $isCompleted ? 'disabled' : ''
                }}>{{ $isCompleted ? ($feedback->comments ?? '') : '' }}</textarea>

            @if(!$isCompleted)
            <div class="mt-2 action-buttons">
                <button class="btn btn-submit submit-feedback" data-day="{{ $day }}" data-booking="{{ $booking->id }}">
                    Submit Feedback
                </button>
                <button class="btn btn-warning raise-complaint" data-day="{{ $day }}" data-bs-toggle="modal"
                    data-bs-target="#complaintModal">
                    Raise Complaint
                </button>
            </div>
            @endif
    </div>
    @endfor
</div>
</div>
</div>

@include('customer.dashboard.partials.modals.alert')
@include('customer.dashboard.partials.modals.complaint')
@include('customer.dashboard.partials.modals.success')

@endsection
@push('scripts')
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
    let currentActiveDay = {{ $currentDay }};
    const totalDays = {{ $totalDays }};
    const submittedDays = @json($submittedDays ?? []);
    const alertModal = new bootstrap.Modal(document.getElementById('alertModal'));
    const complaintModal = new bootstrap.Modal(document.getElementById('complaintModal'));
    const successModal = new bootstrap.Modal(document.getElementById('successModal'));

    /** ===============================
     *  Initialize the Calendar
     * =============================== */
    function initializeCalendar() {
        const calendarDays = document.querySelectorAll('.calendar-day');
        calendarDays.forEach(day => {
            day.addEventListener('click', function() {
                const dayNumber = parseInt(this.dataset.day);
                if (this.classList.contains('locked')) {
                    showAlert(`Day ${dayNumber} is not yet available. Please complete previous days first.`);
                    return;
                }
                updateActiveDay(dayNumber);
            });
        });
    }

    /** ===============================
     *  Update Active Day
     * =============================== */
    function updateActiveDay(dayNumber) {
        document.querySelectorAll('.calendar-day').forEach(day => {
            day.classList.toggle('active', parseInt(day.dataset.day) === dayNumber);
        });
        document.querySelectorAll('.day-section').forEach(section => {
            section.classList.toggle('active', section.id === `day-${dayNumber}`);
        });
        currentActiveDay = dayNumber;
    }

    /** ===============================
     *  Modal Helpers
     * =============================== */
    function showAlert(message) {
        document.getElementById('alertMessage').textContent = message;
        alertModal.show();
        setTimeout(() => alertModal.hide(), 3000);
    }

    function showSuccess(message) {
        document.getElementById('successMessage').textContent = message;
        successModal.show();
    }

    /** ===============================
     *  Submit Feedback
     * =============================== */
    document.querySelectorAll('.submit-feedback').forEach(button => {
        button.addEventListener('click', function() {
            const day = this.dataset.day;
            const bookingId = this.dataset.booking;

            const activities = Array.from(document.querySelectorAll(`#day-${day} .checklist-checkbox:checked`))
                .map(cb => cb.nextElementSibling.textContent);

            const comments = document.getElementById(`comments_${day}`).value.trim();

            if (activities.length === 0) return showAlert('Please check at least one activity.');
            if (!comments) return showAlert('Please provide comments.');

            submitFeedback(day, bookingId, activities, comments);
        });
    });

    /** ===============================
     *  AJAX: Submit Feedback
     * =============================== */
    function submitFeedback(day, bookingId, activities, comments) {
        const button = document.querySelector(`.submit-feedback[data-day="${day}"]`);
        const originalText = button.textContent;
        button.textContent = 'Submitting...';
        button.disabled = true;

        const formData = new FormData();
        formData.append('day', `day${day}`);
        formData.append('booking_id', bookingId);
        formData.append('feedback_day', JSON.stringify(activities));
        formData.append('comments', comments);
        formData.append('_token', '{{ csrf_token() }}');

        fetch('{{ route("customer.booking.feedback.store", $booking->id) }}', {
            method: 'POST',
            body: formData
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                handleFeedbackSuccess(day);
                showSuccess('Your feedback has been submitted successfully!');
            } else {
                showAlert(data.message || 'Failed to submit feedback.');
                button.textContent = originalText;
                button.disabled = false;
            }
        })
        .catch(err => {
            console.error(err);
            showAlert('An error occurred while submitting feedback.');
            button.textContent = originalText;
            button.disabled = false;
        });
    }

    /** ===============================
     *  Handle Feedback Success (UI)
     * =============================== */
    function handleFeedbackSuccess(day) {
        const daySection = document.getElementById(`day-${day}`);
        const button = daySection.querySelector('.submit-feedback');
        button.textContent = 'Submitted';
        button.disabled = true;

        // Reset checkboxes and textarea
        daySection.querySelectorAll('.checklist-checkbox').forEach(cb => cb.checked = false);
        const textarea = daySection.querySelector(`#comments_${day}`);
        if (textarea) textarea.value = '';

        // Mark completed in calendar
        const currentDayEl = document.querySelector(`.calendar-day[data-day="${day}"]`);
        if (currentDayEl) {
            currentDayEl.classList.add('completed');
            currentDayEl.classList.remove('locked');
            if (!currentDayEl.querySelector('.completed-icon')) {
                const icon = document.createElement('div');
                icon.className = 'completed-icon';
                icon.innerHTML = '<i class="bi bi-check-circle"></i>';
                currentDayEl.appendChild(icon);
            }
        }

        // Enable next day
        const nextDay = parseInt(day) + 1;
        if (nextDay <= totalDays) {
            const nextDayEl = document.querySelector(`.calendar-day[data-day="${nextDay}"]`);
            if (nextDayEl && nextDayEl.classList.contains('locked')) {
                nextDayEl.classList.remove('locked');
                const lockIcon = nextDayEl.querySelector('.lock-icon');
                if (lockIcon) lockIcon.remove();
            }
        }
    }

    /** ===============================
     *  Complaint Handling
     * =============================== */
    document.querySelectorAll('.raise-complaint').forEach(btn => {
        btn.addEventListener('click', function() {
            document.getElementById('complaintDay').value = this.dataset.day;
        });
    });

    document.getElementById('complaintForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const day = document.getElementById('complaintDay').value;
        const bookingId = document.getElementById('complaintBookingId').value;
        const complaint = document.getElementById('complaintText').value.trim();
        if (!complaint) return showAlert('Please describe your complaint.');
        submitComplaint(day, bookingId, complaint);
    });

    function submitComplaint(day, bookingId, complaint) {
        const formData = new FormData();
        formData.append('day', day);
        formData.append('booking_id', bookingId);
        formData.append('complaint', complaint);
        formData.append('_token', '{{ csrf_token() }}');

        fetch('{{ route("customer.complaint.store", $booking->id) }}', {
            method: 'POST',
            body: formData
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                complaintModal.hide();
                document.getElementById('complaintText').value = '';
                showSuccess('Your complaint has been submitted successfully!');
            } else {
                showAlert(data.message || 'Failed to submit complaint.');
            }
        })
        .catch(err => {
            console.error(err);
            showAlert('Error while submitting complaint.');
        });
    }

    /** ===============================
     *  Initialize Everything
     * =============================== */
    initializeCalendar();
});
</script>
@endpush