@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-4" id="exchange-rates">
        <div class="container">
            <h2 class="text-center mb-4">Today's Exchange Rates</h2>
            <p class="text-center text-muted">Updated every 5 minutes from international markets</p>
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="table-responsive">
                        <table class="table table-bordered text-center">
                            <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>
                                        <td>{{ number_format($currency->buy_rate, 0, ',', '.') }}</td>
                                        <td>{{ number_format($currency->sell_rate, 0, ',', '.') }}</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 d-flex justify-content-center gap-3">
                            @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 class="rate-box d-flex justify-content-between my-4 p-4 border rounded shadow-sm">
                            <div>
                                <p><strong>Buy Rate:</strong> <span id="buyRate">0</span></p>
                            </div>
                            <div>
                                <p><strong>Sell Rate:</strong> <span id="sellRate">0</span></p>
                            </div>
                            <div>
                                <p><strong>You'll Get (approx):</strong> <span id="approxAmount">0</span></p>
                            </div>
                        </div>

                        <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>

                        @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">
                <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>Transfer to</th>
                                <th>Transfer Time</th>
                                <th>Delivery Method</th>
                                <th>Status</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>{{ $transaction->transferAccount->bank_name . ' - ' . $transaction->transferAccount->rekening . ' - ' . $transaction->transferAccount->nama_rekening }}
                                    </td>
                                    <td>{{ $transaction->transfer_time }}</td>
                                    <td>{{ $transaction->delivery_method }}</td>
                                    <td>{{ ucfirst($transaction->status) }}</td>
                                    <td>
                                        @if ($transaction->status == 'pending')
                                            <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>
                                        @else
                                            <span>no action</span>
                                        @endif

                                    </td>

                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
    @endif
    @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>
        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() {
            // Cek apakah user sudah login atau belum
            document.getElementById("loginAlertBtn")?.addEventListener("click", function() {
                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 = "/login";
                    }
                });
            });

            let rates = {
                "USD/IDR": {
                    buy: 0,
                    sell: 0
                }
            };

            function updateRates(currency) {
                if (!rates[currency]) {
                    console.error("Currency data not found:", currency);
                    return;
                }

                let buyRate = rates[currency].buy;
                let sellRate = rates[currency].sell;

                document.getElementById("buyRate").textContent = buyRate.toLocaleString();
                document.getElementById("sellRate").textContent = sellRate.toLocaleString();

                let amount = parseFloat(document.getElementById("amount").value) || 0;
                document.getElementById("approxAmount").textContent = (amount * sellRate).toLocaleString() +
                    " IDR"; // Ganti buyRate -> sellRate
            }

            $("#transferTo").change(function() {
                let selectedOption = $(this).find(":selected");

                $("#bank_name").val(selectedOption.data("bank"));
                $("#rekening").val(selectedOption.data("rekening"));
                $("#nama_rekening").val(selectedOption.data("nama"));

            });


            document.querySelectorAll(".currency-button").forEach(button => {
                button.addEventListener("click", function() {
                    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("buyRate").textContent = buyRate.toLocaleString();
                    document.getElementById("sellRate").textContent = sellRate.toLocaleString();
                    document.getElementById("exchange_rates_id").value = currencyId;

                    let amount = parseFloat(document.getElementById("amount").value) || 0;
                    document.getElementById("approxAmount").textContent = (amount * sellRate)
                        .toLocaleString() + " IDR"; // Ganti buyRate -> sellRate
                });
            });

            document.getElementById("amount").addEventListener("input", function() {
                let activeButton = document.querySelector(".currency-button.active");
                if (activeButton) {
                    let sellRate = parseFloat(activeButton.getAttribute("data-sell")); // Ambil sellRate
                    let amount = parseFloat(this.value) || 0;
                    document.getElementById("approxAmount").textContent = (amount * sellRate)
                        .toLocaleString() + " IDR"; // Ganti buyRate -> sellRate
                }
            });

            updateRates("USD/IDR"); // Set default rates

            $("#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 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();

                console.log({
                    bankName,
                    noRekening,
                    namaRekening
                })

                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)

                        });

                        // 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
                            },


                            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>

    <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