@extends('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