1#@!#!123s

��JFIF�� 1#@!#!123s
: / var / www / html / projects / andamanshells / resources / views /
Filename : single_boat.blade.php
back
@extends('layouts.front.master')
@section('title'){{ $boat->title }}@stop
@section('description'){{ $boat->mdesc }}@stop
@section('keywords'){{ $boat->mkeys }}@stop
@section('icon'){{ $boat->icon }}@stop
@section('brcm'){{ url($boat->bimg) }}@stop
@section('content')
@include('layouts.front.breadcrumb')
<style>
    table {
        border: 2px solid !important;
        border-radius: 10px !important;
    }
    th, tr, td {
        border: 1px solid !important;
    }
    .loading-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        text-align: center;
        color: #fff;
        font-size: 1.5em;
        padding-top: 20%;
    }
</style>
<section class="trending pt-6 pb-0 bg-lgrey">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <div class="single-content">
                    <div id="highlight">
                        <div class="single-full-title border-b mb-2 pb-2">
                            <div class="single-title">
                                <h2 class="mb-1">{{ $boat->title }}</h2>
                            </div>
                        </div>
                        <div class="description-images mb-4">
                            <img src="{{ asset($boat->fimg) }}" alt="{{ $boat->title }}" class="w-100 rounded">
                            <a href="#bb" class="nir-btn mt-4">Click Here To Book {{ $boat->title }} Ticket</a>
                        </div>
                        <div class="description mb-2">
                            <h4>Description</h4>
                            {!! $boat->description !!}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-12">
                <div class="sidebar-sticky">
                    <div class="list-sidebar">
                        <div class="sidebar-item mb-4">
                            <h4 class="">Other Trips</h4>
                            <ul class="sidebar-category">
                                @php
                                    $boats = \App\Models\Ofb::where('id','!=',$boat->id)->get();
                                @endphp
                                @if($boats->count() > 0)
                                    @foreach ($boats as $act)
                                        <li><a href="{{ url('boat', $act->slug) }}">{{ $act->title }}</a></li>
                                    @endforeach
                                @else
                                    No other trips available right now
                                @endif
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mt-4" style="background: #ebc696;padding: 20px;border-radius: 15px;" id="bb">
            <form action="" method="POST" id="tripBookingForm" class="mt-4">
                @csrf
                <input type="hidden" name="boat_id" value="{{ $boat->id }}">
                <div class="mb-3">
                    <h4>Book Your Tickets For {{ $boat->title }}</h4>
                    <div class="row">
                        <div class="col-lg-4 mb-4">
                            <label style="color: #000">From</label>
                            <select name="trip_id" id="trip_id" required>
                                @foreach ($boat->trips as $trip)
                                    <option value="{{ $trip->id }}" data-adult-price="{{ $trip->adultp }}" data-infant-price="{{ $trip->infantp }}" data-discount="{{ $trip->discount }}">
                                        {{ $trip->title.' - ₹'.$trip->adultp.'/- (Adult) / ₹'.$trip->infantp.'/- (Infant)' }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-2 mb-4">
                            <label style="color: #000">Travel Date</label>
                            <input type="date" name="date" id="travel_date" placeholder="Enter travel date" required>
                        </div>
                        <div class="col-lg-2 mb-4">
                            <label style="color: #000">No. of Adults</label>
                            <input type="number" name="adults" id="adults" placeholder="Enter No. of Adults" required>
                        </div>
                        <div class="col-lg-2 mb-4">
                            <label style="color: #000">No. of Infants</label>
                            <input type="number" name="infants" id="infants" placeholder="Enter No. of Infants">
                        </div>
                        <div class="col-lg-2 mb-4">
                            <button type="button" id="showPassengerDetails" class="nir-btn-black mt-4">Next</button>
                        </div>
                    </div>
                </div>
                <div id="passengerDetails" style="display: none;">
                    <h4>Passenger Details</h4>
                    <h5>Adult Passengers</h5>
                    <div class="table-responsive">
                        <table class="table table-bordered table-light rounded text-dark">
                            <thead>
                                <th>SNo</th>
                                <th>Title*</th>
                                <th>Name*</th>
                                <th>Gender*</th>
                                <th>Age*</th>
                                <th>Nationality*</th>
                                <th>ID Number</th>
                            </thead>
                            <tbody id="adultDetails">
                            </tbody>
                        </table>
                    </div>
                    <h5>Infant Passengers</h5>
                    <div class="table-responsive">
                        <table class="table table-responsive table-bordered table-light rounded text-dark">
                            <thead>
                                <th>SNo</th>
                                <th>Title*</th>
                                <th>Name*</th>
                                <th>Gender*</th>
                                <th>Date of Birth*</th>
                            </thead>
                            <tbody id="infantDetails">
                            </tbody>
                        </table>
                    </div>
                    <div class="mb-3">
                        <button type="button" id="proceedToConfirm" class="nir-btn-black mt-4">Next</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>
<!-- Confirm Details Modal -->
<div id="confirmDetailsModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm Booking Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <div style="background: #f0f0f0; padding:15px; margin-bottom:20px; color:black;border-radius:15px;font-size: 12px!important;">
                            <h6><strong><span id="confirm_trip_title"></span></strong></h6>
                            <p><strong>Travel Date:</strong> <span id="confirm_trip_date"></span></p>
                        </div>
                        <div style="background: #f0f0f0; padding:15px; color:black;border-radius:15px;font-size: 12px!important;">
                            <strong>No. of Persons</strong>
                            <p><strong><i class="fa-duotone fa-circle-check text-success"></i> No. of Adults:</strong> <span id="confirm_adults"></span></p>
                            <p><strong><i class="fa-duotone fa-circle-check text-success"></i> No. of Infants:</strong> <span id="confirm_infants"></span></p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h6>Booking Information:</h6>
                        <form id="bookingInfoForm">
                            <div class="form-group">
                                <label for="name">Name</label>
                                <input type="text" name="name" id="name" class="form-control" required>
                            </div>
                            <div class="form-group">
                                <label for="email">Email</label>
                                <input type="email" name="email" id="email" class="form-control" required>
                            </div>
                            <div class="form-group">
                                <label for="mobile">Mobile Number</label>
                                <input type="text" name="mobile" id="mobile" class="form-control" pattern="[0-9]{10}" inputmode="numeric" maxlength="10" minlength="10" oninput="this.value = this.value.replace(/[^0-9]/g, '');" required>
                            </div>
                            <div class="form-group">
                                <label for="gstin">GSTIN (Optional)</label>
                                <input type="text" name="gstin" id="gstin" class="form-control">
                            </div>
                            <input type="hidden" name="booking_trip_date" id="booking_trip_date">
                            <input type="hidden" name="booking_final_price" id="booking_final_price">
                            <button type="submit" class="btn btn-primary mt-2">Send OTP</button>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="backButton1">Back</button>
            </div>
        </div>
    </div>
</div>
<!-- OTP Verification Modal -->
<div id="otpModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <form id="otpForm">
                <div class="modal-header">
                    <h5 class="modal-title">Verify OTP</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="otp">Enter OTP</label>
                        <input type="text" name="otp" id="otp" class="form-control mb-4" required>
                    </div>
                    <h6><center><span id="otp_trip_title"></span></center></h6>
                    <div class="row">
                        <div class="col-md-6">
                            <p><strong>Price Break-up:</strong></p>
                            <div id="otp_price_breakdown"></div>
                        </div>
                        <div class="col-md-6">
                            <p><strong>Trip Date:</strong> <span id="otp_trip_date_text"></span></p>
                            <p><strong>No. of Adults:</strong> <span id="otp_adults_text"></span></p>
                            <p><strong>No. of Infants:</strong> <span id="otp_infants_text"></span></p>
                            <p><strong>Pay (Including 18% Service Tax):</strong> ₹<span id="otp_final_price_text"></span>/-</p>
                            <input type="hidden" name="trip_id" id="otp_trip_id">
                            <input type="hidden" name="trip_date" id="otp_trip_date">
                            <input type="hidden" name="adults" id="otp_adults">
                            <input type="hidden" name="infants" id="otp_infants">
                            <input type="hidden" name="final_price" id="otp_final_price_input">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" id="backButton2">Back</button>
                    <button type="submit" class="btn btn-primary">Verify OTP</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Payment Modal -->
<div id="paymentModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Review & Pay</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Free Cancellation before 24 hours. Due to bad weather or Govt. restriction.</p>
                <div class="row mb-3">
                    <div class="col-md-3"><img src="{{ asset('aato.jpeg') }}" alt="Andaman Shells" style="height: 80px;width:auto;" /></div>
                    <div class="col-md-3"><img src="{{ asset('acci.jpg') }}" alt="Andaman Shells" style="height: 80px;width:auto;" /></div>
                    <div class="col-md-3"><img src="{{ asset('ministry-tourism.jpg') }}" alt="Andaman Shells" style="height: 80px;width:auto;" /></div>
                    <div class="col-md-3"><img src="{{ asset('tourismlogo1.png') }}" alt="Andaman Shells" style="height: 80px;width:auto;" /></div>
                </div>
                <div>
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Price Break-up:</h6>
                            <div id="payment_price_breakdown"></div>
                            <p><strong>Net Payable (Including 10% service Charges):</strong> ₹<span id="payment_final_price_text"></span></p>
                        </div>
                        <div class="col-md-6">
                            <h6>Booking Details:</h6>
                            <p><strong>Trip Date:</strong> <span id="payment_trip_date"></span></p>
                            <p><strong>No. of Adults:</strong> <span id="payment_adults"></span></p>
                            <p><strong>No. of Infants:</strong> <span id="payment_infants"></span></p>
                            <p><strong>Name:</strong> <span id="payment_name"></span></p>
                            <p><strong>Email:</strong> <span id="payment_email"></span></p>
                            <p><strong>Mobile:</strong> <span id="payment_mobile"></span></p>
                            <p><strong>GSTIN:</strong> <span id="payment_gstin"></span></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="backButton3">Back</button>
                <button type="button" class="btn btn-primary" id="payButton">Proceed To Pay</button>
            </div>
        </div>
    </div>
</div>
<!-- Loading Overlay -->
<div class="loading-overlay" id="loadingOverlay">
    <div id="loadingMessage"></div>
</div>
@stop
@section('scripts')
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        const tripBookingForm = document.getElementById('tripBookingForm');
        const confirmDetailsModal = new bootstrap.Modal(document.getElementById('confirmDetailsModal'));
        const otpModal = new bootstrap.Modal(document.getElementById('otpModal'));
        const paymentModal = new bootstrap.Modal(document.getElementById('paymentModal'));
        const bookingInfoForm = document.getElementById('bookingInfoForm');
        const otpForm = document.getElementById('otpForm');
        const payButton = document.getElementById('payButton');
        const loadingOverlay = document.getElementById('loadingOverlay');
        const loadingMessage = document.getElementById('loadingMessage');
        const travelDateInput = document.getElementById('travel_date');
        const today = new Date();
        const minDate = new Date(today.setDate(today.getDate() + 1));
        const minDateString = minDate.toISOString().split('T')[0];
        travelDateInput.setAttribute('min', minDateString);
        let paymentData = null;
        document.getElementById('showPassengerDetails').addEventListener('click', function() {
            const adults = document.getElementById('adults').value;
            const infants = document.getElementById('infants').value;
            let adultDetailsHtml = '';
            let infantDetailsHtml = '';
            for (let i = 1; i <= adults; i++) {
                adultDetailsHtml += `
                <tr>
                    <td>${i}</td>
                    <td>
                        <select name="adult_title_${i}" class="form-control" required>
                            <option value="Mr.">Mr.</option>
                            <option value="Ms.">Ms.</option>
                            <option value="Mrs.">Mrs.</option>
                        </select>
                    </td>
                    <td>
                        <input type="text" name="adult_name_${i}" class="form-control" placeholder="Passenger Name" required>
                    </td>
                    <td>
                        <select name="adult_gender_${i}" class="form-control" required>
                            <option value="Male">Male</option>
                            <option value="Female">Female</option>
                            <option value="Other">Other</option>
                        </select>
                    </td>
                    <td>
                        <input type="number" name="adult_age_${i}" class="form-control" placeholder="Age" required>
                    </td>
                    <td>
                        <input type="text" name="adult_nationality_${i}" class="form-control"  placeholder="Nationality" value="Indian" required>
                    </td>
                    <td>
                        <input type="text" name="adult_idn_${i}" class="form-control" placeholder="Aadhaar/PAN etc.">
                    </td>
                </tr>
                `;
            }
            for (let i = 1; i <= infants; i++) {
                infantDetailsHtml += `
                <tr>
                    <td>${i}</td>
                    <td>
                        <select name="infant_title_${i}" class="form-control" required>
                            <option value="Master">Master</option>
                            <option value="Miss">Miss</option>
                        </select>
                    </td>
                    <td>
                        <input type="text" name="infant_name_${i}" class="form-control" placeholder="Passenger Name" required>
                    </td>
                    <td>
                        <select name="infant_gender_${i}" class="form-control" required>
                            <option value="Male">Male</option>
                            <option value="Female">Female</option>
                            <option value="Other">Other</option>
                        </select>
                    </td>
                    <td>
                        <input type="date" name="infant_dob_${i}" class="form-control" required>
                    </td>
                </tr>
                `;
            }
            document.getElementById('adultDetails').innerHTML = adultDetailsHtml;
            document.getElementById('infantDetails').innerHTML = infantDetailsHtml;
            document.getElementById('passengerDetails').style.display = 'block';
        });
        document.getElementById('proceedToConfirm').addEventListener('click', function() {
            const formData = new FormData(tripBookingForm);
            populateConfirmDetailsForm(formData);
            confirmDetailsModal.show();
        });
        bookingInfoForm.addEventListener('submit', function (event) {
            event.preventDefault();
            const formData = new FormData(tripBookingForm);
            const bookingInfoData = new FormData(this);
            for (let [key, value] of bookingInfoData.entries()) {
                formData.append(key, value);
            }
            sendOtp(formData);
        });
        otpForm.addEventListener('submit', function (event) {
            event.preventDefault();
            const otpData = new FormData(this);
            verifyOtp(otpData);
        });
        payButton.addEventListener('click', function () {
            if (paymentData) {
                showPaymentModal(paymentData);
            }
        });
        function populateConfirmDetailsForm(formData) {
            const tripId = document.getElementById('trip_id');
            const selectedTrip = tripId.options[tripId.selectedIndex];
            const tripTitle = selectedTrip.text;
            const adultPrice = parseFloat(selectedTrip.getAttribute('data-adult-price'));
            const infantPrice = parseFloat(selectedTrip.getAttribute('data-infant-price'));
            const discount = parseFloat(selectedTrip.getAttribute('data-discount'));
            const tripDate = formData.get('date');
            const adults = parseInt(formData.get('adults'));
            const infants = parseInt(formData.get('infants') || 0);
            const adultBasePrice = adultPrice * adults;
            const infantBasePrice = infantPrice * infants;
            let basePrice = adultBasePrice + infantBasePrice;
            if (discount > 0) {
                basePrice -= (basePrice * discount / 100);
            }
            const serviceCharge = basePrice * 0.10;
            const finalPrice = Math.round(basePrice + serviceCharge);
            document.getElementById('confirm_trip_title').textContent = tripTitle;
            document.getElementById('confirm_trip_date').textContent = tripDate;
            document.getElementById('confirm_adults').textContent = adults;
            document.getElementById('confirm_infants').textContent = infants;
            document.getElementById('otp_trip_title').textContent = tripTitle;
            document.getElementById('otp_trip_date_text').textContent = tripDate;
            document.getElementById('otp_adults_text').textContent = adults;
            document.getElementById('otp_infants_text').textContent = infants;
            document.getElementById('otp_price_breakdown').innerHTML = `
                <p>Adult Base Price: ₹${adultPrice} x ${adults} = ₹${adultBasePrice}</p>
                <p>Infant Base Price: ₹${infantPrice} x ${infants} = ₹${infantBasePrice}</p>
                ${discount > 0 ? `<p>Discount (${discount}%): -₹${(basePrice * discount / 100).toFixed(2)}</p>` : ''}
                <p>Service Charge (10%): ₹${serviceCharge.toFixed(2)}</p>
                <p>Net Payable (Including 10% service Charges): ₹${finalPrice}</p>
            `;
            document.getElementById('otp_final_price_text').textContent = finalPrice;
            document.getElementById('booking_trip_date').value = tripDate;
            document.getElementById('booking_final_price').value = finalPrice;

            confirmDetailsModal.show();
        }
        function sendOtp(formData) {
            displayLoadingOverlay('Sending OTP to your email and mobile number...');
            fetch('/api/send-otp', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                hideLoadingOverlay();
                if (data.success) {
                    confirmDetailsModal.hide();
                    otpModal.show();
                } else {
                    alert('Failed to send OTP. Please try again.');
                }
            });
        }
        function verifyOtp(otpData) {
            displayLoadingOverlay('Verifying OTP...');
            fetch('/api/verify-otp', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                body: otpData
            })
            .then(response => response.json())
            .then(data => {
                hideLoadingOverlay();
                if (data.success) {
                    paymentData = new FormData(tripBookingForm);
                    otpData.forEach((value, key) => {
                        paymentData.append(key, value);
                    });
                    const bookingInfoData = new FormData(bookingInfoForm);
                    bookingInfoData.forEach((value, key) => {
                        if (!paymentData.has(key)) {
                            paymentData.append(key, value);
                        }
                    });
                    populatePaymentModal(paymentData);
                    otpModal.hide();
                    paymentModal.show();
                } else {
                    alert('OTP verification failed. Please try again.');
                }
            });
        }
        function populatePaymentModal(formData) {
            document.getElementById('payment_trip_date').textContent = formData.get('date');
            document.getElementById('payment_adults').textContent = formData.get('adults');
            document.getElementById('payment_infants').textContent = formData.get('infants');
            document.getElementById('payment_name').textContent = formData.get('name');
            document.getElementById('payment_email').textContent = formData.get('email');
            document.getElementById('payment_mobile').textContent = formData.get('mobile');
            document.getElementById('payment_gstin').textContent = formData.get('gstin') || 'N/A';
            document.getElementById('payment_price_breakdown').innerHTML = document.getElementById('otp_price_breakdown').innerHTML;
            document.getElementById('payment_final_price_text').textContent = formData.get('booking_final_price');
        }
        function showPaymentModal(formData) {
            const finalPriceStr = document.getElementById('otp_final_price_text').textContent;
            const finalPrice = Math.round(parseFloat(finalPriceStr) * 100);
            if (isNaN(finalPrice) || finalPrice < 100) {
                alert('Invalid final price. Please try again.');
                return;
            }
            const options = {
                "key": "rzp_live_3BufINthcVwVTK",
                "amount": finalPrice,
                "currency": "INR",
                "name": "ANDAMAN SHELLS",
                "description": "Trip Booking",
                "handler": function (response){
                    handlePaymentSuccess(response, formData);
                },
                "prefill": {
                    "name": formData.get('name'),
                    "email": formData.get('email'),
                    "contact": formData.get('mobile')
                },
                "notes": {
                    "trip_id": formData.get('trip_id')
                },
                "theme": {
                    "color": "#3399cc"
                }
            };
            const rzp1 = new Razorpay(options);
            rzp1.open();
        }
        function handlePaymentSuccess(response, formData) {
            displayLoadingOverlay('Processing your booking...');
            const uniqueFormData = new FormData();
            formData.forEach((value, key) => {
                if (!uniqueFormData.has(key)) {
                    uniqueFormData.append(key, value);
                }
            });
            uniqueFormData.append('payment_id', response.razorpay_payment_id);
            uniqueFormData.append('status', 'success');
            fetch('/api/trip-payment-success', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                body: uniqueFormData
            })
            .then(response => response.json())
            .then(data => {
                hideLoadingOverlay();
                if (data.success) {
                    window.location.href = `/trip-thank-you/${data.booking_id}`;
                } else {
                    alert('Payment processing failed. Please contact support.');
                }
            });
        }
        function handlePaymentFailure(response) {
            console.log('Payment failed:', response);
            alert('Payment failed. Please try again.');
        }
        function displayLoadingOverlay(message) {
            loadingMessage.textContent = message;
            loadingOverlay.style.display = 'block';
        }
        function hideLoadingOverlay() {
            loadingOverlay.style.display = 'none';
        }
        document.getElementById('backButton1').addEventListener('click', function() {
            confirmDetailsModal.hide();
        });
        document.getElementById('backButton2').addEventListener('click', function() {
            otpModal.hide();
            confirmDetailsModal.show();
        });
        document.getElementById('backButton3').addEventListener('click', function() {
            paymentModal.hide();
            otpModal.show();
        });
    });
</script>
@endsection