@extends('layouts.app')
@section('title', 'Salon Master Calendar')

@section('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css">
<style>
    .fc-event {
        border-radius: 6px;
        padding: 4px 6px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        border: none;
    }
    .fc-event.confirmed { background-color: #0284c7; }
    .fc-event.completed { background-color: #10b981; }
    .fc-event.in_salon { background-color: #f59e0b; }
    .fc-header-toolbar { margin-bottom: 16px; }
    .fc-today-button { text-transform: capitalize; }
    .stylist-stat-pill {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        margin-bottom: 10px;
    }
</style>
@endsection

@section('content')
<section class="content-header">
    <h1>Salon Master Appointment Calendar
        <small>Real-time scheduling, stylist availability & chair layout</small>
    </h1>
</section>

<section class="content">
    <div class="row">
        <!-- Left Sidebar: Stylists Roster & Legend -->
        <div class="col-md-3">
            <!-- New Appointment Button -->
            <button type="button" class="btn btn-block btn-primary btn-lg" id="btnOpenCalendarNewBooking" 
                    data-toggle="modal" data-target="#salonBookingEngineModal"
                    style="background-color: #0284c7; border-color: #0284c7; font-weight: 800; border-radius: 8px; margin-bottom: 16px; padding: 12px;">
                <i class="fa fa-plus-circle"></i> + Book New Appointment
            </button>

            <!-- Status Legend Box -->
            <div class="box box-solid box-default" style="border-radius: 8px;">
                <div class="box-header with-border"><h4 class="box-title" style="font-size: 14px; font-weight: bold;">Status Legend</h4></div>
                <div class="box-body">
                    <div style="margin-bottom: 8px;"><span class="badge" style="background:#0284c7; padding:4px 8px;">● Confirmed</span> Upcoming Appointment</div>
                    <div style="margin-bottom: 8px;"><span class="badge" style="background:#f59e0b; padding:4px 8px;">● In-Salon</span> Customer is at Salon</div>
                    <div style="margin-bottom: 8px;"><span class="badge" style="background:#10b981; padding:4px 8px;">● Completed</span> Finished & Invoiced</div>
                </div>
            </div>

            <!-- Stylists Available Box -->
            <div class="box box-solid box-primary" style="border-radius: 8px;">
                <div class="box-header with-border" style="background: #0284c7; color: white;">
                    <h4 class="box-title" style="font-size: 14px; font-weight: bold;"><i class="fa fa-users"></i> Active Stylists</h4>
                </div>
                <div class="box-body" style="padding: 10px;">
                    @foreach($stylists as $st)
                        <div class="stylist-stat-pill">
                            <div style="width: 36px; height: 36px; background: #0284c7; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold;">
                                {{ strtoupper(substr($st->name, 0, 2)) }}
                            </div>
                            <div>
                                <strong style="font-size: 13px; color: #1e293b;">{{ $st->name }}</strong>
                                <div style="font-size: 11px; color: #64748b;">{{ $st->role }}</div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <!-- Right Main Calendar View -->
        <div class="col-md-9">
            <div class="box box-primary" style="border-radius: 8px; padding: 15px;">
                <div class="box-body no-padding">
                    <div id="salonCalendarView"></div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Appointment Details View Modal -->
<div class="modal fade" id="appointmentDetailModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="border-radius: 12px; overflow: hidden;">
            <div class="modal-header" style="background: #0284c7; color: white;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" style="font-weight: 800;"><i class="fa fa-calendar-check-o"></i> Appointment Details (<span id="modalApptRef"></span>)</h4>
            </div>
            <div class="modal-body" style="padding: 20px;">
                <div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; margin-bottom: 16px;">
                    <div style="display: flex; justify-content: space-between; align-items: flex-start;">
                        <div>
                            <h3 style="margin: 0 0 4px 0; color: #0f172a; font-weight: 800;" id="modalCustomerName">Customer Name</h3>
                            <div style="font-size: 14px; color: #64748b;" id="modalCustomerPhone">📞 077XXXXXXX</div>
                        </div>
                        <span class="label label-primary" style="font-size: 13px; padding: 4px 10px;" id="modalStatusBadge">Confirmed</span>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="text-muted" style="font-size: 12px;">Service:</label>
                            <div style="font-size: 15px; font-weight: 700; color: #0284c7;" id="modalServiceName">Hair Cut</div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="text-muted" style="font-size: 12px;">Date & Time:</label>
                            <div style="font-size: 14px; font-weight: 700;" id="modalApptDateTime">2026-08-04 | 09:00 AM</div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="text-muted" style="font-size: 12px;">Assigned Stylist:</label>
                            <div style="font-size: 14px; font-weight: 600;" id="modalStylistName">Amelda Fernando</div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="text-muted" style="font-size: 12px;">Chair / Station:</label>
                            <div style="font-size: 14px; font-weight: 600;" id="modalChairName">Chair #1</div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="text-muted" style="font-size: 12px;">Service Price:</label>
                            <div style="font-size: 16px; font-weight: 800; color: #10b981;" id="modalPrice">Rs. 2,500.00</div>
                        </div>
                    </div>
                </div>

                <hr style="margin: 15px 0;">

                <!-- Change Status Action Buttons -->
                <label style="font-size: 13px; font-weight: bold; color: #334155; margin-bottom: 8px; display: block;">Change Status:</label>
                <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                    <button type="button" class="btn btn-warning btn-sm" id="btnSetInSalon" style="font-weight: bold;"><i class="fa fa-user"></i> Mark In-Salon (Arrived)</button>
                    <button type="button" class="btn btn-success btn-sm" id="btnSetCompleted" style="font-weight: bold;"><i class="fa fa-check-circle"></i> Mark Completed (Done)</button>
                    <button type="button" class="btn btn-danger btn-sm" id="btnSetCancelled"><i class="fa fa-times-circle"></i> Cancel</button>
                </div>
            </div>
            <div class="modal-footer" style="background: #f8fafc; display: flex; justify-content: space-between;">
                <div>
                    <a href="#" class="btn btn-success btn-lg" id="modalPosLink" style="font-weight: bold;"><i class="fa fa-shopping-cart"></i> Go to POS Checkout</a>
                </div>
                <div>
                    <a href="#" target="_blank" class="btn btn-info" id="modalWaBtn" style="background: #25d366; border-color: #25d366; font-weight: bold;"><i class="fa fa-whatsapp"></i> WhatsApp</a>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

@include('salonbooking::partials.booking_modal')

@endsection

@section('javascript')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js"></script>
<script>
var currentAppointmentId = null;

$(document).ready(function() {
    $('#salonCalendarView').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay,listWeek'
        },
        defaultView: 'month',
        editable: false,
        eventLimit: true,
        events: '{{ url("salon/calendar/events") }}',
        eventClick: function(calEvent, jsEvent, view) {
            currentAppointmentId = calEvent.id;

            $('#modalApptRef').text('Ref #' + calEvent.id);
            $('#modalCustomerName').text(calEvent.title);
            $('#modalCustomerPhone').text('📞 ' + (calEvent.extendedProps.phone || '077XXXXXXX'));
            $('#modalServiceName').text(calEvent.title);
            $('#modalApptDateTime').text(moment(calEvent.start).format('dddd, MMMM Do YYYY | h:mm A'));
            $('#modalStylistName').text(calEvent.extendedProps.stylist || 'Amelda Fernando');
            $('#modalChairName').text(calEvent.extendedProps.chair || 'Chair #1');
            $('#modalPrice').text('Rs. ' + parseFloat(calEvent.extendedProps.price || 2500).toLocaleString());
            
            var st = calEvent.extendedProps.status ? calEvent.extendedProps.status.toUpperCase() : 'CONFIRMED';
            $('#modalStatusBadge').text(st);

            // Dynamic POS URL linking this specific appointment
            $('#modalPosLink').attr('href', '{{ url("pos/create") }}?appointment_id=' + calEvent.id);

            var phone = (calEvent.extendedProps.phone || '').replace(/[^0-9]/g, '');
            if (phone.startsWith('0')) phone = '94' + phone.substring(1);
            var waMsg = encodeURIComponent('Hello, reminder for your salon appointment on ' + moment(calEvent.start).format('YYYY-MM-DD h:mm A') + '.');
            $('#modalWaBtn').attr('href', 'https://wa.me/' + phone + '?text=' + waMsg);

            $('#appointmentDetailModal').modal('show');
        }
    });

    // 1-Click Status update handlers
    $('#btnSetInSalon').click(function() { updateStatus('in_salon'); });
    $('#btnSetCompleted').click(function() { updateStatus('completed'); });
    $('#btnSetCancelled').click(function() { updateStatus('cancelled'); });

    function updateStatus(status) {
        if (!currentAppointmentId) return;
        $.post('{{ url("salon/bookings/update-status") }}', {
            _token: '{{ csrf_token() }}',
            id: currentAppointmentId,
            status: status
        }, function(res) {
            if (res.success) {
                $('#modalStatusBadge').text(status.toUpperCase());
                $('#salonCalendarView').fullCalendar('refetchEvents');
                if (typeof toastr !== 'undefined') toastr.success(res.message);
                else alert(res.message);
            }
        });
    }
});
</script>
@endsection