@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <button class="btn btn-secondary mb-0" onclick="history.back()">
                            <i class="fas fa-circle-left me-1"></i> Kembali
                        </button>
                        @if ($authorize->add == '1')
                            <button class="btn btn-primary mb-0" onclick="event.preventDefault(); validateAndSubmit(this);">
                                <i class="fas fa-floppy-disk me-1"></i> Simpan
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form">
                    @csrf
                    {{-- Referensi API Card --}}
                    <div class="card mb-3">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <div>
                                    <h6 class="mb-0">Ambil Referensi dari API</h6>
                                    <p class="text-xs mb-0 text-secondary">Pilih mata uang di bawah, sistem akan otomatis
                                        mengisi Kurs API.</p>
                                </div>
                                <button type="button" class="btn btn-success btn-sm mb-0" id="btn_fetch_api">
                                    <i class="fas fa-satellite-dish me-1"></i> Tarik / Refresh API
                                </button>
                            </div>
                            <span id="api_status" class="text-xs text-secondary">Status: Belum ditarik.</span>
                        </div>
                    </div>

                    {{-- Form Card --}}
                    <div class="card">
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Insert {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label for="timestamp" class="form-control-label">
                                            Periode
                                        </label>

                                        <input type="date" class="form-control" name="timestamp" id="timestamp"
                                            value="{{ old('timestamp') }}" required>

                                        @error('timestamp')
                                            <p class="text-danger text-xs pt-1">
                                                {{ $message }}
                                            </p>
                                        @enderror
                                    </div>

                                    {{-- MATA UANG --}}
                                    <div class="form-group mb-3">
                                        <label class="form-control-label">
                                            Mata Uang
                                        </label>

                                        @if (!empty($kursRef))
                                            {{-- DARI HALAMAN SHOW --}}
                                            <input type="text" class="form-control"
                                                value="{{ $kursRef->kode }} - {{ $kursRef->nama }}" readonly
                                                style="background-color: #e9ecef;">

                                            <input type="hidden" name="kode" id="kode_hidden"
                                                value="{{ $kursRef->kode }}">

                                            <input type="hidden" name="nama" id="nama_input"
                                                value="{{ $kursRef->nama }}">
                                        @else
                                            {{-- DARI HALAMAN LIST --}}
                                            <select class="form-select" name="kode" id="kode_select" required>
                                                <option value="">
                                                    -- Pilih Mata Uang --
                                                </option>
                                            </select>
                                            <input type="hidden" name="nama" id="nama_input"
                                                value="{{ old('nama') }}">
                                        @endif
                                        @error('kode')
                                            <p class="text-danger text-xs pt-1">
                                                {{ $message }}
                                            </p>
                                        @enderror
                                    </div>

                                    {{-- MATA UANG LAWAN --}}
                                    <div class="form-group mb-3">
                                        <label class="form-control-label">
                                            Mata Uang Lawan
                                        </label>

                                        @if (!empty($kursRef))
                                            {{-- DARI HALAMAN SHOW --}}
                                            <input type="text" class="form-control" value="{{ $kursRef->kode_lawan }}"
                                                readonly style="background-color: #e9ecef;">

                                            <input type="hidden" name="kode_lawan" id="kode_lawan_hidden"
                                                value="{{ $kursRef->kode_lawan }}">
                                        @else
                                            {{-- DARI HALAMAN LIST --}}
                                            <select class="form-select" name="kode_lawan" id="kode_lawan_select" required>

                                                <option value="">
                                                    -- Pilih Lawan --
                                                </option>
                                            </select>
                                        @endif

                                        <p class="text-secondary text-xs pt-1 px-1">
                                            Mata uang tujuan konversi (default: IDR).
                                        </p>

                                        @error('kode_lawan')
                                            <p class="text-danger text-xs pt-1">
                                                {{ $message }}
                                            </p>
                                        @enderror
                                    </div>

                                    {{-- KURS API --}}
                                    <div class="form-group mb-3">
                                        <label class="form-control-label">
                                            Kurs API (Referensi)
                                        </label>

                                        <input class="form-control" type="number" step="0.01" name="kurs_api"
                                            id="kurs_api_input" value="{{ old('kurs_api', 0) }}" required readonly
                                            style="background-color: #e9ecef;">

                                        <p class="text-secondary text-xs pt-1 px-1">
                                            Terisi otomatis dari API.
                                        </p>
                                    </div>

                                    {{-- KURS MANUAL --}}
                                    <div class="form-group mb-3">
                                        <label class="form-control-label">
                                            Kurs Manual (Untuk Pembukuan)
                                        </label>

                                        <input class="form-control" type="number" step="0.01" name="nilai"
                                            id="nilai_input" value="{{ old('nilai', 0) }}" required>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        function getKode() {
            if ($('#kode_select').length) {
                return $('#kode_select').val();
            }

            return $('#kode_hidden').val();
        }

        function getKodeLawan() {
            if ($('#kode_lawan_select').length) {
                return $('#kode_lawan_select').val();
            }

            return $('#kode_lawan_hidden').val();
        }

        let apiData = [];
        let allCurrencies = [];

        $(document).ready(function() {
            $('#kode_select, #kode_lawan_select').select2({
                width: '100%'
            });
            fetchApiData();
            $('#btn_fetch_api').click(function() {
                fetchApiData();
            });
            $('#kode_select, #kode_lawan_select').change(function() {
                computeRate();
            });
        });

        function fetchApiData() {
            let btn = $('#btn_fetch_api');
            btn.html('<i class="fas fa-spinner fa-spin me-1"></i> Menarik Data...').prop('disabled', true);
            $('#api_status').html('<span class="text-info">Sedang mengambil data...</span>');

            $.ajax({
                url: '{{ url('/mskurs/api/fetchKurs') }}',
                type: 'GET',
                data: {
                    base: 'IDR'
                },
                timeout: 15000,
                success: function(response) {
                    if (response.status === 'success') {
                        apiData = response.data;
                        allCurrencies = [{
                            kode: 'IDR',
                            nama: 'Rupiah Indonesia',
                            nilai: 1
                        }];
                        apiData.forEach(function(item) {
                            allCurrencies.push(item);
                        });

                        $('#api_status').html(
                            '<span class="text-success"><i class="fas fa-check-circle"></i> Berhasil! ' +
                            apiData.length + ' mata uang dimuat dari ' + (response.source || 'API') +
                            '.</span>');

                        populateDropdowns();
                    } else {
                        $('#api_status').html(
                            '<span class="text-danger"><i class="fas fa-times-circle"></i> Gagal: ' + (
                                response.error || 'Unknown') + '</span>');
                    }
                },
                error: function() {
                    $('#api_status').html(
                        '<span class="text-danger"><i class="fas fa-times-circle"></i> Terjadi kesalahan jaringan / server.</span>'
                    );
                },
                complete: function() {
                    btn.html('<i class="fas fa-satellite-dish me-1"></i> Tarik / Refresh API').prop('disabled',
                        false);
                }
            });
        }

        function populateDropdowns() {
            const kodeSelect = $('#kode_select');
            const lawanSelect = $('#kode_lawan_select');

            /*
             * Kalau dari halaman show, dropdown tidak ada.
             * Yang tersedia hanya hidden input.
             */
            if (!kodeSelect.length || !lawanSelect.length) {
                computeRate();
                return;
            }

            const currentKode = kodeSelect.val();
            const currentLawan = lawanSelect.val();

            kodeSelect
                .find('option:not(:first)')
                .remove();

            lawanSelect
                .find('option:not(:first)')
                .remove();

            allCurrencies.forEach(function(item) {
                const kodeOption = new Option(
                    item.kode + ' - ' + item.nama,
                    item.kode,
                    false,
                    false
                );

                const lawanOption = new Option(
                    item.kode + ' - ' + item.nama,
                    item.kode,
                    false,
                    false
                );

                kodeSelect.append(kodeOption);
                lawanSelect.append(lawanOption);
            });

            if (
                currentKode &&
                kodeSelect.find(
                    'option[value="' + currentKode + '"]'
                ).length
            ) {
                kodeSelect
                    .val(currentKode)
                    .trigger('change.select2');
            } else {
                kodeSelect
                    .val('')
                    .trigger('change.select2');
            }

            if (
                currentLawan &&
                lawanSelect.find(
                    'option[value="' + currentLawan + '"]'
                ).length
            ) {
                lawanSelect
                    .val(currentLawan)
                    .trigger('change.select2');
            } else {
                lawanSelect
                    .val('IDR')
                    .trigger('change.select2');
            }

            computeRate();
        }

        function validateAndSubmit(btn) {
            let kode = getKode();
            let lawan = getKodeLawan();
            let nilai = parseFloat($('#nilai_input').val());

            if (!kode) {
                Swal.fire(
                    'Peringatan',
                    'Pilih Mata Uang terlebih dahulu!',
                    'warning'
                );
                return;
            }

            if (!lawan) {
                Swal.fire(
                    'Peringatan',
                    'Pilih Mata Uang Lawan terlebih dahulu!',
                    'warning'
                );
                return;
            }

            if (kode === lawan) {
                Swal.fire(
                    'Peringatan',
                    'Mata Uang dan Mata Uang Lawan tidak boleh sama!',
                    'warning'
                );
                return;
            }

            if (!nilai || nilai <= 0) {
                Swal.fire(
                    'Peringatan',
                    'Kurs Manual harus diisi dan lebih dari 0!',
                    'warning'
                );
                return;
            }

            const form = document.getElementById('{{ $dmenu }}-form');
            const formData = new FormData(form);

            const $btn = $(btn);
            const originalHtml = $btn.html();

            $btn
                .prop('disabled', true)
                .html(
                    '<i class="fas fa-spinner fa-spin me-1"></i> Menyimpan...'
                );

            $.ajax({
                url: form.action,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,

                success: function(response) {
                    if (response.redirect) {
                        window.location.href = response.redirect;
                    }
                },

                error: function(xhr) {
                    let message = 'Terjadi kesalahan saat menyimpan data.';

                    if (xhr.responseJSON?.message) {
                        message = xhr.responseJSON.message;
                    }

                    if (
                        xhr.status === 422 &&
                        xhr.responseJSON?.errors
                    ) {
                        const errors = xhr.responseJSON.errors;
                        const firstError = Object.values(errors)[0];

                        if (firstError && firstError.length > 0) {
                            message = firstError[0];
                        }
                    }

                    Swal.fire({
                        icon: 'warning',
                        title: 'Tidak Dapat Disimpan',
                        text: message,
                        confirmButtonColor: '#00b7bd'
                    });
                },

                complete: function() {
                    $btn
                        .prop('disabled', false)
                        .html(originalHtml);
                }
            });
        }

        function computeRate() {
            let kode = getKode();
            let lawan = getKodeLawan();

            if (!kode || !lawan || kode === lawan) {
                $('#kurs_api_input').val(0);
                return;
            }

            let item = allCurrencies.find(x => x.kode === kode);
            if (item) {
                $('#nama_input').val(item.nama);
            }

            let kodeItem = apiData.find(x => x.kode === kode);
            let lawanItem = apiData.find(x => x.kode === lawan);

            let kodeInIDR = (kode === 'IDR') ? 1 : (kodeItem ? kodeItem.nilai : 0);
            let lawanInIDR = (lawan === 'IDR') ? 1 : (lawanItem ? lawanItem.nilai : 0);

            if (kodeInIDR > 0 && lawanInIDR > 0) {
                let rate = Math.round((kodeInIDR / lawanInIDR) * 100) / 100;
                $('#kurs_api_input').val(rate);
                $('#nilai_input').val(rate);
            } else {
                $('#kurs_api_input').val(0);
            }
        }
    </script>
@endpush

@push('js')
    @include('js.submit_loading')
@endpush