@extends('layout')
@push('styles')
    <style>
        /* make this section full width */
        .booking_full_width {
            display: block !important;
            width: 100% !important;
            max-width: 100% !important;
        }
    </style>
@endpush
@section('content')
    <div class="dashboard_main-content">
        <div class="dashboard_main-header">
            <div class="dashboard_main-header_info">
                <h1 class="dashboard_main-title">{{ __('Booking Details') }}</h1>
                <ul class="dashboard_main-breadcrumb">
                    <li><a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }}</a></li>
                    <li><a href="{{ route('bookings.index') }}">{{ __('Booking') }}</a></li>
                    <li><a href="#">{{ __('Booking Details') }}</a></li>
                </ul>
            </div>
        </div>

        <div class="dashboard_main-body">
            <div class="booking_details-card_body">
                <div class="booking_details-card_head">
                    <div class="booking_details-card_head_info">
                        <h3 class="booking_details-card_title">{{ __('Booking Amount') }}</h3>
                        <strong class="booking_details-card_price">
                            {{ $ticketCurrency }}{{ number_format($order->total, 2) }}
                        </strong>
                    </div>
                    <div class="booking_details-card_head_data">
                        <p class="booking_details-card_id">
                            <span class="title">{{ __('ID') }}</span>
                            <span class="value"> {{ $order->id }} </span>
                            <button class="copy-btn" type="button"
                                onclick="navigator.clipboard.writeText('{{ $order->id }}')">
                                <img src="{{ asset('assets/images/icons/copy.svg') }}" alt="icon" class="svg" />
                            </button>
                        </p>
                        <div class="booking_details-card_statuses">

                            <span class="booking_details-card_status {{ strtolower($order->payment_status) }}">
                                {{ __($order->payment_status) }}
                            </span>
                            <span class="booking_details-card_status {{ strtolower($order->order_status) }}">
                                {{ __($order->order_status) }}
                            </span>
                        </div>
                    </div>
                </div>

                <div class="booking_details-card_content">
                    <div class="booking_event-details">
                        <h3 class="booking_event-name">{{ $order->event->title ?? __('Event Name') }}</h3>
                        <ul class="booking_event-features">
                            <li>
                                <span>{{ $order->event->type ?? __('Event Type') }}</span>
                                <span>{{ $order->event->category ?? __('Event Category') }}</span>
                            </li>
                            <li>
                                <span>
                                    <i class="icon">
                                        <img src="{{ asset('assets/images/icons/calendar.svg') }}" alt="icon" class="svg" />
                                    </i>
                                    {{ optional($order->event)->start_date?->format('d M, Y') ?? __('Start Date') }}
                                </span>
                                <span>{{ optional($order->event)->end_date?->format('d M, Y') ?? __('End Date') }}</span>
                            </li>
                            <li>
                                <span>
                                    <i class="icon">
                                        <img src="{{ asset('assets/images/icons/location.svg') }}" alt="icon" class="svg" />
                                    </i>
                                    {{ $order->event->location ?? __('Location') }}
                                </span>
                                <span>{{ $order->event->address ?? __('Address details goes here') }}</span>
                            </li>
                        </ul>
                    </div>

                    <div class="booking_atendee-details">
                        <h4 class="booking_details-title">{{ __('Attendee Details') }}</h4>
                        <div class="booking_atendee-details-user">
                            <span class="user-img">
                                <img loading="lazy" src="{{ asset('assets/images/user.jpg') }}" alt="user image"
                                    class="img-cover" />
                            </span>
                            <div class="user-info">
                                <strong>{{ $order->first_name }} {{ $order->last_name }}</strong>
                                <span>{{ $order->position ?? '-' }}</span>
                            </div>
                        </div>
                        <div class="booking_atendee-details-contacts">
                            <a href="tel:{{ $order->phone }}">
                                <i class="icon">
                                    <img src="{{ asset('assets/images/icons/telephone.svg') }}" alt="icon" class="svg" />
                                </i>
                                {{ $order->phone }}
                            </a>
                            <a href="mailto:{{ $order->email }}">
                                <i class="icon">
                                    <img src="{{ asset('assets/images/icons/email.svg') }}" alt="icon" class="svg" />
                                </i>
                                {{ $order->email }}
                            </a>
                            <span>
                                <i class="icon">
                                    <img src="{{ asset('assets/images/icons/card.svg') }}" alt="icon" class="svg" />
                                </i>
                                {{ $order->payment_method }} ---- {{ substr($order->card_number, -4) }}
                            </span>
                        </div>
                    </div>
                </div>



                {{-- questions and answers section --}}
                <div class="booking_details-card_content booking_full_width" style="margin-top:20px;">
                    <div class="booking_questions-details">
                        <h4 class="booking_details-title" style="margin-bottom:15px;">
                            {{ __('Questions & Answers') }}
                        </h4>

                        <ul class="booking_questions-list" style="list-style:none;padding:0;margin:0;">
                            @forelse ($order->answers as $index => $answer)
                                @php
                                    $answerData = json_decode($answer->answer, true);
                                @endphp

                                <li style="
                                            background:#ffffff;
                                            border:1px solid #e5e7eb;
                                            border-radius:12px;
                                            padding:18px 20px;
                                            margin-bottom:15px;
                                            box-shadow:0 2px 6px rgba(0,0,0,0.05);
                                        ">

                                    {{-- Question number --}}
                                    <div style="
                                                font-size:13px;
                                                font-weight:bold;
                                                color:#9ca3af;
                                                margin-bottom:10px;
                                            ">
                                        {{ __('Question #') }}{{ $index + 1 }}
                                    </div>

                                    {{-- Question --}}
                                    <div style="margin-bottom:15px;">
                                        <div style="
                                                    font-size:12px;
                                                    font-weight:600;
                                                    text-transform:uppercase;
                                                    color:#3b82f6;
                                                    margin-bottom:5px;
                                                    letter-spacing:0.5px;
                                                ">
                                            {{ __('Question') }}
                                        </div>

                                        <div style="
                                                    background:#f9fafb;
                                                    padding:10px 12px;
                                                    border-radius:8px;
                                                    border:1px solid #f1f1f1;
                                                    font-size:15px;
                                                    color:#374151;
                                                    line-height:1.6;
                                                ">
                                            {{ $answer->question?->question ?? '-' }}
                                        </div>
                                    </div>

                                    {{-- Answer --}}
                                    <div>
                                        <div style="
                                                    font-size:12px;
                                                    font-weight:600;
                                                    text-transform:uppercase;
                                                    color:#10b981;
                                                    margin-bottom:5px;
                                                    letter-spacing:0.5px;
                                                ">
                                            {{ __('Answer') }}
                                        </div>

                                        <div style="
                                                    background:#f9fafb;
                                                    padding:10px 12px;
                                                    border-radius:8px;
                                                    border:1px solid #f1f1f1;
                                                    font-size:15px;
                                                    color:#374151;
                                                    line-height:1.6;
                                                ">
                                            @if (isset($answerData['text']))
                                                {{ $answerData['text'] }}
                                            @else
                                                -
                                            @endif
                                        </div>
                                    </div>

                                </li>

                            @empty
                                <li style="
                                            padding:15px;
                                            text-align:center;
                                            color:#9ca3af;
                                            font-style:italic;
                                        ">
                                    {{ __('No questions answered for this booking.') }}
                                </li>
                            @endforelse
                        </ul>
                    </div>
                </div>




                {{-- ticket details section --}}
                <div class="booking_details-card_content">
                    <div class="booking_tickets-details">
                        <h4 class="booking_details-title">{{ __('Tickets Details') }}</h4>
                        <ul class="booking_tickets-list">
                            @foreach ($tickets as $ticket)
                                <li>
                                    <div>
                                        <span>{{ __('Ticket Type') }}</span>
                                        <strong>{{ $ticket['ticket_type_title'] }}</strong>
                                    </div>
                                    <div>
                                        <span>{{ __('Count') }}</span>
                                        <strong>{{ $ticket['quantity'] }}</strong>
                                    </div>
                                    <div>
                                        <span>{{ __('Amount') }}</span>
                                        <strong>{{ $ticketCurrency }}{{ number_format($ticket['line_total'], 2) }}</strong>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>

                    <div class="booking_payment-details">
                        <div class="booking_payment-details-head">
                            <h4 class="booking_details-title">{{ __('Payment Summary') }}</h4>
                            {{-- <a href="#!" class="download-invoice" download>
                                Invoice
                                <i class="icon">
                                    <img src="{{ asset('assets/images/icons/download.svg') }}" alt="icon" class="svg" />
                                </i>
                            </a> --}}
                        </div>
                        <div class="booking_payment-details-list">


                            @foreach ($tickets as $ticket)
                                <div>
                                    <span>{{ $ticket['ticket_type_title'] }}</span>
                                    <strong>
                                        {{ $ticket['quantity'] }} ×
                                        {{ $ticketCurrency }}{{ number_format($ticket['price'], 2) }}
                                    </strong>
                                </div>
                            @endforeach
                            <div>
                                <span>{{ __('Subtotal') }}</span><strong>{{ $ticketCurrency }}{{ number_format($order->sub_total, 2) }}</strong>
                            </div>

                            <hr />
                            <div>
                                <span>{{ __('Fees') }}</span><strong>{{ $ticketCurrency }}{{ number_format($order->fees, 2) }}</strong>
                            </div>
                            <div>
                                <span>{{ __('Tax') }}</span><strong>{{ $ticketCurrency }}{{ number_format($order->tax, 2) }}</strong>
                            </div>
                            <div>
                                <span>{{ __('Discount') }}</span><strong>{{ $ticketCurrency }}{{ number_format($order->discount, 2) }}</strong>
                            </div>
                            <hr />
                            <div>
                                <span>{{ __('Total Amount') }}</span><strong>{{ $ticketCurrency }}{{ number_format($order->total, 2) }}</strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Scripts --}}
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script>
    <script src="{{ asset('assets/js/svg.js') }}"></script>
    <script src="{{ asset('assets/js/main.js') }}"></script>
@endsection