@extends('web.layout')

@push('css')
    <style>
        .responsive-table {
            width: 100%;
            overflow: hidden;
        }

        .responsive-table table {
            width: 100%;
            border-collapse: collapse;
        }

        .responsive-table td {
            padding: 10px 6px;
            vertical-align: top;
            font-size: 15px;
            border: none !important; /* override theme */
        }

        /* =============================
            MOBILE FIX (PENTING BANGET)
           =============================*/
        @media (max-width: 576px) {

            .responsive-table table tbody tr {
                display: grid !important;     /* PAKSA 1 KOLOM */
                grid-template-columns: 1fr;   /* 1 kolom */
                margin-bottom: 12px;
                padding: 10px 0;
                border-bottom: 1px solid #eaeaea !important;
            }

            .responsive-table table tbody tr td {
                text-align: left !important;  /* hindari text-right bawaan theme */
                padding: 4px 2px;
            }

            .responsive-table table tbody tr td strong {
                display: block;
                margin-bottom: 3px;
                font-weight: 600;
            }
        }
    </style>
@endpush


@section('content')
    <main id="content" class="site-main">
        <section class="booking-inner-page">
            <!-- ***Inner Banner html start form here*** -->
            <div class="inner-banner-wrap">
                <div class="inner-baner-container"
                     style="background-image: url( {{ url('landing/assets/images/img7a.jpg') }});">
                    <div class="container">
                        <div class="inner-banner-content">
                            <h1 class="page-title">Cek Kode Booking</h1>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ***Inner Banner html end here*** -->
            <div class="booking-section">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="price-table-summary">
                                <h4 class="bg-title">Data Tiket</h4>
                                <div class="responsive-table">
                                    <table>
                                        <tbody>
                                        <tr>
                                            <td><strong>Kode Booking :</strong></td>
                                            <td class="text-right">{{ $data->kode_booking }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>tanggal berangkat :</strong></td>
                                            <td class="text-right">{{ $data->tanggal }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Ketua Rombongan :</strong></td>
                                            <td class="text-right">{{ $data->nama }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Jumlah WNI :</strong></td>
                                            <td class="text-right">{{ $data->wni }} orang</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Jumlah WNA :</strong></td>
                                            <td class="text-right">{{ $data->wna }} orang</td>
                                        </tr>
                                        <tr>
                                            <td><strong>No. telp :</strong></td>
                                            <td class="text-right">{{ $data->whatsapp }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Email :</strong></td>
                                            <td class="text-right">{{ $data->email }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Status :</strong></td>
                                            <td class="text-right"><b>{{ ucwords($data->status) }}</b></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection