@extends('layouts.app')
@section('title', 'Bangladesh Unbound - Upcoming Bookings')
@section('page-title', 'Upcoming Bookings')

@section('breadcrumb')
<nav class="breadcrumb-container d-flex justify-content-between" aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ route('customer.dashboard') }}">
                <img src="{{ asset('backend/img/ico/ico-dashboard.svg') }}" alt="Dashboard" class="breadcrumb-icon">
                Dashboard
            </a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            <img src="{{ asset('backend/img/ico/ico-ongoing.svg') }}" alt="Bookings" class="breadcrumb-icon">
            Upcoming Bookings
        </li>
    </ol>
    <span class="gap-2 d-flex align-items-center">

        <a href="{{ route('customer.bookings.index') }}" class="py-1 btn btn-add-booking btn-outline-success ms-auto">
            <i class="bi bi-arrow-left"></i> Back to Bookings
        </a>
    </span>
</nav>
@endsection

@section('content')
<div class="admin-order-container">
    <!-- Order Header Card -->
    <div class="admin-order-header">
        <div class="row">
            <!-- Booking Details -->
            <div class="col-md-8">
                <div class="order-info-section">
                    <div class="order-icon">
                        <img src="{{ asset('backend/img/ico/ico-package.svg') }}" alt="Tour Icon"
                            class="order-icon-img">
                    </div>
                    <div class="order-details">
                        <h2 class="order-title">{{ $booking?->tourPackage?->name }}</h2>
                        <p class="order-duration">{{ $booking->duration }}</p>
                        <div class="order-meta">
                            <div class="order-id-section">
                                <span class="order-id-label">Order ID:</span>
                                <span class="order-id-value">{{ $booking->order_id }}</span>
                            </div>
                            <div class="order-package">
                                <strong>Package:</strong> {{ $booking?->tourPackage?->name }}
                            </div>
                            <div class="order-pickup-location">
                                <strong>Pickup Location:</strong> {{ $booking->pickup_location ?? '' }}
                            </div>
                            <div class="order-dropoff-location">
                                <strong>Drop off Location:</strong> {{ $booking->dropoff_location }}
                            </div>
                            <div class="order-payment">
                                <strong>Unit Amount:</strong>
                                <span class="fw-bold" style="color: #0ba565">৳
                                    {{ number_format($booking->grand_total, 2) }}</span>
                            </div>

                            @if (!empty($booking->coupon_amount) && $booking->coupon_amount > 0)
                            <div class="order-payment">
                                <strong>Coupon Applied:</strong>
                                <span class="amount-paid text-muted">৳
                                    {{ number_format($booking->coupon_amount, 2) }}</span>
                            </div>
                            @endif

                            @if (!empty($booking->others_discount_amount) && $booking->others_discount_amount > 0)
                            <div class="order-payment">
                                <strong>Special Discount Amount:</strong>
                                <span class="amount-paid text-muted">৳
                                    {{ number_format($booking->others_discount_amount, 2) }}</span>
                            </div>
                            @endif

                            @if (!empty($booking->tourPackage?->discount_price) &&
                            $booking->tourPackage->discount_price> 0)
                            <div class="order-payment">
                                <strong>Package Discount Amount:</strong>
                                <span class="amount-paid text-muted">৳
                                    {{ number_format($booking->tourPackage?->discount_price, 2) }}</span>
                            </div>
                            @endif

                            @php
                            $totalDiscount = ($booking->discount_amount ?? 0) +
                            ($booking->others_discount_amount ?? 0);
                            @endphp
                            @if ($totalDiscount > 0)
                            <div class="order-payment">
                                <strong>Total Discount Amount:</strong>
                                <span class="amount-paid text-muted">
                                    ৳ {{ number_format($totalDiscount, 2) }}
                                </span>
                            </div>
                            @endif
                            <div class="order-payment">
                                <strong>Total Payable Amount:</strong>
                                <span class="fw-bold" style="color: #0ba565">৳
                                    {{ number_format($booking->total_payable_amount, 2) }}</span>
                            </div>


                            <div class="order-payment">
                                <strong>Amount Paid:</strong>
                                <span class="amount-paid">৳ {{ number_format($booking->paid_amount, 2) }}</span>
                            </div>
                            <div class="order-due">
                                <strong>Amount Due:</strong>
                                <span class="amount-due">৳ {{ number_format($booking->due_amount, 2) }}</span>
                            </div>
                            <div class="order-due-date">
                                <strong>Payment Due Date:</strong>
                                {{ \Carbon\Carbon::parse($booking->payment_due_date)->format('d M Y') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Customer Card -->
            <div class="col-md-4">
                <div class="customer-card">
                    <div class="customer-header">Customer</div>
                    <div class="customer-info">
                        <div class="customer-avatar">
                            <img src="{{ $booking?->customer?->avatar ?? asset('backend/img/avatar.jpg') }}"
                                alt="{{ $booking?->customer?->full_name }}" class="customer-img">
                        </div>
                        <div class="customer-details">
                            <h4 class="customer-name">{{ $booking?->customer?->full_name }}</h4>
                            <p class="customer-phone">{{ $booking?->customer?->phone }}</p>
                            <p class="customer-country">{{ $booking?->customer?->country }}</p>
                            <p class="customer-email">{{ $booking?->customer?->email }}</p>
                            <p class="customer-id">Customer ID: #HG{{ $booking?->customer?->id }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Assign a Team Section -->
    <div class="admin-section assign-team-section">
        <h3 class="admin-section-title">Tour Guide</h3>
        <div class="assign-team-form">
            <div class="row">
                {{-- <div class="col-md-4">
                    <div class="form-group">
                        <select class="form-control admin-select" id="selectTeam" name="team_id" disabled>
                            <option value="">Select Team</option>
                            @foreach ($teams as $team)
                            <option value="{{ $team->id }}" {{ $team->id == $booking?->tourGuide?->team?->id ?
                                'selected' : '' }}>
                                {{ $team->name ?? '' }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                </div> --}}
                <div class="col-md-4">
                    <div class="form-group">
                        <select class="form-control admin-select" id="selectGuide" name="guide_id" disabled>
                            <option value="">Select Guide</option>
                            @if ($booking?->tourGuide)
                            @foreach ($tourGuides->where('team_id', $booking?->tourGuide?->team?->id) as $tourGuide)
                            <option value="{{ $tourGuide->id }}" {{ $tourGuide->id == $booking->tour_guide_id ?
                                'selected' : '' }}>
                                {{ $tourGuide?->user?->first_name . ' ' . $tourGuide?->user?->last_name }}
                            </option>
                            @endforeach
                            @endif
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="gap-3 d-flex justify-content-between">
        <!-- Manage Order Section -->
        <div class="admin-section manage-order-section w-100">
            <h3 class="admin-section-title">Order Status</h3>
            <div class="manage-order-form">
                <div class="mb-3 form-group">
                    <div class="order-status-options">

                        @foreach (orderStatus() as $key => $status)
                        <div class="form-check">
                            @if ($key != 3)
                            <input class="form-check-input" type="radio" name="order_status" id="status_{{ $key }}"
                                value="{{ $key }}" {{ $booking->order_status == $key ? 'checked' : '' }} disabled>
                            <label class="form-check-label" for="status_{{ $key }}">
                                {{ $status }}
                            </label>
                            @endif
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <!-- Payment Status -->
        <div class="admin-section manage-order-section w-100">
            <h3 class="admin-section-title">Booking Payment Status</h3>
            <div class="manage-order-form">
                <div class="mb-3 form-group">
                    <div class="order-status-options">
                        @foreach ($paymentStatus as $key => $status)
                        <div class="form-check">
                            <input class="form-check-input" type="radio" value="{{ $booking->payment_status}}" {{
                                $booking->payment_status == $key ? 'checked' : '' }} disabled>
                            <label class="form-check-label">
                                {{ $status }}
                            </label>
                        </div>
                        @endforeach
                    </div>
                </div>

                <div class="btn btn-outline-success">Paid: ৳ {{$booking->paid_amount}}</div>
                <div class="border-0 btn btn-secondary-success text-danger">Due: ৳ {{$booking->due_amount}}</div>
            </div>
        </div>
    </div>
    <!-- Payment History Section -->
    <div class="admin-section payment-history-section">
        <div class="payment-history-header d-flex justify-content-between align-items-center">
            <h3 class="admin-section-title">Payment History</h3>
        </div>
        <div class="payment-history-table">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Transaction ID</th>
                        <th>Amount</th>
                        <th>Gateway</th>
                        <th>Status</th>
                        <th>Date</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($paymentHistory as $history)
                    <tr>
                        <td><strong>{{ $history->transaction_number }}</strong></td>
                        <td><strong>৳ {{ number_format($history->amount, 2) }}</strong></td>
                        <td>{{ $history?->payment_gateway }}</td>
                        <td>
                            @php
                            $lastPaymentStatus = $history->payment_status;
                            $badgeClass = match ($lastPaymentStatus) {
                            'success' => 'bg-success',
                            'pending' => 'bg-warning',
                            'failed' => 'bg-danger',
                            'refunded' => 'bg-secondary',
                            'cancelled' => 'bg-dark',
                            default => 'bg-light',
                            };
                            @endphp
                            <span class="badge {{ $badgeClass }}">
                                {{ $lastPaymentStatus ?? 'N/A' }}
                            </span>
                        </td>
                        <td>{{ $history->created_at->format('d M Y') }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4" class="text-center text-muted">No payment history found.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="mt-4 card-footer">
            @include('admin.bookings.partials.payment-pagination', [
            'query' => $booking->payments()->paginate(request('per_page', 10)),
            ])
        </div>
    </div>
</div>

@include('admin.booking.partials.payment')
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {

            const BookingUrl = `{{ route('admin.bookings.update', $booking->id) }}`;
            const discountUrl = `{{ route('admin.bookings.set-discount', $booking->id) }}`;
            const bookingId = `{{ $booking->id }}`;
            const customerId = `{{ $booking->customer_id }}`;

            const applyDiscountBtn = document.getElementById('applyDiscountBtn');
            const specialDiscountInput = document.getElementById('specialDiscount');
            const amountDueElement = document.querySelector('.amount-due');

            applyDiscountBtn?.addEventListener('click', function() {
                const discountAmount = parseFloat(specialDiscountInput.value) || 0;
                const currentDue = parseFloat(amountDueElement.textContent.replace('৳', '').replace(',',
                    '')) || 0;

                const originalText = applyDiscountBtn.innerHTML;
                applyDiscountBtn.innerHTML =
                    '<span class="spinner-border spinner-border-sm me-2"></span>Applying...';
                applyDiscountBtn.disabled = true;

                if (discountAmount > 0 && discountAmount <= currentDue) {
                    const newAmount = currentDue - discountAmount;
                    amountDueElement.textContent =
                        `৳ ${newAmount.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
                    specialDiscountInput.value = '';

                    axios.post(discountUrl, {
                            others_discount_amount: discountAmount,
                            booking_id: bookingId,
                            customer_id: customerId
                        })
                        .then(response => {
                            if (response.data.success) {
                                toastr.success(response.data.message);
                            } else {
                                toastr.error(response.data.message);
                            }
                        })
                        .catch(error => {
                            toastr.error(error.response?.data?.message || 'An error occurred.');
                        })
                        .finally(() => {
                            resetButton();

                            setTimeout(() => {
                                location.reload();
                            }, 1000);
                        });

                } else if (discountAmount > currentDue) {
                    toastr.error('Discount amount cannot exceed the current amount due.');
                    resetButton();
                } else {
                    toastr.error('Please enter a valid discount amount.');
                    resetButton();
                }

                function resetButton() {
                    applyDiscountBtn.innerHTML = originalText;
                    applyDiscountBtn.disabled = false;
                }
            });

            specialDiscountInput?.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') applyDiscountBtn.click();
            });



            //team
            const teamSelect = document.getElementById('selectTeam');
            const guideSelect = document.getElementById('selectGuide');

            // Example of how to handle dynamic dropdowns
            if (teamSelect) {
                teamSelect.addEventListener('change', function() {
                    const teamId = this.value;
                    guideSelect.innerHTML = '<option value="">Select Tour Guide</option>';

                    if (teamId) {
                        axios.get(`{{ url('admin/tour-guides/all') }}?team_id=${teamId}`)
                            .then(response => {
                                if (response.data && Array.isArray(response.data.data)) {
                                    response.data.data.forEach(guide => {
                                        const option = document.createElement('option');
                                        option.value = guide.id;
                                        option.textContent = guide?.user.first_name + ' ' +
                                            guide
                                            .user.last_name;
                                        guideSelect.appendChild(option);
                                    });
                                }
                            })
                            .catch(error => {
                                toastr.error('Failed to load tour guides. Please try again.');
                            });
                    }
                });
            }

            // Assign Button
            const assignButton = document.getElementById('assignButton');
            assignButton?.addEventListener('click', function(event) {
                event.preventDefault();
                const teamId = teamSelect.value;
                const guideId = guideSelect.value;

                if (teamId && guideId && bookingId) {
                    const originalText = assignButton.innerHTML;
                    assignButton.innerHTML =
                        `<span class="spinner-border spinner-border-sm me-2"></span>Assigning...`;
                    assignButton.disabled = true;

                    axios.post(BookingUrl, {
                            tour_guide_id: guideId,
                        })
                        .then(response => {
                            if (response.data.success) {
                                toastr.success('Tour guide assigned successfully!');
                            } else {
                                toastr.error(response.data.message || 'Failed to assign tour guide.');
                            }
                        })
                        .catch(error => {
                            console.error('Error assigning tour guide:', error);
                            toastr.error(
                                'An error occurred while assigning the tour guide. Please try again.'
                            );
                        })
                        .finally(() => {
                            assignButton.innerHTML = originalText;
                            assignButton.disabled = false;
                        });
                } else {
                    toastr.error('Please select both a team and a tour guide before assigning.');
                }
            });

            // Submit Order Button
            const submitOrderButton = document.getElementById('submitOrderButton');
            submitOrderButton?.addEventListener('click', function(event) {
                event.preventDefault();
                const selectedStatus = document.querySelector('input[name="order_status"]:checked');

                if (selectedStatus && bookingId) {
                    const originalText = submitOrderButton.innerHTML;
                    submitOrderButton.innerHTML =
                        `<span class="spinner-border spinner-border-sm me-2"></span>Updating...`;
                    submitOrderButton.disabled = true;

                    axios.post(BookingUrl, {
                            order_status: selectedStatus.value,
                        })
                        .then(response => {
                            if (response.data.success) {
                                toastr.success('Order status updated successfully!');
                            } else {
                                toastr.error(response.data.message || 'Failed to update order status.');
                            }
                        })
                        .catch(error => {
                            console.error('Error updating order status:', error);
                            toastr.error(
                                'An error occurred while updating the order status. Please try again.'
                            );
                        })
                        .finally(() => {
                            submitOrderButton.innerHTML = originalText;
                            submitOrderButton.disabled = false;
                        });
                } else {
                    toastr.error('Please select an order status before submitting the order.');
                }
            });



            const addPaymentModal = new bootstrap.Modal(document.getElementById('addPaymentModal'));
            const savePaymentBtn = document.getElementById('savePaymentBtn');
            const paymentForm = document.getElementById('addPaymentForm');
            const paymentUrl = `{{ route('admin.booking.payments.pay', ['bookingId' => $booking->id]) }}`;

            document.getElementById('paymentDate').value = new Date().toISOString().split('T')[0];

            // savePaymentBtn.addEventListener('click', function(event) {
            //     event.preventDefault();

            //     const originalText = savePaymentBtn.innerHTML;

            //     savePaymentBtn.innerHTML =
            //         '<span class="spinner-border spinner-border-sm me-2"></span>Processing...';
            //     savePaymentBtn.disabled = true;

            //     const formData = new FormData(paymentForm);

            //     if (!formData.get('amount') || !formData.get('gateway') || !formData.get('status') || !
            //         formData.get('payment_date')) {
            //         toastr.error('Please fill in all required fields.');
            //         resetButton();
            //         return;
            //     }

            //     axios.post(paymentUrl, {
            //             customer_id: customerId,
            //             booking_id: bookingId,
            //             payable_amount: formData.get('amount'),
            //             payment_methods_id: formData.get('gateway'),
            //             payment_status: formData.get('status'),
            //             payment_date: formData.get('payment_date'),
            //             notes: formData.get('notes'),
            //         })
            //         .then(response => {
            //             if (response.data.success) {
            //                 addPaymentModal.hide();
            //                 paymentForm.reset();
            //                 toastr.success('Payment added successfully!');

            //                 setTimeout(() => {
            //                     window.location.reload();
            //                 }, 500);
            //             } else {
            //                 toastr.error(response.data.message || 'Failed to add payment.');
            //             }
            //         })
            //         .catch(error => {
            //             console.error(error);
            //             toastr.error('An error occurred while adding the payment.');
            //         })
            //         .finally(() => {
            //             resetButton();
            //         });

            //     function resetButton() {
            //         savePaymentBtn.innerHTML = originalText;
            //         savePaymentBtn.disabled = false;
            //     }
            // });


        });
</script>
@endpush