@extends('doctorpanel.layout.app')
@section('title', 'Tabular | Waiting Room')

@section('content')

    <style>
        .buttons-dropdown .dropdown-toggle::after {
            display: none;
        }

        .buttons-dropdown .dropdown-menu {
            min-width: 120px;
        }

        .status-container {
            display: flex;
            justify-content: space-between;
            gap: 20px;
        }

        .status-column {
            width: 100%;
        }

        .card {
            margin-bottom: 20px;
            border: none;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 1rem;
        }

        .card-header {
            background-color: transparent;
            padding: 15px 20px;
            border-bottom: none;
        }

        .card-title {
            font-size: 1.5rem;
            margin-bottom: 0;
            font-weight: bold;
        }

        .card-body {
            padding: 20px;
            background-color: #efefef;
        }

        .booking {
            padding: 7px;
            margin-bottom: 10px;
            cursor: move;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            display: flex;
            gap: 10px;
        }

        .booking .badge {
            padding: 2px 7px;
            border-radius: 5px;
            font-size: 1rem;
            color: #000000;
        }

        .pending .badge {
            background-color: #12c7e7;
        }

        .in-progress .badge {
            background-color: #f8c61bbd;
        }

        .absent .badge {
            background-color: #b4b0b0;
        }

        .completed .badge {
            background-color: #04c5008f;
        }

        .timeline-panel {
            flex-grow: 1;
        }

        .timeline-panel h5 {
            margin: 0;
            font-size: 12.5px !important;
            font-weight: 500;
        }

        .timeline-panel p {
            margin-bottom: 0;
            font-size: 0.875rem;
            color: #333;
        }

        .timeline-panel small {
            color: #666;
        }

        .ticket-status {
            display: flex;
            gap: 2px;
        }

        .ticket-status .badge {
            color: #000;
            background-color: #ffe79f;
            font-size: 0.80rem;
        }

        .timeline {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .timeline li:last-child .booking {
            margin-bottom: 0;
        }

        .badge.bg-white {
            padding-left: 2px;
            padding-right: 2px;
        }

        .bg-light-pink {
            background-color: #12c7e7 !important;
        }

        .bg-light-purple {
            background-color: #f8c61bbd !important;
        }

        .bg-light-gray {
            background-color: #b4b0b0 !important;
        }

        .bg-light-green {
            background-color: #04c5008f !important;
        }

        .content-body .container-fluid {
            padding-top: 1rem !important;
        }

        .max-w-100 {
            max-width: 100%;
            overflow-x: auto !important;
        }

        .__active {
            background-color: #12C7E7 !important;
            color: black;
        }

        .status-container-row .col-sm-3,
        .pr-0 {
            padding-right: 0px !important;
        }

        .notificationBox {
            position: absolute;
            right: 0;
        }

        @media(max-width:1024px) {
            .notificationBox {
                right: 10px;
            }
        }

        .card-body {
            padding: 10px;
            min-height: 200px;
        }

        .ticket-status-row {
            float: right;
            margin-top: 5px;
        }

        .notificationBoxInner {
            position: absolute;
            right: 15px;
        }

        .btn.btn-success.shadow.btn-xs.sharp.mb-4 {
            margin-bottom: -5px !important;
        }
    </style>

    {{-- Dashboard Analytics Start --}}


    {{-- Dashboard ends --}}

    <div class="row">
        <div class="col-lg-12 pr-0">
            <div class="card-action coin-tabs mb-3 mt-sm-0">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item me-3" role="presentation">
                        <a class="nav-link text-black {{ $barberId == '' ? '__active' : '' }}" href="#" role="tab"
                            aria-selected="true"
                            onclick="filterBookings('')">{{ auth()->guard('doctor')->user()->name }}</a>
                    </li>
                    {{-- @foreach ($barbers as $barber)
                        <li class="nav-item me-3" role="presentation">
                            <a class="nav-link text-black {{ $barber->id == $barberId ? '__active' : '' }}" href="#"
                                role="tab" aria-selected="true" onclick="filterBookings('{{ $barber->id }}')">
                                {{ $barber->name }}
                            </a>
                        </li>
                    @endforeach --}}
                </ul>
            </div>
        </div>
    </div>

    <div class="status-container-row row" id="all_bookings">
    </div>
    <!-- Notification Modal -->
    <div class="modal fade" id="notifyModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="notifyModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="notifyModalLabel">{{ __('translations.Send Notification') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="cancelAllAppointments">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="user_id" id="user_id" value="">
                        <input type="hidden" name="booking_id" id="booking_id" value="">
                        <input type="hidden" name="service_provider_id" id="service_provider_id" value="">
                        <div class="mb-3">
                            <label for="notifyMessage" class="form-label">{{ __('translations.Message') }}</label>
                            <textarea class="form-control" name="notification_message" id="notifyMessage" rows="4"></textarea>
                            <div id="charCount" class="form-text">{{ __('translations.256 characters remaining') }}</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('translations.Close') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('translations.Send Notification') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        const notifyMessage = document.getElementById('notifyMessage');
        const charCount = document.getElementById('charCount');
        const maxChars = 256;

        // Function to update character count
        function updateCharCount() {
            const remainingChars = maxChars - notifyMessage.value.length;
            charCount.textContent = `${remainingChars} characters remaining`;

            // Change color if limit is reached
            if (remainingChars < 0) {
                charCount.style.color = 'red';
            } else {
                charCount.style.color = '';
            }
        }

        // Event listener for input
        notifyMessage.addEventListener('input', function() {
            if (notifyMessage.value.length > maxChars) {
                notifyMessage.value = notifyMessage.value.substring(0, maxChars);
            }
            updateCharCount();
        });

        // Event listener for paste
        notifyMessage.addEventListener('paste', function(e) {
            e.preventDefault(); // Prevent the default paste action
            const pastedData = e.clipboardData.getData('text/plain'); // Get pasted data as plain text
            const currentLength = notifyMessage.value.length;

            // Calculate the remaining characters
            const remainingChars = maxChars - currentLength;

            // If the pasted data is longer than the remaining characters, trim it
            if (pastedData.length > remainingChars) {
                notifyMessage.value += pastedData.substring(0, remainingChars);
            } else {
                notifyMessage.value += pastedData; // Otherwise, just append the pasted data
            }

            updateCharCount(); // Update character count after pasting
        });

        // Initial character count update
        updateCharCount();
    </script>

    <script>
        const updateStatusUrl = '{{ route('doctorpanel.booking.update') }}';
        const filterUrl = '{{ route('dashboard') }}';

        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("text", ev.target.id);
            ev.target.classList.add("dragging");
        }

        function drop(ev, status) {
            ev.preventDefault();
            const data = ev.dataTransfer.getData("text");
            const draggedElement = document.getElementById(data);
            const targetStatus = document.getElementById(status);

            // Remove the dragging class
            draggedElement.classList.remove("dragging");

            // Append the dragged element to the new status column
            targetStatus.querySelector('.timeline').appendChild(draggedElement);

            // Update the status on the server
            const bookingId = data.split('-')[1];
            updateStatus(bookingId, status);
        }

        $(document).on('click', '.complete-booking', function() {
            var bookingId = $(this).data('booking-id');

            // Call the function to update the status to 'completed' or any other status
            updateStatus(bookingId, 'completed');
        });

        $(document).on('click', '.progress-booking', function() {
            var bookingId = $(this).data('booking-id');

            // Call the function to update the status to 'completed' or any other status
            updateStatus(bookingId, 'in_progress');
        });

        $(document).on('click', '.absent-booking', function() {
            var bookingId = $(this).data('booking-id');

            // Call the function to update the status to 'completed' or any other status
            updateStatus(bookingId, 'absent');
        });

        function updateStatus(bookingId, newStatus) {
            fetch(updateStatusUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        bookingId: bookingId,
                        newStatus: newStatus
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (!data.success) {
                        console.log(data.message);
                        notyf.success({
                            message: data.message,
                            duration: 3000
                        });
                    }
                })
                .catch(error => {
                    console.error('Error updating status:', error);
                    notyf.error({
                        message: error,
                        duration: 3000
                    });
                });
        }

        function filterBookings(barberId) {
            const url = new URL(window.location.href);
            url.searchParams.set('barber_id', barberId);
            window.location.href = url.toString();
        }

        function cancelAppointments(userId, bookingId, serviceProviderId) {
            // Set the values in the modal
            $('#user_id').val(userId);
            $('#booking_id').val(bookingId);
            $('#service_provider_id').val(serviceProviderId);
            // console.log(userId, bookingId, serviceProviderId);
            // Show the modal
            $('#notifyModal').modal('show');
        }


        $("#cancelAllAppointments").on('submit', function(e) {
            e.preventDefault();
            const btn = $("#submitCancelForm");
            const modal = $('#cancelModal');
            let formData = new FormData($("#cancelAllAppointments")[0]);
            $.ajax({
                type: "POST",
                url: "{{ route('doctor.sendNotificationToPatient') }}",
                dataType: 'json',
                contentType: false,
                processData: false,
                cache: false,
                data: formData,
                beforeSend: function() {
                    btn.prop('disabled', true);
                    btn.html(
                        '<div class="spinner-border" role="status" style="height: 14px;width: 14px;accent-color: ;"> <span class="visually-hidden">Loading...</span> </div>'
                    );
                    $('.error-message').html('');
                },
                success: function(res) {
                    if (res.success === true) {
                        btn.prop('disabled', false);
                        btn.html('Yes, Cancel');
                        modal.modal('hide');
                        notyf.success({
                            message: res.message,
                            duration: 3000
                        });
                        setTimeout(function() {
                            window.location.reload();
                        }, 2000);

                    } else {
                        btn.prop('disabled', false);
                        btn.html('Yes, Cancel');
                        modal.modal('hide');
                        console.log(res);

                        notyf.error({
                            message: res.message,
                            duration: 3000
                        });
                    }
                },
                error: function(e) {
                    // Check if responseJSON exists and has a message
                    if (e.responseJSON && e.responseJSON.message) {
                        notyf.error({
                            message: e.responseJSON.message,
                            duration: 3000
                        });
                    } else {
                        notyf.error({
                            message: 'An unexpected error occurred.',
                            duration: 3000
                        });
                    }
                }
            });
        });
    </script>

    <!-- Fetch latest bookings in every 5 seconds -->
    <script>
        let currentBarberId = '';

        function fetchBookings(barberId = '') {
            $.ajax({
                type: "GET",
                url: '{{ route('doctorpanel.bookings') }}',
                data: {
                    barber_id: barberId
                },
                dataType: 'json',
                success: function(res) {
                    let timeline = $('#all_bookings');
                    // Clear previous data
                    timeline.empty();

                    if (res.Error === false) {
                        // Append the bookings
                        timeline.append(res.html);
                    }
                },
                error: function(e) {
                    console.error('Error fetching bookings:', e);
                }
            });
        }

        // Function to handle filter selection
        function filterBookings(barberId) {
            currentBarberId = barberId;
            fetchBookings(currentBarberId);


            // Remove __active class from all nav links
            $('.nav-link').removeClass('__active');

            // Add __active class to the selected link
            if (barberId === '') {
                // Select "All Doctors" tab
                $('.nav-link:contains("All Doctors")').addClass('__active');
            } else {
                // Select specific barber tab
                $(`.nav-link[onclick="filterBookings('${barberId}')"]`).addClass('__active');
            }
        }

        function startAutoRefresh() {
            setInterval(() => {
                fetchBookings(currentBarberId);
            }, 5000);
        }

        // Initial fetch and start auto-refresh
        $(document).ready(function() {
            fetchBookings(currentBarberId);
            startAutoRefresh();
        });
    </script>

@endsection