@extends('main')

@section('title', isset($exchangeRate) ? 'Edit Exchange Rate' : 'Add Exchange Rate')

@section('content')

    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4>Purchase Form Management</h4>
                <h6>{{ isset($exchangeRate) ? 'Edit Exchange Rate' : 'Add Exchange Rate' }}</h6>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <form action="{{ route('save-purchase') }}" method="POST">
                    @csrf

                    <div class="row">
                        {{-- Currency Pair --}}
                        <div class="col-lg-4 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Currency Pair</label>
                                <select name="currency_pair_id" id="currency_pair" class="form-control">
                                    <option value="">-- Select Currency Pair --</option>
                                    @foreach ($exchangeRates as $data)
                                        <option value="{{ $data->id }}" data-pair="{{ $data->currency_pair }}"
                                            {{ old('currency_pair') == $data->id ? 'selected' : '' }}>
                                            {{ ucfirst($data->currency_pair) }}
                                        </option>
                                    @endforeach
                                </select>
                                <input type="hidden" id="selected_currency_pair" name="currency_pair">
                                @error('currency_pair_id')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-lg-4 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Amount</label>
                                <input type="text" id="amount" name="amount" class="rate-input form-control"
                                    placeholder="Enter Amount" value="{{ old('amount') }}">
                                @error('amount')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        {{-- Buy Rate --}}
                        <div class="col-lg-4 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Buy Rate</label>
                                <input type="text" id="buy_rate" name="buy_rate" class="rate-input form-control"
                                    placeholder="Enter Buy Rate" value="{{ old('buy_rate') }}" readonly>
                            </div>
                        </div>

                        {{-- Sell Rate --}}
                        {{-- <div class="col-lg-4 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Sell Rate</label>
                                <input type="text" id="sell_rate" name="sell_rate" class="rate-input form-control"
                                    placeholder="Enter Sell Rate" value="{{ old('sell_rate') }}" readonly>
                            </div>
                        </div> --}}

                        {{-- Amount --}}


                        {{-- Total Amount (Auto-Calculate) --}}
                        <div class="col-lg-8 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Total Amount Received</label>
                                <input type="text" id="total_amount" class="rate-input form-control"
                                    placeholder="Total Amount" value="{{ old('total_amount') }}" readonly>
                                <input type="hidden" id="total_amount_hidden" name="total_amount"
                                    value="{{ old('total_amount') }}">
                            </div>
                        </div>

                        {{-- Created By (Read-Only) --}}
                        <div class="col-lg-4 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Created By</label>
                                <input type="text" name="create_who" value="{{ auth()->user()->name }}"
                                    class="form-control" readonly>
                            </div>
                        </div>

                        {{-- Pilih Customer --}}
                    </div>
                    <div class="row">


                        <div class="col-lg-4 col-sm-6 col-12">
                            <div class="form-group">
                                <label for="customer">Pilih Customer</label>
                                <select id="customer" name="customer" class="form-control form-small select">
                                    <option value="">-- Pilih Customer --</option>
                                    <option value="one_time" {{ old('customer') == 'one_time' ? 'selected' : '' }}>One Time
                                        Customer</option>
                                    @foreach ($customers as $customer)
                                        <option value="{{ $customer->id }}"
                                            {{ old('customer') == $customer->id ? 'selected' : '' }}>

                                            {{ $customer->name . ' - ' . $customer->phone }}
                                        </option>
                                    @endforeach
                                </select>

                                @error('customer')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        {{-- Nama Customer --}}
                        <div class="col-lg-4 col-sm-6 col-12">
                            <div class="form-group">
                                <label for="customer_name">Nama Customer</label>
                                <input type="text" id="customer_name" name="customer_name" class="form-control"
                                    value="{{ old('customer_name') }}">
                                @error('customer_name')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        {{-- No. Telepon --}}
                        <div class="col-lg-4 col-sm-6 col-12">
                            <div class="form-group">
                                <label for="customer_phone">No. Telepon</label>
                                <input type="text" id="customer_phone" name="customer_phone" class="form-control"
                                    value="{{ old('customer_phone') }}">
                                @error('customer_phone')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        {{-- Submit & Cancel Buttons --}}
                        <div class="col-lg-12">
                            <button type="submit" class="btn btn-submit me-2">Submit</button>
                            <a href="{{ route('transactions.purchase') }}" class="btn btn-cancel">Cancel</a>
                        </div>
                    </div> {{-- End of row --}}
                </form>
            </div>
        </div>
    </div>


@endsection

@push('styles')
    <style>
        .rate-input {
            -webkit-appearance: none;
            -moz-appearance: textfield;
            appearance: textfield;
            text-align: right;
        }

        .rate-input::-webkit-outer-spin-button,
        .rate-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    </style>
@endpush


@push('scripts')



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

    @if (session('success'))
        <script>
            Swal.fire({
                title: "{{ session('success') }}",
                icon: "success",
                draggable: true,
                timer: 1500,
                showConfirmButton: false
            });
        </script>
    @endif
    <script>
        $(document).ready(function() {

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

                // Ambil nama currency pair dari data-pair
                let currencyPair = selectedOption.data("pair");

                // Set nilai ke input hidden
                $("#selected_currency_pair").val(currencyPair);

                console.log("Selected Currency Pair:", currencyPair);
            });

            $('#customer').on('change', function() {
                let customerId = $(this).val();
                let nameField = $('#customer_name');
                let phoneField = $('#customer_phone');

                console.log('Customer ID:', customerId);
                if (customerId === "one_time") {
                    nameField.val("One Time Customer");
                    phoneField.val("000000000");
                } else if (customerId !== "") {
                    $.ajax({
                        url: "{{ route('get-customer') }}",
                        type: "GET",
                        data: {
                            id: customerId
                        },
                        success: function(response) {
                            if (response.success) {
                                nameField.val(response.name);
                                phoneField.val(response.phone);
                            } else {
                                nameField.val('');
                                phoneField.val('');
                            }
                        }
                    });
                } else {
                    nameField.val("");
                    phoneField.val("");
                }
            });
        });

        $(document).ready(function() {
            // Ambil buy_rate & sell_rate ketika currency_pair dipilih
            $('#currency_pair').on('change', function() {
                let currencyId = $(this).val();
                if (currencyId) {
                    $.ajax({
                        url: "{{ route('get-exchange-rate') }}",
                        type: "GET",
                        data: {
                            id: currencyId
                        },
                        success: function(response) {
                            if (response.success) {
                                $('#buy_rate').val(response.buy_rate);
                                $('#sell_rate').val(response.sell_rate);
                            } else {
                                $('#buy_rate').val('');
                                $('#sell_rate').val('');
                            }
                        }
                    });
                } else {
                    $('#buy_rate').val('');
                    $('#sell_rate').val('');
                }
            });

            // Hitung total amount otomatis
            $('#amount').on('input', function() {
                let amount = parseFloat($(this).val().replace(/\./g, '').replace(',', '.')) || 0;
                let buyRate = parseFloat($('#buy_rate').val().replace(/\./g, '').replace(',', '.')) || 0;

                if (amount > 0 && buyRate > 0) {
                    let total = amount * buyRate;
                    $('#total_amount').val(total.toLocaleString('id-ID', {
                        minimumFractionDigits: 2
                    }));
                    $('#total_amount_hidden').val(total); // Simpan nilai asli di hidden input
                } else {
                    $('#total_amount').val('');
                    $('#total_amount_hidden').val('');
                }
            });
        });
    </script>
@endpush