@extends('frontend.layouts.master')
<!-- Start Header section -->
@section('meta_description',
'Bangladesh Unbound is your trusted partner for authentic and unforgettable travel
experiences across Bangladesh. Discover hidden gems, rich culture, and natural beauty with our expertly curated tours.')
@section('meta_keywords',
'Bangladesh Tours, Travel Bangladesh, Tour Company Bangladesh, Day Trip, Sundarban Tour,
Sylhet Tours.')

@section('canonical_url', 'https://www.bangladeshunbound.com/')
@section('title')
Bangladesh Unbound | Welcome to Unbound Bangladesh
@endsection
<!-- Open Graph -->
@section('og_type', 'website')
@section('og_title', 'Bangladesh Unbound')
@section('og_description', 'Authentic and unforgettable travel experiences across Bangladesh.')
@section('og_image', 'https://www.bangladeshunbound.com/assets/img/social-share-banner.jpg')
@section('og_url', 'https://www.bangladeshunbound.com/')
@section('og_site_name', 'Bangladesh Unbound')
<!-- Twitter Card -->
@section('x_card', 'summary_large_image')
@section('x_title', 'Bangladesh Unbound')
@section('x_description', 'Discover hidden gems and explore Bangladesh with our curated travel experiences.')
@section('x_image', 'https://www.bangladeshunbound.com/assets/img/social-share-banner.jpg')
<!-- End Header Section -->
@section('content')
<!-- Checkout Hero Section -->
<section class="tours-hero bg-success text-white py-5">
    <div class="container">
        <h1 class="display-4 fw-bold mb-3 text-center">Checkout</h1>
    </div>
</section>
<!-- Breadcrumb -->
<nav class="breadcrumb-nav" aria-label="breadcrumb">
    <div class="container">
        <div class="d-flex align-items-center text-white">
            <i class="bi bi-house-door me-2"></i>
            <a href="{{ route('home.home') }}" class="text-white text-decoration-none me-2">Home</a>
            <span class="me-2">•</span>
            <a href="{{ route('home.tours') }}" class="text-white text-decoration-none me-2">Tours</a>
            <span class="me-2">•</span>
            <span>Checkout</span>
        </div>
    </div>
</nav>

<!-- Checkout Content Section -->
<section class="checkout-content py-5">
    <div class="container">

        <!-- Billing Details Form -->
        <div class="row">
            <div class="col-lg-12">
                <div class="bg-white p-4 rounded">
                    <h3 class="mb-4 fw-bold">Billing Details</h3>
                    <form id="checkoutForm" action="{{ route('home.checkout.store') }}" method="POST">
                        @csrf
                        @method('POST')
                        <input type="hidden" name="booking_id" value="{{ $booking_id }}">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="firstName" class="form-label fw-semibold">First Name</label>
                                <input type="text" class="form-control" id="firstName" name="first_name"
                                    value="{{ old('first_name') }}" required>
                                @error('first_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="lastName" class="form-label fw-semibold">Last Name</label>
                                <input type="text" class="form-control" id="lastName" name="last_name"
                                    value="{{ old('last_name') }}" required>
                                @error('last_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="address" class="form-label fw-semibold">Address</label>
                            <textarea class="form-control" id="address" rows="3" name="address"
                                value="{{ old('address') }}" required></textarea>
                            @error('address')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="country" class="form-label fw-semibold">Country</label>
                            <select class="form-select" id="country" name="country" value="{{ old('country') }}"
                                required>
                                <option value="">Select</option>
                                @foreach ($countries as $country)
                                <option value="{{ $country->id }}" @if (old('country')==$country->id) selected @endif>
                                    {{ $country->name ?? '' }}</option>
                                @endforeach
                            </select>
                            @error('country')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="phone" class="form-label fw-semibold">Phone</label>
                                <input type="tel" class="form-control" id="phone" name="phone"
                                    value="{{ old('phone') }}" required>
                                @error('phone')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="email" class="form-label fw-semibold">Email</label>
                                <input type="email" class="form-control" id="email" name="email"
                                    value="{{ old('email') }}" required>
                                @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-semibold">Payment Method</label>
                            <div class="row">
                                @foreach ($paymentMethods as $paymentMethod)
                                <div class="col-6 col-md-3 mb-2">
                                    <input type="radio" class="btn-check" name="payment_method_id"
                                        id="{{ $paymentMethod->name }}" value="{{ $paymentMethod->id }}" checked
                                        value="{{ old('payment_method_id') }}">
                                    <label class="btn btn-outline-secondary w-100" for="{{ $paymentMethod->name }}">{{
                                        $paymentMethod->name }}</label>
                                    @error('payment_method_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                @endforeach
                            </div>
                        </div>

                        <div class="mb-4" id="bankFields" style="display: none;">
                            <div class="row">
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Sender Bank Information</label>
                                    <div>
                                        <div class="form-group mb-3">
                                            <label for="bankTransactionNumber" class="form-label">Bank Transfer
                                                Transaction
                                                Number</label>
                                            <input type="text" class="form-control" id="bankTransactionNumber"
                                                name="bank_transaction_number" required>
                                        </div>
                                        <div class="form-group mb-3">
                                            <label for="bankName" class="form-label">Bank Name</label>
                                            <input type="text" class="form-control" id="bankName" name="bank_name"
                                                required>
                                        </div>
                                        <div class="form-group mb-3">
                                            <label for="bankAccountName" class="form-label">Account Holder
                                                Name</label>
                                            <input type="text" class="form-control" id="bankAccountName"
                                                name="bank_account_name" required>
                                        </div>
                                        <div class="form-group mb-3">
                                            <label for="bankBranchName" class="form-label">Bank Branch Name</label>
                                            <input type="text" class="form-control" id="bankBranchName"
                                                name="branch_name" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Receiver Bank Information</label>
                                    <div class="form-group mt-4">
                                        <p><strong>Bank Name:</strong> {{ config('services.bank_transfer.bank_name') }}
                                        </p>
                                        <p><strong>Account Name:</strong> {{
                                            config('services.bank_transfer.account_name') }}</p>
                                        <p><strong>Account Number:</strong> {{
                                            config('services.bank_transfer.account_number') }}</p>
                                        <p><strong>Branch Name:</strong> {{
                                            config('services.bank_transfer.branch_name') }}</p>
                                        <p><strong>Routing Number:</strong> {{
                                            config('services.bank_transfer.routing_number') }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn btn-success btn-lg px-5 py-3">
                                Pay Now <i class="bi bi-credit-card ms-2"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
@push('scripts')
<script>
    // Function to toggle bank fields
        function toggleBankFields() {
            let selectedPaymentMethod = $('input[name="payment_method_id"]:checked').val();
            if (selectedPaymentMethod == 5) { // Bank Transfer ID is 5
                $('#bankFields').show();
                $('#bankFields input').prop('required', true);
            } else {
                $('#bankFields').hide();
                $('#bankFields input').prop('required', false);
            }
        }
        $(document).ready(function() {
            // toggle bank fields on page load
            toggleBankFields();
            // toggle bank fields on payment method change
            $('input[name="payment_method_id"]').change(function() {
                toggleBankFields();
            });
        });
</script>
@endpush