@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->edit == '1')
                            <button class="btn btn-primary mb-0"
                                onclick="event.preventDefault(); document.getElementById('{{ $dmenu }}-form').submit();">
                                <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 . '/' . encrypt($kursData->id_kurs)) }}"
                    id="{{ $dmenu }}-form">
                    @csrf @method('PUT')
                    {{-- 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">Klik "Tarik" untuk mengambil kurs terbaru dari
                                        API sebagai referensi.</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">
                                Edit {{ $title_menu }}
                                - {{ $kursData->kode }}
                                → {{ $kursData->kode_lawan }}
                            </p>

                            <hr class="horizontal dark mt-0">

                            <div class="row">
                                <div class="col-md-6">

                                    <div class="form-group mb-3">
                                        <label class="form-control-label">
                                            Kode Mata Uang
                                        </label>

                                        <input class="form-control" type="text" value="{{ $kursData->kode }}" readonly
                                            style="background-color: #e9ecef;">
                                    </div>

                                    <div class="form-group mb-3">
                                        <label class="form-control-label">
                                            Nama Mata Uang
                                        </label>

                                        <input class="form-control" type="text" id="nama_input"
                                            value="{{ $kursData->nama }}" readonly style="background-color: #e9ecef;">
                                    </div>

                                    <div class="form-group mb-3">
                                        <label class="form-control-label">
                                            Mata Uang Lawan
                                        </label>

                                        <input class="form-control" type="text" value="{{ $kursData->kode_lawan }}"
                                            readonly style="background-color: #e9ecef;">
                                    </div>

                                    <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', number_format($kursData->kurs_api, 2, '.', '')) }}"
                                            required readonly style="background-color: #e9ecef;">

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

                                    <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', number_format($kursData->nilai, 2, '.', '')) }}"
                                            required>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        $(document).ready(function() {
            fetchApiData(false);
            $('#btn_fetch_api').click(function() {
                fetchApiData(true);
            });
        });

        function fetchApiData(isManual) {
            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>');

            let kode = '{{ $kursData->kode }}';
            let lawan = '{{ $kursData->kode_lawan }}';

            $.ajax({
                url: '{{ url('/mskurs/api/fetchKurs') }}',
                type: 'GET',
                data: {
                    base: lawan
                },
                timeout: 15000,
                success: function(response) {
                    if (response.status === 'success') {
                        let apiData = response.data;
                        let item = apiData.find(x => x.kode === kode);
                        if (item) {
                            let rate = lawan === 'IDR' ?
                                item.nilai :
                                Math.round((1.0 / item.nilai) * 100) / 100;
                            fetchDirect(kode, lawan, isManual);
                            return;
                        } else {
                            $('#api_status').html(
                                '<span class="text-warning"><i class="fas fa-exclamation-circle"></i> ' +
                                kode + ' tidak ditemukan di API.</span>');
                        }
                    } 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> Kesalahan jaringan.</span>'
                        );
                },
                complete: function() {
                    btn.html('<i class="fas fa-satellite-dish me-1"></i> Tarik / Refresh API').prop('disabled',
                        false);
                }
            });
        }

        function fetchDirect(kode, lawan, isManual) {
            $.ajax({
                url: '{{ url('/mskurs/api/fetchKurs') }}',
                type: 'GET',
                data: {
                    base: 'IDR'
                },
                timeout: 15000,
                success: function(response) {
                    if (response.status === 'success') {
                        let item = response.data.find(x => x.kode === kode);
                        if (item) {
                            let rate = item.nilai;
                            if (lawan !== 'IDR') {
                                let lawanItem = response.data.find(x => x.kode === lawan);
                                if (lawanItem && lawanItem.nilai > 0) {
                                    rate = item.nilai / lawanItem.nilai;
                                }
                            }
                            rate = Math.round(rate * 100) / 100;
                            $('#kurs_api_input').val(rate);
                            if (isManual) {
                                $('#nilai_input').val(rate);
                            }
                            let btn = $('#btn_fetch_api');
                            btn.html('<i class="fas fa-satellite-dish me-1"></i> Tarik / Refresh API').prop(
                                'disabled', false);
                            $('#api_status').html(
                                '<span class="text-success"><i class="fas fa-check-circle"></i> Berhasil! Kurs API untuk ' +
                                kode + ' → ' + lawan + ': ' + rate + ' (sumber: exchangerate-api)</span>');
                        }
                    }
                }
            });
        }
    </script>
@endpush

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