@extends('customer')

@section('title', 'Quick Currency Exchange')

@section('content')
    {{-- <br> --}}
    <!-- Hero Section -->
    <section class="hero text-center py-5">
        <div class="container">
            <h1 class="display-4 mb-3">Quick Currency Exchange</h1>
            <p class="lead mb-4">Exchange currencies instantly at competitive rates with just a few clicks.</p>
            {{-- <a href="#currency-selection" class="btn btn-warning btn-lg">Start Trading</a> --}}
        </div>
    </section>


    <section class="exchange-rates py-3" id="exchange-rates">
        <div class="container">
            <h2 class="text-center mb-3">Today's Exchange Rates</h2>
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="table-responsive">
                        <table class="table table-bordered text-center" style="font-size: 20px;">
                            <thead class="table-warning">
                                <tr>
                                    <th>Currency</th>
                                    <th>Buy Rate</th>
                                    <th>Sell Rate</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($currencies as $currency)
                                    <tr>
                                        <td>{{ $currency->currency_pair }}</td>
                                        {{-- Ubah parameter kedua dari 0 menjadi 2 --}}
                                        <td>{{ number_format($currency->buy_rate, 2, ',', '.') }}</td>
                                        <td>{{ number_format($currency->sell_rate, 2, ',', '.') }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Currency Exchange Form -->
    <section class="currency-exchange py-5" id="currency-exchange">
        <div class="container">
            <div class="card shadow-lg">
                <div class="card-body">
                    <h5 class="card-title text-center mb-4">Quick Currency Exchange</h5>
                    <form id="exchangeForm">
                        @csrf
                        <input type="hidden" id="exchange_rates_id" name="exchange_rates_id">
                        <input type="hidden" id="currency_pair" name="currency_pair">

                        <div class="mb-4">
                            <label for="amount" class="form-label">Amount</label>
                            <input type="text" class="form-control" id="amount" name="amount"
                                placeholder="Enter amount" required>
                        </div>

                        <div class="mb-4 overflow-auto">
                            <div class="d-flex flex-wrap justify-content-center gap-2">

                                @foreach ($currencies as $currency)
                                    <button type="button" class="btn currency-button" data-id="{{ $currency->id }}"
                                        data-pair="{{ $currency->currency_pair }}" data-buy="{{ $currency->buy_rate }}"
                                        data-sell="{{ $currency->sell_rate }}">
                                        {{ $currency->currency_pair }}
                                    </button>
                                @endforeach
                            </div>
                        </div>

                        <div class="rate-box d-flex justify-content-between my-4 p-4 border rounded shadow-sm" style="font-size: 20px;" >
                            <div>
                                <p><strong>Buy Rate:</strong> <span id="buyRate">0</span></p>
                            </div>
                            <div>
                                <p><strong>Total Buy:</strong> <span id="TotalBuy">0</span></p>
                            </div>
                            <div>
                                <p><strong>Sell Rate:</strong> <span id="sellRate">0</span></p>
                            </div>
                            <div>
                                <p><strong>Total Sell:</strong> <span id="approxAmount">0</span></p>
                            </div>
                        </div>

                        @if (auth()->check())
                            <div class="mb-3">
                                <label for="transferTo" class="form-label">Transfer To</label>
                                <select class="form-control" id="transferTo" name="transferTo" required>
                                    <option value="" selected disabled>Choose transfer destination</option>
                                    @foreach ($transferAccount as $transfer)
                                        <option value="{{ $transfer->id }}" data-bank="{{ $transfer->bank_name }}"
                                            data-rekening="{{ $transfer->rekening }}"
                                            data-nama="{{ $transfer->nama_rekening }}">
                                            {{ $transfer->bank_name . ' - ' . $transfer->rekening . ' - ' . $transfer->nama_rekening }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <input type="hidden" id="bank_name" name="bank_name">
                            <input type="hidden" id="rekening" name="rekening">
                            <input type="hidden" id="nama_rekening" name="nama_rekening">

                            <div class="mb-3">
                                <label for="transferTime" class="form-label">Transfer Time</label>
                                <select class="form-control" id="transferTime" name="transferTime" required></select>
                            </div>

                            <div class="mb-3">
                                <label for="deliveryMethod" class="form-label">Delivery Method</label>
                                <select class="form-control" id="deliveryMethod" name="deliveryMethod" required>
                                    <option value="" selected disabled>Choose delivery method</option>
                                    <option value="pickup">Pickup</option>
                                    <option value="delivery">Delivery</option>
                                </select>
                            </div>

                            <div class="mb-3" id="deliveryAddressContainer" style="display: none;">
                                <label for="deliveryAddress" class="form-label">Delivery Address</label>
                                <textarea class="form-control" id="deliveryAddress" name="deliveryAddress" rows="3"
                                    placeholder="Enter your address"></textarea>
                            </div>


                        @endif

                        @if (auth()->check())
                            <button type="submit" class="btn btn-warning btn-block" id="placeOrderBtn">Place Order</button>
                        @else
                            <button type="button" class="btn btn-warning btn-block" id="loginAlertBtn">Place Order</button>
                        @endif

                    </form>
                </div>
            </div>
        </div>
    </section>



    @if (auth()->check())
        <section class="transaction-history py-3">
            <div class="container-fluid m-3">
                <h2 class="text-center mb-4">Your Transaction History</h2>
                <div class="table-responsive">
                    <table class="table table-bordered text-center">
                        <thead class="table-warning">
                            <tr>
                                <th>Date</th>
                                <th>Currency</th>
                                <th>Amount</th>
                                <th>Kurs</th>
                                <th>Total Received</th>
                                <th>Shipping Cost</th>
                                <th>Total Amount</th>
                                <th>Transfer to</th>
                                <th>Transfer Time</th>
                                <th>Delivery Method</th>
                                <th>Delivery Address</th>
                                <th>Status</th>
                                <th>Cancel Reason</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($transactions as $transaction)
                                <tr>
                                    <td>{{ $transaction->created_at->format('d-m-Y H:i') }}</td>
                                    <td>{{ $transaction->currency ?? '-' }}</td>
                                    <td style="text-align: right;">{{ number_format($transaction->amount, 2, ',', '.') }}
                                    </td>
                                    <td style="text-align: right;">{{ number_format($transaction->kurs, 2, ',', '.') }}
                                    </td>
                                    <td style="text-align: right;">
                                        {{ number_format($transaction->total_received, 2, ',', '.') }} </td>
                                    <td style="text-align: right;">
                                        {{ number_format($transaction->shipping_cost, 2, ',', '.') }} </td>
                                    @php $total_amount = $transaction->total_received + $transaction->shipping_cost @endphp
                                    @if ($transaction->shipping_cost === null && $transaction->delivery_method === 'delivery')
                                        <td>Waiting</td>
                                    @else
                                        <td style="text-align: right;">{{ number_format($total_amount, 2, ',', '.') }}
                                        </td>
                                    @endif
                                    <td>{{ $transaction->transferAccount->bank_name . ' - ' . $transaction->transferAccount->rekening . ' - ' . $transaction->transferAccount->nama_rekening }}
                                    </td>
                                    <td>{{ $transaction->transfer_time }}</td>
                                    <td>{{ $transaction->delivery_method }}</td>
                                    <td style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
                                        data-bs-toggle="tooltip" data-bs-placement="bottom"
                                        title="{{ $transaction->delivery_address }}">
                                        {{ Str::limit($transaction->delivery_address, 30, '...') }}
                                    </td>


                                    @php
                                        $statusDisplay = $transaction->status;

                                        if ($transaction->status == 'processing') {
                                            if ($transaction->transfer_proof) {
                                                $statusDisplay = 'waiting confirmation';
                                            } else {
                                                $statusDisplay = 'waiting payment';
                                            }
                                        }
                                    @endphp

                                    <td>{{ ucfirst($statusDisplay) }}</td>

                                    <td>{{ ucfirst($transaction->cancel_reason ?? ' - ') }}</td>
                                    <td>
                                        @if ($transaction->status == 'completed')
                                            <!-- Button Lihat Bukti Transfer -->
                                            <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal"
                                                data-bs-target="#proofModal-{{ $transaction->id }}">
                                                <i class="fas fa-eye"></i>
                                            </button>

                                            <!-- Button Print Invoice -->
                                            <button class="btn btn-warning btn-sm"
                                                onclick="printInvoice({{ $transaction->id }})">
                                                <i class="fas fa-print"></i> Print Invoice
                                            </button>
                                        @endif

                                        @if ($transaction->status == 'pending')
                                            <!-- Button Menunggu Proses -->
                                            <button type="button" class="btn btn-info btn-sm">
                                                <i class="fas fa-sync-alt fa-spin"></i> Waiting Process
                                            </button>

                                            <!-- Form Cancel -->
                                            <form id="reject-form-{{ $transaction->id }}"
                                                action="{{ route('transactions.cancel', $transaction->id) }}"
                                                method="POST" class="d-inline">
                                                @csrf
                                                @method('PATCH') <!-- Pakai PATCH karena kita update status -->
                                                <input type="hidden" name="status" value="cancel">

                                                <button type="button" class="btn btn-danger btn-sm cancel-btn"
                                                    data-transaction-id="{{ $transaction->id }}">
                                                    <i class="fas fa-times-circle"></i> Cancel
                                                </button>
                                            </form>
                                        @endif

                                        @if ($transaction->status == 'processing')
                                            @if ($transaction->transfer_proof)
                                                <!-- Button untuk melihat bukti transfer -->
                                                <button type="button" class="btn btn-success btn-sm"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#proofModal-{{ $transaction->id }}">
                                                    <i class="fas fa-eye"></i>
                                                </button>

                                                <button type="button" class="btn btn-info btn-sm">
                                                    <i class="fas fa-sync-alt fa-spin"></i> Waiting Confirmation
                                                </button>
                                            @else
                                                <!-- Button Upload Bukti Transfer -->
                                                <button type="button" class="btn btn-primary btn-sm"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#uploadModal-{{ $transaction->id }}">
                                                    <i class="fas fa-upload"></i> Upload Bukti Transfer
                                                </button>
                                            @endif



                                            <!-- Modal Upload Bukti Transfer -->
                                            <div class="modal fade" id="uploadModal-{{ $transaction->id }}"
                                                tabindex="-1" aria-labelledby="uploadModalLabel-{{ $transaction->id }}"
                                                aria-hidden="true">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title"
                                                                id="uploadModalLabel-{{ $transaction->id }}">
                                                                Upload Proof of Transfer
                                                            </h5>
                                                            <button type="button" class="btn-close"
                                                                data-bs-dismiss="modal" aria-label="Close"></button>
                                                        </div>
                                                        <form
                                                            action="{{ route('sales.uploadTransferProof', $transaction->id) }}"
                                                            method="POST" enctype="multipart/form-data">
                                                            @csrf
                                                            <div class="modal-body">
                                                                <div class="mb-3">
                                                                    <label for="proof" class="form-label">Select
                                                                        Transfer Proof File <span
                                                                            class="text-danger">*</span></label>
                                                                    <input type="file" class="form-control"
                                                                        name="proof" required>
                                                                    <small class="text-muted">Images only (JPG, PNG,
                                                                        JPEG,GIF), max 2MB.</small>
                                                                </div>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-secondary"
                                                                    data-bs-dismiss="modal">Batal</button>
                                                                <button type="submit"
                                                                    class="btn btn-primary">Upload</button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif

                                        <!-- Modal untuk menampilkan bukti transfer -->
                                        <div class="modal fade" id="proofModal-{{ $transaction->id }}" tabindex="-1"
                                            aria-labelledby="proofModalLabel-{{ $transaction->id }}" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title"
                                                            id="proofModalLabel-{{ $transaction->id }}">Proof of Transfer
                                                        </h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                            aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body text-center">
                                                        <img src="{{ asset($transaction->transfer_proof) }}"
                                                            alt="Proof of Transfer" class="img-fluid rounded shadow">
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">Tutup</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </td>


                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
    @endif

    <button class="chat-button" data-bs-toggle="modal" data-bs-target="#chatModal">
        <i class="fas fa-comment"></i>
    </button>

    < <div class="modal fade" id="chatModal" tabindex="-1" aria-labelledby="chatModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="chatModalLabel">Chat dengan Kami</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Pilih platform chat yang ingin Anda gunakan:</p>
                    <a href="https://wa.me/6281234567890" class="whatsapp" target="_blank">
                        <i class="fa-brands fa-whatsapp"></i> WhatsApp
                    </a>
                    <a href="https://t.me/username" class="telegram" target="_blank">
                        <i class="fa-brands fa-telegram"></i> Telegram
                    </a>
                    <a href="mailto:support@example.com" class="email">
                        <i class="fa-solid fa-envelope"></i> Email
                    </a>
                </div>
            </div>
        </div>
        </div>

        @if (session('success'))
            @push('scripts')
                <script>
                    Swal.fire({
                        title: "{{ session('success') }}",
                        icon: "success",
                        draggable: true,
                        timer: 1500,
                        showConfirmButton: false
                    });
                </script>
            @endpush
        @endif
        @if (session('error'))
            @push('scripts')
                <script>
                    Swal.fire({
                        title: "{{ session('error') }}",
                        icon: "error",
                        draggable: true,
                        timer: 1500,
                        showConfirmButton: false
                    });
                </script>
            @endpush
        @endif

        <script>
            function printInvoice(transactionId) {
                window.open('/invoice/' + transactionId, '_blank');
            }
        </script>

        <script>
            document.getElementById('deliveryMethod').addEventListener('change', function() {
                var addressContainer = document.getElementById('deliveryAddressContainer');
                if (this.value === 'delivery') {
                    addressContainer.style.display = 'block';
                } else {
                    addressContainer.style.display = 'none';
                }
            });

            document.addEventListener("DOMContentLoaded", function() {
                document.querySelectorAll(".cancel-btn").forEach(button => {
                    button.addEventListener("click", function() {
                        let transactionId = this.getAttribute(
                            "data-transaction-id"); // Get transaction ID
                        let form = document.getElementById(`reject-form-${transactionId}`); // Get form

                        Swal.fire({
                            title: "Cancel Confirmation",
                            text: "Are you sure you want to cancel this transaction?",
                            icon: "warning",
                            showCancelButton: true,
                            confirmButtonColor: "#d33",
                            cancelButtonColor: "#3085d6",
                            confirmButtonText: "Yes, Cancel!",
                            cancelButtonText: "No, Keep It"
                        }).then((result) => {
                            if (result.isConfirmed) {
                                form.submit(); // Submit the form directly
                            }
                        });
                    });
                });
            });


            document.addEventListener("DOMContentLoaded", function() {
                let transferTimeSelect = document.getElementById("transferTime");

                function updateTimeOptions() {
                    let now = new Date();
                    let currentHour = now.getHours();
                    let currentMinute = now.getMinutes();

                    transferTimeSelect.innerHTML = ""; // Reset options

                    for (let hour = currentHour; hour <= 23; hour++) {
                        for (let minute = 0; minute < 60; minute += 30) { // Tiap 30 menit
                            if (hour === currentHour && minute < currentMinute) {
                                continue; // Lewati menit sebelum sekarang
                            }

                            let hourStr = hour.toString().padStart(2, '0');
                            let minuteStr = minute.toString().padStart(2, '0');
                            let timeValue = `${hourStr}:${minuteStr}`;

                            let option = document.createElement("option");
                            option.value = timeValue;
                            option.textContent = timeValue;
                            transferTimeSelect.appendChild(option);
                        }
                    }
                }

                updateTimeOptions();
            });
        </script>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                // Fungsi untuk mengambil cookie berdasarkan nama
                function getCookie(name) {
                    let cookieArr = document.cookie.split(";");
                    for (let i = 0; i < cookieArr.length; i++) {
                        let cookiePair = cookieArr[i].split("=");
                        if (name === cookiePair[0].trim()) {
                            return decodeURIComponent(cookiePair[1]);
                        }
                    }
                    return null;
                }

                // Fungsi untuk menyimpan cookie
                function setCookie(name, value, days) {
                    let expires = "";
                    if (days) {
                        const date = new Date();
                        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
                        expires = "; expires=" + date.toUTCString();
                    }
                    document.cookie = name + "=" + (value || "") + expires + "; path=/";
                    console.log("Cookie '" + name + "' disimpan dengan value:", value);
                }

                // Fungsi untuk menghapus cookie
                function eraseCookie(name) {
                    document.cookie = name + '=; Max-Age=-99999999; path=/';
                    console.log("Cookie '" + name + "' telah dihapus.");
                }



                // Fungsi untuk update rate dari tombol yang aktif (menggunakan nilai asli dari atribut data)
                function updateRatesFromActiveButton() {
                    let activeButton = document.querySelector(".currency-button.active");
                    if (!activeButton) {
                        console.error("Tidak ada tombol mata uang yang aktif.");
                        return;
                    }
                    let buyRate = parseFloat(activeButton.getAttribute("data-buy"));
                    let sellRate = parseFloat(activeButton.getAttribute("data-sell"));

                    // Update tampilan rate
                    document.getElementById("buyRate").textContent = buyRate.toLocaleString();
                    document.getElementById("sellRate").textContent = sellRate.toLocaleString();

                    // Hitung total amount berdasarkan sell rate
                    let amount = parseFloat(document.getElementById("amount").value) || 0;
                    // Untuk approxAmount (Total Sell):
                    let calculatedSellTotal = amount * sellRate;
                    let finalSellTotal = Math.ceil(calculatedSellTotal); // Ini yang Anda butuhkan
                    document.getElementById("approxAmount").textContent = finalSellTotal.toLocaleString('id-ID', {
                        minimumFractionDigits: 0,
                        maximumFractionDigits: 0
                    }) + " IDR";

                    // Untuk TotalBuy:
                    let calculatedBuyTotal = amount * buyRate;
                    let finalBuyTotal = Math.ceil(calculatedBuyTotal); // Ini yang Anda butuhkan
                    document.getElementById("TotalBuy").textContent = finalBuyTotal.toLocaleString('id-ID', {
                        minimumFractionDigits: 0,
                        maximumFractionDigits: 0
                    }) + " IDR";


                    console.log("Rates diupdate dari tombol aktif:", {
                        buy: buyRate,
                        sell: sellRate,
                        total: amount * sellRate
                    });
                }

                // Saat halaman termuat, periksa cookie dan set nilai form serta tombol aktif jika ada
                const dataGuestStr = getCookie("dataGuest");
                if (dataGuestStr) {
                    console.log("Cookie 'dataGuest' ditemukan:", dataGuestStr);
                    const dataGuest = JSON.parse(dataGuestStr);

                    // Isi form dengan data dari cookie
                    if (document.getElementById("exchange_rates_id"))
                        document.getElementById("exchange_rates_id").value = dataGuest.exchange_rates_id;
                    if (document.getElementById("currency_pair"))
                        document.getElementById("currency_pair").value = dataGuest.currency_pair;
                    if (document.getElementById("amount"))
                        document.getElementById("amount").value = dataGuest.amount;

                    // Cari dan aktifkan tombol yang sesuai dengan currency dari cookie
                    const currencyButtons = document.querySelectorAll(".currency-button");
                    let activeFound = false;
                    currencyButtons.forEach(button => {
                        if (button.getAttribute("data-pair") === dataGuest.currency_pair) {
                            button.classList.add("active");
                            console.log("Tombol dengan data-pair", dataGuest.currency_pair, "diaktifkan.");
                            activeFound = true;
                        } else {
                            button.classList.remove("active");
                        }
                    });
                    // Jika tidak ditemukan tombol yang cocok, aktifkan tombol default (misalnya tombol pertama)
                    if (!activeFound && currencyButtons.length > 0) {
                        currencyButtons[0].classList.add("active");
                    }
                    updateRatesFromActiveButton();
                } else {
                    console.log("Cookie 'dataGuest' tidak ditemukan.");
                    // Jika cookie tidak ada, aktifkan tombol default (misalnya tombol pertama)
                    const defaultButton = document.querySelector(".currency-button");
                    if (defaultButton) {
                        defaultButton.classList.add("active");
                    }
                    updateRatesFromActiveButton();
                }

                // Event listener untuk tombol loginAlertBtn (jika user belum login)
                document.getElementById("loginAlertBtn")?.addEventListener("click", function() {
                    const exchangeRatesId = document.getElementById('exchange_rates_id').value;
                    const currencyPair = document.getElementById('currency_pair').value;
                    const amount = document.getElementById('amount').value;

                    const dataGuest = {
                        exchange_rates_id: exchangeRatesId,
                        currency_pair: currencyPair,
                        amount: amount
                    };

                    // Simpan data guest ke cookie selama 1 hari
                    setCookie('dataGuest', JSON.stringify(dataGuest), 1);
                    console.log("Data guest disimpan:", dataGuest);

                    Swal.fire({
                        title: "You need to login first!",
                        text: "Please login to make a transaction.",
                        icon: "warning",
                        showCancelButton: true,
                        confirmButtonText: "Login",
                        cancelButtonText: "Cancel"
                    }).then((result) => {
                        if (result.isConfirmed) {
                            // Jika perlu, hapus cookie setelah login

                            window.location.href = "/login";
                        }
                    });
                });

                document.getElementById("placeOrderBtn")?.addEventListener("click", function() {
                    eraseCookie('dataGuest');
                });



                // Event listener untuk tombol currency: ketika diklik, update form dan tampilan rate
                document.querySelectorAll(".currency-button").forEach(button => {
                    button.addEventListener("click", function() {
                        // Hapus active state dari semua tombol lalu tambahkan ke tombol yang diklik
                        document.querySelectorAll(".currency-button").forEach(b => b
                            .classList.remove(
                                "active"));
                        this.classList.add("active");

                        let buyRate = parseFloat(this.getAttribute("data-buy"));
                        let sellRate = parseFloat(this.getAttribute("data-sell"));
                        let currencyId = this.getAttribute("data-id");
                        let currencyPair = this.getAttribute("data-pair");

                        document.getElementById("currency_pair").value = currencyPair;
                        document.getElementById("exchange_rates_id").value = currencyId;

                        // Update tampilan rate menggunakan nilai asli dari tombol
                        document.getElementById("buyRate").textContent = buyRate
                            .toLocaleString();
                        document.getElementById("sellRate").textContent = sellRate
                            .toLocaleString();

                        let amount = parseFloat(document.getElementById("amount").value) ||
                            0;
                        // Untuk approxAmount (Total Sell):
                        let calculatedSellTotal = amount * sellRate;
                        let finalSellTotal = Math.ceil(calculatedSellTotal);
                        document.getElementById("approxAmount").textContent = finalSellTotal.toLocaleString('id-ID', {
                            minimumFractionDigits: 0,
                            maximumFractionDigits: 0
                        }) + " IDR";

                        // Untuk TotalBuy:
                        let calculatedBuyTotal = amount * buyRate;
                        let finalBuyTotal = Math.ceil(calculatedBuyTotal);
                        document.getElementById("TotalBuy").textContent = finalBuyTotal.toLocaleString('id-ID', {
                            minimumFractionDigits: 0,
                            maximumFractionDigits: 0
                        }) + " IDR";
                    });
                });

                // Event listener untuk input amount agar total langsung dihitung secara real-time
                document.getElementById("amount").addEventListener("input", function() {
                    let activeButton = document.querySelector(".currency-button.active");
                    if (activeButton) {
                        let sellRate = parseFloat(activeButton.getAttribute("data-sell"));
                        let buyRate = parseFloat(activeButton.getAttribute("data-buy"));
                        let amount = parseFloat(this.value) || 0;
                        // Untuk approxAmount (Total Sell):
                        let calculatedSellTotal = amount * sellRate;
                        let finalSellTotal = Math.ceil(calculatedSellTotal);
                        document.getElementById("approxAmount").textContent = finalSellTotal.toLocaleString('id-ID', {
                            minimumFractionDigits: 0,
                            maximumFractionDigits: 0
                        }) + " IDR";

                        // Untuk TotalBuy:
                        let calculatedBuyTotal = amount * buyRate;
                        let finalBuyTotal = Math.ceil(calculatedBuyTotal);
                        document.getElementById("TotalBuy").textContent = finalBuyTotal.toLocaleString('id-ID', {
                            minimumFractionDigits: 0,
                            maximumFractionDigits: 0
                        }) + " IDR";
                    }
                });

                $("#exchangeForm").submit(function(e) {
                    e.preventDefault();


                    let amount = $("#amount").val();
                    let currencyPair = $("#currency_pair").val();
                    let exchange_rates_id = $("#exchange_rates_id").val();
                    let buyRate = parseFloat($("#buyRate").text().replace(/,/g, ""));
                    // let sellRate = parseFloat($("#sellRate").text().replace(/\./g, ""));

                    let sellRate = $("#sellRate").text(); // Ambil teksnya dulu, misal "16.500,75"

                    // 1. Hapus semua titik (pemisah ribuan)
                    sellRate = sellRate.replace(/\./g, ""); // Hasil: "16500,75"

                    // 2. Ganti koma dengan titik (pemisah desimal yang dikenali parseFloat)
                    sellRate = sellRate.replace(/,/g, "."); // Hasil: "16500.75"
                    console.log(sellRate);

                    let total_received = amount * sellRate;

                    let transferTo = $("#transferTo").val();
                    let transferTime = $("#transferTime").val();
                    let deliveryMethod = $("#deliveryMethod").val();

                    let bankName = $("#bank_name").val();
                    let noRekening = $("#rekening").val();
                    let namaRekening = $("#nama_rekening").val();
                    let deliveryAddress = $("#deliveryAddress").val();

                    console.log({
                        deliveryAddress
                    })

                    if (!exchange_rates_id) {
                        Swal.fire("Error", "Please select a currency!", "error");
                        return;
                    }

                    // Konfirmasi sebelum submit
                    Swal.fire({
                        title: "Confirm Exchange",
                        // text: `Exchanging ${amount} will give you around ${total_received.toFixed(2)} IDR.`,

                        icon: "warning",
                        showCancelButton: true,
                        confirmButtonText: "Yes, submit!",
                        cancelButtonText: "Cancel"
                    }).then((result) => {
                        if (result.isConfirmed) {
                            console.log({
                                _token: "{{ csrf_token() }}",
                                amount: amount,
                                kurs: sellRate,
                                exchange_rates_id: exchange_rates_id,
                                buy_rate: buyRate,
                                sell_rate: sellRate,
                                currency: currencyPair,
                                bank_name: bankName,
                                rekening: noRekening,
                                account_name: namaRekening,
                                total_received: total_received.toFixed(2),
                                deliveryMethod: deliveryMethod


                            });

                            // Jika user menekan "Yes, submit!"
                            $.ajax({
                                url: "{{ route('transactions.store') }}",
                                type: "POST",
                                data: {
                                    _token: "{{ csrf_token() }}",
                                    amount: amount,
                                    kurs: sellRate,
                                    exchange_rates_id: exchange_rates_id,
                                    currency: currencyPair,
                                    buy_rate: buyRate,
                                    sell_rate: sellRate,
                                    total_received: total_received.toFixed(2),
                                    transferTo: transferTo,
                                    transferTime: transferTime,
                                    deliveryMethod: deliveryMethod,
                                    bank_name: bankName,
                                    rekening: noRekening,
                                    account_name: namaRekening,
                                    delivery_address: deliveryAddress
                                },


                                success: function(response) {
                                    Swal.fire({
                                        title: "Success!",
                                        text: response.message,
                                        icon: "success",
                                        confirmButtonText: "OK"
                                    }).then(() => {
                                        location
                                            .reload(); // REFRESH HALAMAN
                                    });
                                },
                                error: function(xhr) {
                                    console.log(xhr);

                                    if (xhr.status === 401) {
                                        Swal.fire({
                                            title: "You need to login first!",
                                            text: "Please login to make a transaction.",
                                            icon: "warning",
                                            showCancelButton: true,
                                            confirmButtonText: "Login",
                                            cancelButtonText: "Cancel"
                                        }).then((result) => {
                                            if (result.isConfirmed) {
                                                window.location.href =
                                                    "{{ route('login') }}";
                                            }
                                        });
                                    } else {
                                        Swal.fire("Error",
                                            "Something went wrong. Try again!",
                                            "error");
                                    }
                                }
                            });
                        }
                    });
                });


            });
        </script>

        {{-- <script src="{{ asset('js/sales_page.js') }}"></script> --}}

        <style>
            /* Background utama */
            body {
                background-color: #f5f5f5;
            }

            /* Hero Section */
            .hero {
                background-color: #f5f5f5;
                color: black;
            }

            /* Currency Button Styling */
            .currency-button {
                border-color: #ff9f43;
                color: #ff9f43;
            }

            .currency-button.active,
            .currency-button:hover {
                background-color: #ff9f43 !important;
                color: white !important;
            }

            /* Button Warning (Primary Action) */
            .btn-warning {
                background-color: #ff9f43;
                border-color: #ff9f43;
            }

            .btn-warning:hover {
                background-color: #e6892d;
                border-color: #e6892d;
            }

            /* CTA Section */
            .cta {
                background-color: #ff9f43;
                color: white;
            }

            .exchange-rates {
                background-color: #f5f5f5;
            }

            .table-warning {
                background-color: #ff9f43 !important;
                color: black;
            }

            .table th,
            .table td {
                vertical-align: middle;
            }
        </style>
    @endsection