@extends('layout')

@section('title')
    {{ __('Print Ticket') }}
@endsection
@section('content')
    <div class="dashboard_main-content">
        <div class="dashboard_main-header">
            <div class="dashboard_main-header_info">
                <h1 class="dashboard_main-title">{{ __('Ticket Details') }}</h1>
                <ul class="dashboard_main-breadcrumb">
                    <li><a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }}</a></li>
                    <li><a href="{{ route('order-items.index') }}">{{ __('Tickets') }}</a></li>
                    <li><a href="{{ route('item-order.scanner') }}">{{ __('Tickets Scanner') }}</a></li>
                    <li>{{ __('Print Ticket') }}</li>
                </ul>
            </div>
            <div class="dashboard_main-actions">
                <a href="{{ route('item-order.scanner') }}" class="dashboard_main-btn">
                    {{ __('Back to Scanner') }}
                    <img src="{{ asset('assets/images/icons/angle_right.svg') }}" alt="icon" class="svg" />
                </a>
            </div>
        </div>

        <div class="dashboard_main-body ticket-print-center">
            <div class="details-card card-shadow ticket-print-card" >
                <div class="details-card-header ticket-print-header" style="border-bottom:0 !important;">
                    <button type="button" class="download-pdf-btn dashboard_main-btn" id="download-pdf-btn" onclick="downloadTicketPDF()">
                        <i class="fas fa-download"></i>
                        {{ __('Download PDF') }}
                    </button>
                </div>
            </div>
        </div>
    <div id="pdf-loader-overlay" class="pdf-loader-overlay" style="display: none;" aria-hidden="true">
        <div class="pdf-loader-spinner"></div>
        <p class="pdf-loader-text">{{ __('Generating PDF...') }}</p>
    </div>
    <style>
        .pdf-loader-overlay {
            position: fixed;
            inset: 0;
            background: rgba(255, 255, 255, 0.85);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1rem;
        }
        .pdf-loader-spinner {
            width: 48px;
            height: 48px;
            border: 4px solid #e2e8f0;
            border-top-color: #1e293b;
            border-radius: 50%;
            animation: pdf-loader-spin 0.8s linear infinite;
        }
        .pdf-loader-text {
            margin: 0;
            font-size: 1rem;
            font-weight: 500;
            color: #475569;
        }
        @keyframes pdf-loader-spin {
            to { transform: rotate(360deg); }
        }
        .ticket-print-center {
            display: flex;
            align-items: center;
            justify-content: center;
            /*min-height: calc(100vh - 200px);*/
            padding: 2rem;
        }
        .ticket-print-card {
            max-width: 290px;
            width: 100%;
        }
        .ticket-print-header {
            justify-content: center;
            align-items: center;
            padding: 2rem;
        }
    </style>
    </div>

    <!-- hidden ticket PDF -->
    <div id="ticket-pdf-wrapper"
        style="position:fixed; top:-9999px; left:-9999px; width:400px; z-index:-1; opacity: 0 !important;">
        <div class="ticket-card" id="ticket-card-pdf">
            <!-- Header -->
            <div class="ticket-header">
                <div class="ticket-header-left">
                    <h3 class="ticket-title">{{ strtoupper($item->ticket_type_title ?? 'TICKET') }}</h3>
                    <span class="ticket-number">{{ __('Ticket Number #') }}{{ $item->id }}</span>
                </div>
                <div class="ticket-price">
                    {{ number_format($item->price, 2) }}
                    <span class="riyal-symbol">
                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1124.14 1256.39">
                            <path
                                d="M699.62,1113.02h0c-20.06,44.48-33.32,92.75-38.4,143.37l424.51-90.24c20.06-44.47,33.31-92.75,38.4-143.37l-424.51,90.24Z"
                                fill="currentColor" />
                            <path
                                d="M1085.73,895.8c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70.33v-135.2l292.27-62.11c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70.27V66.13c-50.67,28.45-95.67,66.32-132.25,110.99v403.35l-132.25,28.11V0c-50.67,28.44-95.67,66.32-132.25,110.99v525.69l-295.91,62.88c-20.06,44.47-33.33,92.75-38.42,143.37l334.33-71.05v170.26l-358.3,76.14c-20.06,44.47-33.32,92.75-38.4,143.37l375.04-79.7c30.53-6.35,56.77-24.4,73.83-49.24l68.78-101.97v-.02c7.14-10.55,11.3-23.27,11.3-36.97v-149.98l132.25-28.11v270.4l424.53-90.28Z"
                                fill="currentColor" />
                        </svg>
                    </span>
                </div>
            </div>

            <!-- Content -->
            <div class="ticket-content">
                <!-- Event Info -->
                <div class="event-info">
                    @if ($item->order && $item->order->event)
                        <p class="event-title">{{ $item->order->event->title ?? 'N/A' }}</p>
                        <p class="event-location">
                            <svg class="map-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round">
                                <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
                                <circle cx="12" cy="10" r="3" />
                            </svg>
                            {{ $item->order->event->location ?? 'N/A' }}
                        </p>
                    @endif
                </div>

                <!-- Ticket Details -->
                <div class="ticket-details">
                    <div class="details-column">
                        <div class="detail-item">
                            <p class="detail-label">{{ __('Name') }}</p>
                            <p class="detail-value">
                                @if ($item->order)
                                    {{ $item->order->first_name . ' ' . $item->order->last_name }}
                                @else
                                    N/A
                                @endif
                            </p>
                        </div>
                        <div class="detail-item">
                            <p class="detail-label">{{ __('Start Date') }}</p>
                            <p class="detail-value">
                                @if ($item->order && $item->order->event && $item->order->event->start_date)
                                    {{ \Carbon\Carbon::parse($item->order->event->start_date)->format('d M, Y') }}
                                @else
                                    N/A
                                @endif
                            </p>
                        </div>
                        <div class="detail-item">
                            <p class="detail-label">{{ __('Start Time') }}</p>
                            <p class="detail-value">
                                @if ($item->order && $item->order->event && $item->order->event->start_date)
                                    {{ \Carbon\Carbon::parse($item->order->event->start_date)->format('h:i A') }}
                                @else
                                    N/A
                                @endif
                            </p>
                        </div>
                    </div>
                    <div class="details-column">
                        <div class="detail-item">
                            <p class="detail-label">{{ __('Booking Code') }}</p>
                            <p class="detail-value">{{ $item->bar_code ?? 'N/A' }}</p>
                        </div>
                        <div class="detail-item">
                            <p class="detail-label">{{ __('End Date') }}</p>
                            <p class="detail-value">
                                @if ($item->order && $item->order->event && $item->order->event->end_date)
                                    {{ \Carbon\Carbon::parse($item->order->event->end_date)->format('d M, Y') }}
                                @else
                                    N/A
                                @endif
                            </p>
                        </div>
                        <div class="detail-item">
                            <p class="detail-label">{{ __('End Time') }}</p>
                            <p class="detail-value">
                                @if ($item->order && $item->order->event && $item->order->event->end_date)
                                    {{ \Carbon\Carbon::parse($item->order->event->end_date)->format('h:i A') }}
                                @else
                                    N/A
                                @endif
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Divider -->
            <div class="divider-container">
                <span class="divider-circle-left"></span>
                <span class="divider-line"></span>
                <span class="divider-circle-right"></span>
            </div>

            @if ($item->bar_code)
                <!-- Barcode Section -->
                <div class="barcode-section">
                    <svg class="barcode-container" id="pdf-barcode-container">
                        <!-- JBarcode renders here -->
                    </svg>
                    <p class="barcode-text">{{ __('Scan barcode at the entrance') }}</p>
                </div>
            @endif
        </div>
    </div>

    <style>
        .dashboard_main-content {
            padding: 2rem;
        }

        .details-card {
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            margin-top: 1rem;
        }

        .card-shadow {
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }

        .details-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem 2rem;
            border-bottom: 1px solid #eaeaea;
        }

        .details-title {
            font-size: 22px;
            font-weight: 600;
            margin: 0;
            color: #222;
        }

        .details-subtitle {
            font-size: 14px;
            color: #888;
        }

        .details-status {
            display: flex;
            align-items: center;
            gap: 6px;
            font-weight: 600;
            padding: 6px 12px;
            border-radius: 20px;
            text-transform: capitalize;
        }

        .details-status.paid {
            background: #d4f4dd;
            color: #2ecc71;
        }

        .details-status.pending {
            background: #fff5d6;
            color: #f0ad4e;
        }

        .details-status.unpaid {
            background: #fddede;
            color: #e63946;
        }

        /* === Full-width stacked layout === */
        .details-card-body.full-width-stack {
            display: flex;
            flex-direction: column;
            gap: 2rem;
            padding: 2rem;
        }

        .details-left,
        .details-right {
            width: 100%;
        }

        .details-right {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .details-section {
            width: 100%;
            background: #f9f9f9;
            border-radius: 10px;
            padding: 1rem 1.5rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .details-section h3 {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #333;
        }

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

        .details-list li {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #e0e0e0;
            font-size: 14px;
        }

        .status-pill {
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 13px;
            text-transform: capitalize;
            font-weight: 500;
        }

        .status-pill.paid {
            background: #d4f4dd;
            color: #2ecc71;
        }

        .status-pill.pending {
            background: #fff5d6;
            color: #f0ad4e;
        }

        .status-pill.unpaid {
            background: #fddede;
            color: #e63946;
        }

        .details-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .details-actions .inline-form {
            display: inline-block;
        }

        .dashboard_main-btn {
            padding: 8px 16px;
            border-radius: 6px;
            text-decoration: none;
            font-weight: 500;
        }

        .dashboard_main-btn.btn-primary {
            background: #2ecc71;
            color: #fff;
        }

        .dashboard_main-btn.btn-secondary {
            background: #6c757d;
            color: #fff;
        }

        .dashboard_main-btn.btn-danger {
            background: #e63946;
            color: #fff;
        }

        .barcode-box {
            background: #f4f6f8;
            padding: 2rem;
            border-radius: 10px;
            text-align: center;
            width: 100%;
        }

        .barcode-box h4 {
            font-size: 16px;
            margin-bottom: 10px;
            font-weight: 600;
        }

        .barcode-box p {
            font-family: monospace;
            font-size: 18px;
            letter-spacing: 2px;
            margin: 0 0 6px 0;
        }

        .ticket-img {
            width: 60%;
            display: block;
            margin: 0 auto;
        }
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.12.1/JsBarcode.all.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var barcode = "{{ $item->bar_code ?? '' }}";
            if (!barcode) return;

            var targets = ['#details-barcode-container', '#pdf-barcode-container'];
            var options = {
                width: 3,
                height: 70,
                displayValue: false,
                fontSize: 14,
                background: '#ffffff',
                lineColor: '#000'
            };

            targets.forEach(function (selector) {
                JsBarcode(selector).CODE128(barcode, options).render();
            });
        });

        async function downloadTicketPDF() {
            const overlay = document.getElementById('pdf-loader-overlay');
            const btn = document.getElementById('download-pdf-btn');
            if (overlay) overlay.style.display = 'flex';
            if (btn) { btn.disabled = true; }

            const { jsPDF } = window.jspdf;
            const ticketEl = document.getElementById('ticket-card-pdf');
            const wrapper = document.getElementById('ticket-pdf-wrapper');

            await new Promise(resolve => setTimeout(resolve, 150));

            try {
                const canvas = await html2canvas(ticketEl, {
                    scale: 2.5,
                    useCORS: true,
                    allowTaint: true,
                    backgroundColor: '#ffffff',
                    logging: false
                });

                const imgData = canvas.toDataURL('image/png');

                const cardWidthPx = ticketEl.offsetWidth;
                const cardHeightPx = ticketEl.offsetHeight;

                const pxToMm = 0.2646;
                const cardWidthMm = cardWidthPx * pxToMm;
                const cardHeightMm = cardHeightPx * pxToMm;

                const padding = 10;
                const pageWidth = cardWidthMm + padding * 2;
                const pageHeight = cardHeightMm + padding * 2;

                const pdf = new jsPDF({
                    orientation: pageHeight > pageWidth ? 'portrait' : 'landscape',
                    unit: 'mm',
                    format: [pageWidth, pageHeight]
                });

                pdf.addImage(imgData, 'PNG', padding, padding, cardWidthMm, cardHeightMm);

                var ticketId = "{{ $item->id }}";
                pdf.save('ticket-' + ticketId + '.pdf');

            } catch (err) {
                console.error('PDF generation failed:', err);
                alert('Failed to generate PDF. Please try again.');
            } finally {
                if (overlay) overlay.style.display = 'none';
                if (btn) btn.disabled = false;
                if (wrapper) {
                    wrapper.style.position = 'fixed';
                    wrapper.style.top = '-9999px';
                    wrapper.style.left = '-9999px';
                    wrapper.style.zIndex = '-1';
                }
            }
        }
    </script>
@endsection