@extends('layouts.app')

@section('content')
<div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">{{ __('messages.calendar') }}</h1>
        </div>
    </div>
</div>

<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-xxl">
        <div class="card mb-8">
            <div class="card-body">
                <div id="kt_calendar_app"></div>
            </div>
        </div>

        <div class="card">
            <div class="card-body pt-0">
                <table class="table align-middle table-row-dashed fs-6 gy-5">
                    <thead>
                        <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                            <th>{{ __('orders.order') }}</th>
                            <th>{{ __('common.customer') }}</th>
                            <th>{{ __('common.cloth_type') }}</th>
                            <th>{{ __('messages.trial_date') }}</th>
                            <th>{{ __('orders.delivery_date') }}</th>
                        </tr>
                    </thead>
                    <tbody class="fw-semibold text-gray-600">
                        @forelse($rows as $row)
                            <tr>
                                <td><a href="{{ route('orders.show', ['order' => $row->order]) }}">{{ $row->order->order_number }}</a></td>
                                <td>{{ $row->order->customer?->first_name }} {{ $row->order->customer?->last_name }}</td>
                                <td>{{ $row->clothType?->title }}</td>
                                <td>{{ $row->trial_date?->format('d.m.Y') ?: '-' }}</td>
                                <td>{{ $row->delivery_date?->format('d.m.Y') ?: '-' }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center py-10">{{ __('messages.no_record_found') }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
                <div class="pt-8">
                    {{ $rows->links('pagination::bootstrap-5') }}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Calendar Event Detail Modal -->
<div class="modal fade" id="kt_calendar_modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">{{ __('common.appointment_order_detail') }}</h3>
                <button type="button" class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                    <i class="ki-outline ki-cross fs-1"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="d-flex flex-column gap-5">
                    <div class="d-flex align-items-center gap-3">
                        <span class="badge badge-light-primary fs-7" id="modal_event_type"></span>
                        <span class="fs-6 fw-bold text-gray-900" id="modal_order_number"></span>
                    </div>
                    <div class="separator separator-dashed"></div>
                    <div class="row g-5">
                        <div class="col-6">
                            <label class="text-muted fs-8 d-block">{{ __('common.customer_name') }}</label>
                            <span class="fw-bold text-gray-800 fs-6" id="modal_customer_name"></span>
                        </div>
                        <div class="col-6">
                            <label class="text-muted fs-8 d-block">{{ __('common.customer_phone') }}</label>
                            <span class="fw-bold text-gray-800 fs-6" id="modal_customer_phone"></span>
                        </div>
                        <div class="col-12">
                            <label class="text-muted fs-8 d-block">{{ __('common.cloth_type') }}</label>
                            <span class="fw-bold text-gray-800 fs-6" id="modal_cloth_type"></span>
                        </div>
                        <div class="col-6">
                            <label class="text-muted fs-8 d-block">{{ __('messages.trial_date') }}</label>
                            <span class="fw-bold text-gray-800 fs-6" id="modal_trial_date"></span>
                        </div>
                        <div class="col-6">
                            <label class="text-muted fs-8 d-block">{{ __('orders.delivery_date') }}</label>
                            <span class="fw-bold text-gray-800 fs-6" id="modal_delivery_date"></span>
                        </div>
                    </div>
                    <div class="separator separator-dashed"></div>
                    <div>
                        <button class="btn btn-sm btn-light-primary w-100 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#modal_order_details_collapse" aria-expanded="false" aria-controls="modal_order_details_collapse">
                            <i class="ki-outline ki-down fs-4 me-1"></i> {{ __('common.order_details_specs') }}
                        </button>
                        <div class="collapse mt-4" id="modal_order_details_collapse">
                            <div class="d-flex flex-column gap-4">
                                <div>
                                    <h6 class="text-gray-800 fw-bold fs-6 mb-2">{{ __('quick_orders.measurements') }}</h6>
                                    <div class="row g-3" id="modal_measurements_container"></div>
                                    <span class="text-muted fs-7 d-none" id="modal_no_measurements">{{ __('common.no_measurements_found') }}</span>
                                </div>
                                <div class="separator separator-dashed"></div>
                                <div>
                                    <h6 class="text-gray-800 fw-bold fs-6 mb-2">{{ __('quick_orders.attributes') }}</h6>
                                    <div class="row g-3" id="modal_attributes_container"></div>
                                    <span class="text-muted fs-7 d-none" id="modal_no_attributes">{{ __('common.no_attributes_found') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">{{ __('common.close') }}</button>
                <a id="modal_order_url" href="#" class="btn btn-primary btn-sm">{{ __('common.go_to_order') }}</a>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link href="{{ asset('metronic/plugins/custom/fullcalendar/fullcalendar.bundle.css') }}" rel="stylesheet" type="text/css" />
@endpush

@push('scripts')
<script src="{{ asset('metronic/plugins/custom/fullcalendar/fullcalendar.bundle.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const calendarEl = document.getElementById('kt_calendar_app');
    if (!calendarEl || typeof FullCalendar === 'undefined') {
        return;
    }
    const urlParams = new URLSearchParams(window.location.search);
    const viewParam = urlParams.get('view') || 'dayGridMonth';
    const dateParam = urlParams.get('date');

    const calendar = new FullCalendar.Calendar(calendarEl, {
        locale: '{{ App::getLocale() }}',
        initialView: viewParam,
        initialDate: dateParam ? dateParam : undefined,
        height: 700,
        navLinks: true,
        editable: false,
        dayMaxEvents: true,
        events: @json($events),
        eventClick: function(info) {
            info.jsEvent.preventDefault(); // Prevent direct redirect
            const props = info.event.extendedProps;
            if (!props) return;

            // Fill modal info
            document.getElementById('modal_event_type').innerText = props.eventTypeName || '';
            document.getElementById('modal_order_number').innerText = props.orderNumber || '';
            document.getElementById('modal_customer_name').innerText = props.customerName || '-';
            document.getElementById('modal_customer_phone').innerText = props.customerPhone || '-';
            document.getElementById('modal_cloth_type').innerText = props.clothType || '-';
            document.getElementById('modal_trial_date').innerText = props.trialDate || '-';
            document.getElementById('modal_delivery_date').innerText = props.deliveryDate || '-';
            document.getElementById('modal_order_url').setAttribute('href', props.url || '#');

            // Handle measurements
            const measurementsContainer = document.getElementById('modal_measurements_container');
            const noMeasurements = document.getElementById('modal_no_measurements');
            measurementsContainer.innerHTML = '';
            if (props.measurements && props.measurements.length > 0) {
                noMeasurements.classList.add('d-none');
                props.measurements.forEach(m => {
                    const col = document.createElement('div');
                    col.className = 'col-6 d-flex justify-content-between border-bottom pb-1';
                    col.innerHTML = `<span class="text-muted fs-7">${m.label}:</span> <span class="fw-bold text-gray-800 fs-7">${m.value}</span>`;
                    measurementsContainer.appendChild(col);
                });
            } else {
                noMeasurements.classList.remove('d-none');
            }

            // Handle attributes
            const attributesContainer = document.getElementById('modal_attributes_container');
            const noAttributes = document.getElementById('modal_no_attributes');
            attributesContainer.innerHTML = '';
            if (props.attributes && props.attributes.length > 0) {
                noAttributes.classList.add('d-none');
                props.attributes.forEach(a => {
                    const col = document.createElement('div');
                    col.className = 'col-6 d-flex justify-content-between border-bottom pb-1';
                    col.innerHTML = `<span class="text-muted fs-7">${a.label}:</span> <span class="fw-bold text-gray-800 fs-7">${a.value}</span>`;
                    attributesContainer.appendChild(col);
                });
            } else {
                noAttributes.classList.remove('d-none');
            }

            // Reset collapse state to hidden
            const collapseEl = document.getElementById('modal_order_details_collapse');
            if (collapseEl.classList.contains('show')) {
                const bsCollapse = bootstrap.Collapse.getInstance(collapseEl) || new bootstrap.Collapse(collapseEl, { toggle: false });
                bsCollapse.hide();
            }

            // Show Modal
            const myModal = new bootstrap.Modal(document.getElementById('kt_calendar_modal'));
            myModal.show();
        }
    });

    calendar.render();
});
</script>
@endpush