 <div class="breadcrumb breadcrumb-list mb-0">
            <span class="primary-right-round"></span>
            <div class="container">
                <h1 class="text-white">Thank you</h1>
                <ul>
                    <li><a href="<?php echo base_url(); ?>">Home</a></li>
                    <li><a href="<?php echo base_url(); ?>booking/">Booking</a></li>
                    <li>Booking Success</li>
                </ul>
            </div>
        </div>
        <!-- /Breadcrumb -->
<?php  
$pitch = $this->db->select('*')->where('id', $booking_data[0]['pitch_id'])->get('pitches')->result_array();
?>
<div class="booksec">
    <div class="container">
        <div class="row">
            <div class="col-md-1"></div>
            <div class="col-md-10">
                <div class="thankyou-container">
                <div class="thankyou-box">
                    <div class="success-icon">&#10003;</div>
                    <h1>Thank You!</h1>
                    <p class="success-message">Your booking has been confirmed successfully.</p>

                    <div class="booking-details">
                        <h3>Booking Details</h3>
                        <ul>
                            <li><strong>Booking ID: </strong> #<?php echo $booking_data[0]['booking_no']; ?></li>
                            <li><strong>Pitch: </strong> <?php echo $pitch[0]['name']; ?></li>
                            <li><strong>Date: </strong> <?php echo $booking_data[0]['booking_date']; ?></li>
                            <li><strong>Time: </strong> <?= date('h:i A', strtotime($booking_data[0]['start_time'])) ?> - <?= date('h:i A', strtotime($booking_data[0]['end_time'])) ?></li>
                            <li><strong>Price Paid: </strong> ₹ <?php echo $booking_data[0]['total_price']; ?></li>
                        </ul>
                    </div>

                    <a href="<?php echo base_url(); ?>booking/history/" class="nav-link btn btn-secondary">View My Bookings</a>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>


<style type="text/css">
    .thankyou-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
    background-color: #f9f9f9;
}

.thankyou-box {
    background: #fff;
    max-width: 600px;
    width: 100%;
    padding: 40px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 12px;
}

.success-icon {
    font-size: 60px;
    color: #28a745;
    margin-bottom: 20px;
}

.thankyou-box h1 {
    font-size: 32px;
    margin-bottom: 10px;
    color: #333;
}

.success-message {
    font-size: 18px;
    color: #666;
    margin-bottom: 30px;
}

.booking-details {
    text-align: left;
    margin-bottom: 30px;
}

.booking-details h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #444;
}

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

.booking-details li {
    font-size: 16px;
    margin-bottom: 8px;
    color: #555;
}


</style>