@extends('layouts.app')

@section('title', 'View Booking')

@section('content')
    {{-- Breadcrumb --}}
    <nav class="mb-6">
        <ol class="flex items-center space-x-2 text-sm text-gray-600">
            <li><a href="{{ url('dashboard') }}" class="hover:text-blue-600">Dashboard</a></li>
            <li>
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
            </li>
            <li><a href="{{ route('bookings.index') }}" class="hover:text-blue-600">Bookings</a></li>
            <li>
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
            </li>
            <li class="text-gray-900">View Booking</li>
        </ol>
    </nav>

    {{-- Booking & Member Info Card --}}
    <div class="bg-white p-6 rounded-lg shadow mb-6">
        <h3 class="text-xl font-bold mb-4 text-gray-800">Booking Information</h3>

        {{-- Member Information --}}
        @if($booking->user->member)
            <div class="mb-6">
                <h4 class="font-semibold text-gray-700 mb-3">Member Information</h4>
                <div class="flex items-center space-x-4">
                    {{-- Member Image --}}
                    <div>
                        @if($booking->user->member->image)
                            <img src="{{ asset('public/' . $booking->user->member->image) }}" 
                                 alt="Member Image" 
                                 class="w-24 h-24 object-cover rounded-full border border-gray-200">
                        @else
                            <div class="w-24 h-24 bg-gray-200 rounded-full flex items-center justify-center text-gray-400">
                                No Image
                            </div>
                        @endif
                    </div>

                    {{-- Member Details --}}
                    <div class="space-y-1 text-gray-700">
                        <p><strong>Full Name:</strong> {{ $booking->user->member->full_name ?? '-' }}</p>
                        <p><strong>Mobile:</strong> {{ $booking->user->member->mobile_no ?? '-' }}</p>
                        <p><strong>Email:</strong> {{ $booking->user->member->email ?? '-' }}</p>
                        <p><strong>Zone/District:</strong> {{ $booking->user->member->zone_district_country ?? '-' }}</p>
                        <p><strong>Blood Group:</strong> {{ $booking->user->member->blood_group ?? '-' }}</p>
                        <p><strong>T-Shirt Size:</strong> {{ $booking->user->member->tshirt_size ?? '-' }}</p>
                    </div>
                </div>
            </div>
        @endif

        {{-- User & Event --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div>
                <h4 class="font-semibold text-gray-700 mb-2">User Information</h4>
                <p><strong>Name:</strong> {{ $booking->user->full_name ?? '-' }}</p>
                <p><strong>Email:</strong> {{ $booking->user->email ?? '-' }}</p>
                <p><strong>Phone:</strong> {{ $booking->user->phone ?? '-' }}</p>
            </div>
            <div>
                <h4 class="font-semibold text-gray-700 mb-2">Event Information</h4>
                <p><strong>Title:</strong> {{ $booking->event->title ?? '-' }}</p>
                <p><strong>Date:</strong> {{ \Carbon\Carbon::parse($booking->event->event_date)->format('d M Y, h:i A') ?? '-' }}</p>
                <p><strong>Location:</strong> {{ $booking->event->location ?? '-' }}</p>
            </div>
        </div>

        {{-- Booking & Payment Details --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div>
                <h4 class="font-semibold text-gray-700 mb-2">Booking Details</h4>
                <p><strong>Booking ID:</strong> {{ $booking->booking_id }}</p>
                <p><strong>Booking Date:</strong> {{ \Carbon\Carbon::parse($booking->booking_date)->format('d M Y, h:i A') }}</p>
                <p><strong>Status:</strong>
                    <span class="px-2 py-1 rounded text-white {{ $booking->status == 'active' ? 'bg-green-500' : 'bg-gray-500' }}">
                        {{ ucfirst($booking->status) }}
                    </span>
                </p>
            </div>
            <div>
                <h4 class="font-semibold text-gray-700 mb-2">Payment Details</h4>
                <p><strong>Account Number:</strong> {{ $booking->account_num }} <span class="px-2 py-1 rounded text-white bg-red-500">{{$booking->account_type}}</span></p>
                <p>
                    <strong>Transaction ID :</strong>
                    <span class="px-2 py-1 rounded text-uppercase text-orange-500 font-bold">
                        {{$booking->bank_tran_id}}
                    </span>
                </p>
                <p><strong>Total Amount:</strong> {{ number_format($booking->total_amount, 2) }} Tk</p>
                <p><strong>Payment Status:</strong>
                    <span class="px-2 py-1 rounded text-white {{ $booking->payment_status == 'paid' ? 'bg-green-500' : 'bg-yellow-500' }}">
                        {{ ucfirst($booking->payment_status) }}
                    </span>
                </p>
            </div>
        </div>

        {{-- Tickets & Attachments --}}
        <div class="mb-6">
            <h4 class="font-semibold text-gray-700 mb-2">Tickets & Attachments</h4>
            <div class="overflow-x-auto">
                <table class="min-w-full border border-gray-200 rounded-lg">
                    <thead class="bg-gray-100">
                    <tr>
                        <th class="px-4 py-2 text-left border-b">Ticket Name</th>
                        <th class="px-4 py-2 text-left border-b">Quantity</th>
                        <th class="px-4 py-2 text-left border-b">Price</th>
                        {{--<th class="px-4 py-2 text-left border-b">Attachment</th>--}}
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($booking->bookingDetails as $detail)
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-2 border-b">{{ $detail->ticket->ticket_type ?? '-' }}</td>
                            <td class="px-4 py-2 border-b">{{ $detail->quantity }}</td>
                            <td class="px-4 py-2 border-b">{{ number_format($detail->ticket->price, 2) }} Tk</td>
                            {{--<td class="px-4 py-2 border-b">
                                @if(!empty($detail->ticket->file_url))
                                    <a href="{{ $detail->ticket->file_url }}" target="_blank" class="text-blue-600 hover:underline">View</a>
                                @else
                                    -
                                @endif
                            </td>--}}
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Admin Attachments --}}
        @if($booking->attachments && $booking->attachments->count())
            <div class="mb-6">
                <h4 class="font-semibold text-gray-700 mb-2">Additional Attachments</h4>
                <ul class="list-disc list-inside text-gray-700">
                    @foreach($booking->attachments as $attachment)
                        <li>
                            <a href="{{ asset('public/' . $attachment->file_path) }}" target="_blank" class="text-blue-600 hover:underline">
                                {{ $attachment->file_name }}
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
        @endif


        {{-- Back Button --}}
        <div class="text-right">
            <a href="{{ route('bookings.index') }}" class="inline-block px-4 py-2 bg-indigo-500 text-white rounded hover:bg-indigo-600 transition">
                Back to Bookings
            </a>
        </div>
    </div>
@endsection