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

@section('content')

<style>
    .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-top {
        padding: 10px;
        background-color: #efefef;
        overflow-x: auto;
        overflow-y: hidden;
    }

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

    .booking {
        padding: 7px 10px 10px 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-card {
        min-height: 125px;
        /* width: 285px; */
        padding: 10px;
        margin-bottom: 10px;
        /* cursor: move; */
        background-color: #368df2;
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }

    .booking-card-btn {
        padding: 18px 127px;
        margin-bottom: 10px;
        /* cursor: move; */
        background-color: #343a40;
        color: white;
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        text-align: center;
    }

    .booking-card-btn a {
        color: white;
        font-size: 14px;
        font-weight: 600;
    }

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

    .pending .badge {
        background-color: #f99db1;
    }

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

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

    .completed .badge {
        background-color: #aeeeac;
    }

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

    .timeline-panel h5 {
        margin: 0;
        font-size: 1rem;
        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: 10px;
    }

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

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

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

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

    .bg-dark-gray {
        background-color: #343a40 !important;
    }

    .bg-light-blue {
        background-color: #0472f3 !important;
    }

    .activeline {
        background-color: #343a40 !important;
        color: white;
    }

    .bg-yellow {
        background-color: #ffcc07 !important;
    }

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

    .border-black {
        border: 1px solid #000000;
    }

    .booking-card-text {
        min-height: 45px;
    }
</style>


<div class="status-container">
    <!-- In Progress -->
    <div class="status-column in-progress">
        <div class="card">
            <div class="card-body-top status" id="in_progress">
                <ul class="timeline d-flex gap-3" id="in_progress_timeline">
                </ul>
            </div>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script>

    const updateStatusUrl = '{{ route('booking.update') }}';
    const filterUrl = '{{ route('dashboard') }}';

    function startPendingBookings(data) {
        fetch('{{ url('dashboard/status-start') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                data: data
            })
        })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    notyf.success({
                        message: data.message,
                        duration: 3000
                    });
                    fetchBookings(); // Fetch updated bookings
                } else {
                    notyf.error({
                        message: data.message,
                        duration: 3000
                    });
                }
            })
            .catch(error => console.error('Error:', error));
    }

    function completeBooking(bookingId) {
        fetch(`{{ url('dashboard/status-complete/') }}/${bookingId}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
        })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    notyf.success({
                        message: data.message,
                        duration: 3000
                    });
                    fetchBookings(); // Fetch updated bookings
                } else {
                    notyf.error({
                        message: data.message,
                        duration: 3000
                    });
                }
            })
            .catch(error => console.error('Error:', error));
    }

    function fetchInProgressData() {
        $.ajax({
            type: "GET",
            url: '{{ route('dashboard.inProgress') }}',
            dataType: 'json',
            success: function (res) {
                let timeline = $('#in_progress_timeline');
                timeline.empty(); // Clear existing content

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

    // Fetch data every 5 seconds
    setInterval(fetchInProgressData, 5000);

    // Initial fetch
    fetchInProgressData();


    // function fetchBookings() {
    //     fetch('{{ route('dashboard.inProgress') }}')
    //         .then(response => {
    //             if (!response.ok) {
    //                 throw new Error('Network response was not ok ' + response.statusText);
    //             }
    //             return response.json();
    //         })
    //         .then(data => {
    //             console.log('Data fetched successfully:', data); // Add this line for debugging
    //             const barbers = data.barbers;
    //             const inProgressTimeline = document.getElementById('in_progress_timeline');

    //             inProgressTimeline.innerHTML = '';

    //             barbers.forEach(barber => {
    //                 const barberElement = document.createElement('li');
    //                 barberElement.innerHTML = `
    //             <div class="d-flex gap-3 mb-2">
    //                 <img src="{{ asset('assets/boy.png') }}" width="20" alt="">
    //                 <h5>${barber.name}</h5>
    //             </div>
    //             ${barber.InProgressBookings ? `
    //                                     <div class="booking-card">
    //                                         <div class="d-flex justify-content-between">
    //                                             <h5 class="text-white">${barber.InProgressBookings.getUser.name || barber.InProgressBookings.GuestUser.name}</h5>
    //                                             <h5 class="text-white">$ 50,00</h5>
    //                                         </div>
    //                                         <div class="d-flex justify-content-between">
    //                                             <p class="mb-1 text-white booking-card-text">Aparar barba + contorno + tratamento + Tratamento rosto + Contorno barba</p>
    //                                         </div>
    //                                         <div class="d-flex justify-content-between">
    //                                             <h5 class="text-white">Not Paid</h5>
    //                                             <h5 class="text-white mb-0">15 mins</h5>
    //                                         </div>
    //                                     </div>
    //                                     <div class="booking-card-btn">
    //                                         <a href="#" onclick="event.preventDefault(); completeBooking(${barber.InProgressBookings.id});">Complete</a>
    //                                     </div>
    //                                     ` : `
    //                                     <div class="d-flex justify-content-between booking-card bg-white border-black"></div>
    //                                     <div class="booking-card-btn">
    //                                         <a href="#" onclick="event.preventDefault(); startPendingBookings(${barber.id});">Start</a>
    //                                     </div>
    //                                     `}
    //             ${barber.PendingBookings.map(booking => `
    //                                     <div id="booking-${booking.id}" class="booking" draggable="true" ondragstart="drag(event)">
    //                                         <span class="badge" style="background-color: #343a40; color: #ffffff !important;">${booking.ticket || 4}</span>
    //                                         <div class="timeline-panel">
    //                                             <h5>Client: ${booking.GuestUser.username || booking.getUser.name}</h5>
    //                                             <p>Barber: ${booking.Barber.name}</p>
    //                                             <div class="ticket-status">
    //                                                 <span class="badge bg-light-blue text-white">${booking.start_time} - ${booking.end_time}</span>
    //                                                 <span class="badge bg-white">${booking.date}</span>
    //                                             </div>
    //                                         </div>
    //                                     </div>
    //                                     `).join('')}
    //         `;

    //                 inProgressTimeline.appendChild(barberElement);
    //             });
    //         })
    //         .catch(error => console.error('Error fetching bookings:', error));
    // }

    // // Fetch bookings every 5 seconds
    // setInterval(fetchBookings, 5000);

    // // Initial fetch
    // fetchBookings();
</script>
@endsection