@extends('layout')

@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>{{ __('Ticket Details') }}</li>
                </ul>
            </div>
            <div class="dashboard_main-actions">
                @can('order_items.edit')
                    <a href="{{ route('order-items.edit', $item->id) }}" class="dashboard_main-btn">
                                {{ __('Edit') }}
                        <img src="{{ asset('assets/images/icons/angle_right.svg') }}" alt="icon" class="svg" />
                    </a>
                @endcan
                <a href="{{ route('order-items.index') }}" class="dashboard_main-btn">
                        {{ __('Back to List') }}
                    <img src="{{ asset('assets/images/icons/angle_right.svg') }}" alt="icon" class="svg" />
                </a>
            </div>
        </div>

        <div class="dashboard_main-body">
            <div class="details-card card-shadow">
                <div class="details-card-header">
                    <div>
                        <h2 class="details-title">{{ $item->ticket_type_title }}</h2>
                        <span class="details-subtitle">{{ __('Created at') }} {{ $item->created_at->format('d M, Y') }}</span>
                    </div>
                    <button type="button" class="download-pdf-btn dashboard_main-btn" onclick="downloadTicketPDF()">
                        <i class="fas fa-download"></i>
                            {{ __('Download PDF') }}
                    </button>
                </div>

                <div class="details-card-body full-width-stack">
                    <!-- Barcode / Ticket Image -->
                    <div class="details-left">
                        @if ($item->bar_code)
                            <div class="barcode-box">
                                <h4>{{ __('Barcode') }}</h4>
                                <div style="display: flex; justify-content: center;">
                                    <svg class="barcode-container" id="details-barcode-container">
                                    </svg>
                                </div>
                                <!-- <p>{{ $item->bar_code }}</p> -->
                                <small>{{ __('Scan this at the event') }}</small>
                            </div>
                        @else
                            <img src="{{ asset('assets/images/media.png') }}" alt="ticket" class="ticket-img" />
                        @endif
                    </div>

                    <!-- All sections stacked full width -->
                    <div class="details-right">
                        <div class="details-section">
                            <h3>{{ __('Ticket Info') }}</h3>
                            <ul class="details-list">
                                <li><span>{{ __('ID') }}:</span> <span>#{{ $item->id }}</span></li>
                                <li><span>{{ __('Order ID') }}:</span> <span>#{{ $item->order_id }}</span></li>
                                <li><span>{{ __('Ticket Type') }}:</span> <span>{{ $item->ticket_type_title ?? 'N/A' }}</span></li>
                                <li><span>{{ __('Price') }}:</span> <span>${{ number_format($item->price, 2) }}</span></li>
                                <li><span>{{ __('Payment Status:') }}</span>
                                    <span class="status-pill {{ $item->payment_status }}">
                                        {{ ucfirst($item->payment_status ?? 'N/A') }}
                                    </span>
                                </li>
                            </ul>
                        </div>

                        @if ($item->order && $item->order->event)
                            <div class="details-section">
                                <h3>{{ __('Event Information') }}</h3>
                                <ul class="details-list">
                                    <li><span>{{ __('Title:') }}</span> <span>{{ $item->order->event->title ?? 'N/A' }}</span></li>
                                    <li><span>{{ __('Start:') }}</span>
                                        <span>{{ $item->order->event->start_date ? \Carbon\Carbon::parse($item->order->event->start_date)->format('M d, Y H:i') : 'N/A' }}</span>
                                    </li>
                                    <li><span>{{ __('End:') }}</span>
                                        <span>{{ $item->order->event->end_date ? \Carbon\Carbon::parse($item->order->event->end_date)->format('M d, Y H:i') : 'N/A' }}</span>
                                    </li>
                                    <li><span>{{ __('Location:') }}</span> <span>{{ $item->order->event->location ?? 'N/A' }}</span>
                                    </li>
                                </ul>
                            </div>
                        @endif

                        <div class="details-section">
                            <h3>{{ __('Check-in & Check-out') }}</h3>
                            <ul class="details-list">
                                <li><span>{{ __('Check-in:') }}</span>
                                    <span>{{ $item->check_in_date ? \Carbon\Carbon::parse($item->check_in_date)->format('M d, Y H:i') : __('Not checked in') }}</span>
                                </li>
                                <li><span>{{ __('Check-out:') }}</span>
                                    <span>{{ $item->check_out_date ? \Carbon\Carbon::parse($item->check_out_date)->format('M d, Y H:i') : __('Not checked out') }}</span>
                                </li>
                            </ul>
                        </div>

                        @if ($item->order)
                            <div class="details-section">
                                <h3>{{ __('Order Information') }}</h3>
                                <ul class="details-list">
                                    <li><span>{{ __('Number:') }}</span> <span>#{{ $item->order->id ?? 'N/A' }}</span></li>
                                    <li><span>{{ __('Customer:') }}</span>
                                        <span>{{ $item->order->first_name . ' ' . $item->order->last_name ?? 'N/A' }}</span>
                                    </li>
                                    <li><span>{{ __('Email:') }}</span> <span><a
                                                href="mailto:{{ $item->order->email ?? '#' }}">{{ $item->order->email ?? 'N/A' }}</a></span>
                                    </li>
                                    <li><span>{{ __('Order Date:') }}</span>
                                        <span>{{ $item->order->created_at ? \Carbon\Carbon::parse($item->order->created_at)->format('M d, Y H:i') : 'N/A' }}</span>
                                    </li>
                                </ul>
                            </div>
                        @endif

                        {{-- <div class="details-section">
                            <h3>Timestamps</h3>
                            <ul class="details-list">
                                <li><span>Created At:</span> <span>{{ $item->created_at->format('M d, Y H:i:s') }}</span>
                                </li>
                                <li><span>Last Updated:</span> <span>{{ $item->updated_at->format('M d, Y H:i:s') }}</span>
                                </li>
                            </ul>
                        </div> --}}

                        {{-- <div class="details-actions">
                            @can('order_items.edit')
                            <a href="{{ route('order-items.edit', $item->id) }}"
                                class="dashboard_main-btn btn-primary">Edit</a>
                            @endcan
                            @can('order_items.destroy')
                            <form action="{{ route('order-items.destroy', $item->id) }}" method="POST" class="inline-form">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="dashboard_main-btn btn-danger"
                                    onclick="return confirm('Are you sure you want to delete this Ticket?')">Delete</button>
                            </form>
                            @endcan
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>
    </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 { 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 {
                wrapper.style.position = 'fixed';
                wrapper.style.top = '-9999px';
                wrapper.style.left = '-9999px';
                wrapper.style.zIndex = '-1';
            }
        }
    </script>
@endsection