@extends('customer')

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

@section('content')
    {{-- <br> --}}
    <!-- Hero Section -->


    @php
        $title = get_global_param('customer_sales_page_title');
        $subtitle = get_global_param('customer_sales_page_subtitle');

    @endphp

    <section class="hero text-center py-5">
        <div class="container">
            <h1 class="display-4 mb-3">{{ $title }}</h1>
            <p class="lead mb-4">{{ $subtitle }}</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 }}"
                                        data-minimum="{{ $currency->minimum_order }}">
                                        {{ $currency->currency_pair }}
                                    </button>
                                @endforeach
                            </div>
                        </div>

                        <div class="rate-box d-flex flex-column flex-md-row justify-content-md-between my-4 p-4 border rounded shadow-sm"
                            style="font-size: 20px;">
                            <div class="mb-3 mb-md-0">
                                <p><strong>Buy Rate:</strong> <span id="buyRate">0</span></p>
                            </div>
                            <div class="mb-3 mb-md-0">
                                <p><strong>Total Buy:</strong> <span id="TotalBuy">0</span></p>
                            </div>
                            <div class="mb-3 mb-md-0">
                                <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
                                    style="display: none;"></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;">
                                <h4 id="label-minimum"></h4>
                                <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>
                            <a href="#transaction-history" class="btn btn-secondary">Transaction History</a>
                        @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" id="transaction-history">
            <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>Payment Deadline</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>
                                        @if (
                                            $transaction->status === 'processing' &&
                                                $transaction->transfer_time == null &&
                                                $transaction->transfer_proof == null)
                                            <div id="payment-timer-{{ $transaction->id }}" class="payment-timer">
                                                <span class="minutes">--</span>:<span class="seconds">--</span>
                                            </div>
                                        @elseif($transaction->transfer_time !== null)
                                            <span class="text-muted">Payment Successful</span>
                                        @else
                                            <span class="text-muted">No Payment</span>
                                        @endif
                                    </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>