@extends('layouts.app')
@section('title', 'Bangladesh Unbound - Ongoing Tours')
@section('page-title', 'Ongoing Tours')

@section('breadcrumb')
    <nav class="breadcrumb-container d-flex justify-content-between" aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="{{ route('admin.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">
                Ongoing Tours
            </li>
        </ol>
        <span class="gap-2 d-flex align-items-center">
            @can('booking-edit')
                <a href="{{ route('admin.bookings.edit', $booking->id) }}"
                    class="py-1 btn btn-add-booking btn-outline-danger ms-auto">
                    <i class="bi bi-pencil me-1"></i> Edit Bookings
                </a>
            @endcan
            <a href="{{ route('admin.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>
                                @if (empty($booking->others_discount_amount) && $booking->others_discount_amount <= 0)
                                    <!-- Special Discount -->
                                    @can('booking-set-discount')
                                        <div class="mt-3 order-special-discount">
                                            <div class="form-group">
                                                <label for="specialDiscount" class="form-label"><strong>Special
                                                        Discount:</strong></label>
                                                <div class="input-group">
                                                    <span class="input-group-text">৳</span>
                                                    <input type="number" class="form-control" id="specialDiscount"
                                                        name="specialDiscount" placeholder="0.00" step="0.01" min="0">
                                                    <button type="button" class="btn btn-outline-success"
                                                        id="applyDiscountBtn">Apply</button>
                                                </div>
                                                <small class="form-text text-muted">Enter discount amount to apply to this
                                                    booking</small>
                                            </div>
                                        </div>
                                    @endcan
                                @endif
                            </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">Assign a Team</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">
                                <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">
                                <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>
                    @can('assign-team')
                        <div class="col-md-4">
                            <button class="btn btn-assign" id="assignButton">Assign</button>
                        </div>
                    @endcan
                </div>
            </div>
        </div>

        <div class="gap-2 d-flex justify-content-between align-items-center">
            <!-- Manage Order Section -->
            <div class="admin-section manage-order-section w-100">
                <div class="d-flex justify-content-between align-items-start">
                    <h3 class="admin-section-title">Manage Order</h3>
                    @can('payment-refund')
                        @if ($booking->paid_amount > 0)
                            <button type="button" class="btn btn-outline-success" data-bs-toggle="modal"
                                data-bs-target="#makeRefundModal">Make Refund</button>
                        @endif
                    @endcan
                </div>

                <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' : '' }}>
                                        <label class="form-check-label" for="status_{{ $key }}">
                                            {{ $status }}
                                        </label>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>

                    @can('change-order-status')
                        <button class="btn btn-submit-order" id="submitOrderButton">Submit</button>,
                    @endcan
                </div>
            </div>

            <!-- Payment Status -->
            <div class="admin-section manage-order-section w-100" style="min-height: 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">
                                    @if ($booking->payment_status == $key)
                                        <input class="form-check-input" type="radio"
                                            value="{{ $booking->payment_status }}"
                                            {{ $booking->payment_status == $key ? 'checked' : '' }} readonly
                                            onclick="return false;">
                                    @endif
                                    <label class="form-check-label">
                                        {{ $status }}
                                    </label>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="p-2 btn btn-outline-success">Paid: ৳ {{ $booking->paid_amount }}</div>
                    <div class="btn btn-secondary-success">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>
                @can('payment-create')
                    <button class="btn btn-add-payment" data-bs-toggle="modal" data-bs-target="#addPaymentModal">Add
                        Payment</button>
                @endcan
            </div>
            <div class="payment-history-table">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Transaction ID</th>
                            <th>Amount</th>
                            <th>Gateway</th>
                            <th>Active Status</th>
                            <th>Date</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($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
                                        $badgeClass = match ($history->payment_status) {
                                            'success' => 'bg-success',
                                            'pending' => 'bg-warning',
                                            'failed' => 'bg-danger',
                                            'refunded' => 'bg-secondary',
                                            default => 'bg-light',
                                        };
                                    @endphp
                                    <span class="badge {{ $badgeClass }}">
                                        {{ $history->payment_status }}
                                    </span>
                                </td>
                                <td>{{ $history->created_at->format('d M Y') }}</td>
                                @if ($history->payment_status == 'pending')
                                    <td>
                                        <button class="btn btn-download-receipt collect-payment-btn"
                                            data-bs-toggle="modal"
                                            data-transaction-id="{{ $history->transaction_number }}"
                                            data-payment-method-id="{{ $history->payment_method_id }}"
                                            data-session-id="{{ $history->session_id }}"
                                            data-bank-name="{{ $history->metadata->bank_name ?? '' }}"
                                            data-branch-name="{{ $history->metadata->branch_name ?? '' }}"
                                            data-account-holder="{{ $history->metadata->bank_account_name ?? '' }}">
                                            <img src="{{ asset('backend/img/ico/ico-check.png') }}"
                                                alt="Confirm Payment">
                                        </button>
                                    </td>
                                @endif
                            </tr>
                        @endforeach
                    </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')
    @include('admin.booking.partials.collect-payment')
    @include('admin.booking.partials.make-refund-modal')
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            $(document).on('click', '.collect-payment-btn', function(event) {
                event.preventDefault();
                const $btn = $(this);

                $('#collectPaymentForm input[name="transaction_id"]').val($btn.data('transaction-id'));
                $('#collectPaymentForm input[name="status"]').val('success');

                const paymentMethodId = Number($btn.data('payment-method-id'));
                const sessionId = $btn.data('session-id') || 'N/A';
                const bankName = $btn.data('bank-name') || '';
                const branchName = $btn.data('branch-name') || '';
                const accountHolder = $btn.data('account-holder') || '';

                const isBankTransfer = paymentMethodId === 5;
                const bankInfoContainer = document.getElementById('bankInfoContainer');
                if (bankInfoContainer) {
                    bankInfoContainer.style.display = isBankTransfer ? 'block' : 'none';

                    if (isBankTransfer) {
                        const bankTransactionIdSpan = document.getElementById('bankTransactionIdSpan');
                        const bankNameSpan = document.getElementById('bankNameSpan');
                        const branchNameSpan = document.getElementById('branchNameSpan');
                        const accountHolderSpan = document.getElementById('accountHolderSpan');

                        if (bankTransactionIdSpan) bankTransactionIdSpan.textContent = sessionId;
                        if (bankNameSpan) bankNameSpan.textContent = bankName;
                        if (branchNameSpan) branchNameSpan.textContent = branchName;
                        if (accountHolderSpan) accountHolderSpan.textContent = accountHolder;
                    }
                }

                const collectPaymentModal = new bootstrap.Modal(document.getElementById(
                    'collectPaymentModal'));
                collectPaymentModal.show();
            });


            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,
                            booking_status: '{{ bookingStatus('Cancelled') }}'
                        })
                        .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