@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    {{-- Referensi Kurs API Card --}}
                    <div class="card mb-4">
                        <div class="card-header pb-0">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h5 class="mb-1">Referensi Kurs API</h5>
                                    <p class="text-sm mb-0 text-secondary">Nilai ini dapat digunakan sebagai acuan, namun
                                        kurs final yang digunakan untuk pembukuan adalah kurs yang telah diinput secara
                                        manual oleh tim Accounting.</p>
                                </div>
                                <div class="d-flex align-items-center">
                                    <span class="badge me-2" id="api_badge"
                                        style="background-color:#028284; font-size: 0.85rem;"><i class="fas fa-wifi me-1"
                                            style="color: white"></i> API Online</span>
                                    <button type="button" class="btn btn-outline-info btn-sm mb-0" id="btn_refresh_cards"
                                        title="Refresh data API"><i class="fas fa-sync-alt me-1"></i> Refresh</button>
                                </div>
                            </div>
                            {{-- Dropdown Base Currency --}}
                            <div class="d-flex align-items-center mt-2">
                                <label class="text-sm text-secondary me-2 mb-0">Base Mata Uang:</label>
                                <select class="form-select form-select-sm" id="base_currency_select" style="width:250px;">
                                    <option value="IDR" selected>IDR - Rupiah Indonesia</option>
                                </select>
                                <style>
                                    #base_currency_select+.select2-container {
                                        width: 250px !important;
                                    }
                                </style>
                            </div>
                        </div>
                        <div class="card-body pt-2">
                            <div class="row" id="kurs_cards_row">
                                @php $defaultCodes = ['JPY', 'USD', 'EUR', 'GBP']; @endphp
                                @foreach ($defaultCodes as $code)
                                    <div class="col-xl-3 col-sm-6 mb-xl-0 mb-3">
                                        <div class="card shadow-lg"
                                            style="background-color:#028284; min-height:120px; border-radius:12px;"
                                            id="card_{{ $code }}">
                                            <div class="card-body p-3">
                                                <div class="d-flex justify-content-between align-items-start mb-1">
                                                    <p class="mb-0 text-white" style="font-size: 0.9rem; opacity: 0.9;"
                                                        id="card_nama_{{ $code }}">{{ $code }}</p>
                                                    <span class="badge"
                                                        style="font-size:0.75rem; border-radius:10px; padding: 0.4em 0.6em;"
                                                        id="card_pct_{{ $code }}">-</span>
                                                </div>
                                                <h5 class="text-white mb-0"
                                                    style="font-weight:700; font-size:1.15rem; letter-spacing: 0.5px;"
                                                    id="card_pair_{{ $code }}">{{ $code }} <i
                                                        class="fas fa-arrow-right mx-1" style="font-size: 0.7em;"></i> IDR
                                                </h5>
                                                <h3 class="text-white font-weight-bolder mt-1 mb-1"
                                                    style="font-size:1.7rem; letter-spacing: 0.5px;"
                                                    id="card_val_{{ $code }}">
                                                    <i class="fas fa-spinner fa-spin" style="font-size: 1rem;"></i>
                                                </h3>
                                                <p class="text-white text-xs mb-0" style="opacity: 0.85;"
                                                    id="card_time_{{ $code }}">
                                                    <i class="far fa-clock me-1"></i> Memuat...
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    {{-- Main List Card --}}
                    <div class="card">
                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">List {{ $title_menu }}</h5>
                            </div>
                            <div class="col">
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper">
                                    @if ($authorize->add == '1')
                                        <button class="btn btn-primary mb-0"
                                            onclick="window.location='{{ URL::to($url_menu . '/add') }}'"><i
                                                class="fas fa-plus me-1"></i><span
                                                class="font-weight-bold">Tambah</span></button>
                                    @endif
                                    <button class="btn btn-info mb-0 ms-2"
                                        onclick="window.location='{{ URL::to('/mskurs/selisih_kurs') }}'"><i
                                            class="fas fa-file-invoice-dollar me-1"></i><span
                                            class="font-weight-bold">Laporan Selisih Kurs</span></button>
                                </div>
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display" id="list_{{ $dmenu }}">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th>Action</th>
                                            <th>No</th>
                                            <th>Mata Uang</th>
                                            <th>Lawan</th>
                                            <th class="text-end">Kurs Manual</th>
                                            <th class="text-end">Kurs API (Live)</th>
                                            <th>Terakhir Update</th>
                                            <th>User</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($table_detail as $detail)
                                            @php $primary = 'id_kurs'; @endphp
                                            <tr {{ $detail->isactive == '0' ? 'style=background-color:#ffe9ed;' : '' }}>
                                                <td class="text-sm font-weight-normal">
                                                    <div class="btn-group">
                                                        <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                                            title="View Data"
                                                            onclick="window.location='{{ url($url_menu . '/show/' . encrypt($detail->$primary)) }}'">
                                                            <i class="fas fa-eye"></i><span class="font-weight-bold">
                                                                View</span>
                                                        </button>
                                                    </div>
                                                </td>
                                                <td class="text-sm font-weight-normal">{{ $loop->iteration }}</td>
                                                <td class="text-sm font-weight-normal">{{ $detail->nama }}
                                                    ({{ $detail->kode }})
                                                </td>
                                                <td class="text-sm font-weight-normal">
                                                    {{ \App\Http\Controllers\MskursController::getCurrencyNames()[$detail->kode_lawan] ?? $detail->kode_lawan }}
                                                    ({{ $detail->kode_lawan }})</td>
                                                <td class="text-sm font-weight-normal text-end">
                                                    {{ number_format($detail->nilai, 2, ',', '.') }}</td>
                                                <td class="text-sm font-weight-normal text-end"
                                                    id="api_kurs_{{ $detail->kode }}_{{ $detail->kode_lawan }}">
                                                    {{ $detail->kurs_api > 0 ? number_format($detail->kurs_api, 2, ',', '.') : '-' }}
                                                </td>
                                                <td class="text-sm font-weight-normal">
                                                    {{ \Carbon\Carbon::parse($detail->created_at)->translatedFormat('d F Y') }}
                                                </td>
                                                <td class="text-sm font-weight-normal">{{ $detail->user_create }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    Data {{ count($table_detail) > 0 ? 1 : 0 }} - {{ count($table_detail) }} dari
                                    {{ count($table_detail) }} data.
                                </div>
                            </div>
                            <div class="col-lg mt-3">
                                <div class="nav-wrapper" id="noted"><code>Note : <i aria-hidden="true"
                                            style="color: #ffc2cd;" class="fas fa-circle"></i> Data not active</code>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        $('#list_{{ $dmenu }}').DataTable({
            paging: false,
            info: false,
            searching: true,
            responsive: true,
            language: {
                search: "",
                searchPlaceholder: "Search...",
                emptyTable: "Maaf - Data tidak ada",
            },
            dom: '<"row d-flex justify-content-between align-items-center"<"col-lg-12 d-flex justify-content-between align-items-center"Bf>>rti',
            buttons: [{
                    extend: 'excelHtml5',
                    text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel</span>',
                    exportOptions: {
                        columns: ':visible:not(:first-child)'
                    }
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF</span>',
                    exportOptions: {
                        columns: ':visible:not(:first-child)'
                    }
                },
            ],
            initComplete: function() {
                $('.dataTables_filter input').addClass('form-control');
            }
        });
        $('.dt-button').addClass('btn btn-secondary').removeClass('dt-button');
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjaccounting/resources/views/master/mskurs/list.blade.php</b> on line <b>208</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/msjaccounting/resources/views/master/mskurs/list.blade.php</b> on line <b>208</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjaccounting/resources/views/master/mskurs/list.blade.php</b> on line <b>209</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/msjaccounting/resources/views/master/mskurs/list.blade.php</b> on line <b>209</b><br />

        function deleteData(event, name, msg) {
            event.preventDefault();
            Swal.fire({
                title: 'Konfirmasi',
                text: `Apakah Anda Yakin ${msg} Data ${name} ini?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: `Ya, ${msg}`,
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (result.isConfirmed) event.target.closest('form').submit();
            });
        }

        let dbKurs = {};
        @foreach ($table_detail as $detail)
            dbKurs['{{ $detail->kode }}_{{ $detail->kode_lawan }}'] = {{ $detail->nilai }};
        @endforeach

        function formatNumber(num) {
            if (num === 0) return '0,00';
            let decimals = 2;
            if (num < 0.01) {
                decimals = 6;
            } else if (num < 1) {
                decimals = 4;
            }
            return new Intl.NumberFormat('id-ID', {
                minimumFractionDigits: decimals,
                maximumFractionDigits: decimals
            }).format(num);
        }

        let dropdownPopulated = false;

        function loadApiCards() {
            let base = $('#base_currency_select').val() || 'IDR';
            $('#btn_refresh_cards').find('i').addClass('fa-spin');

            $.ajax({
                url: '{{ url('/mskurs/api/fetchKurs') }}',
                type: 'GET',
                data: {
                    base: base
                },
                timeout: 15000,
                success: function(response) {
                    if (response.status === 'success') {
                        let apiData = response.data;
                        let source = response.source || 'API';
                        $('#api_badge').attr('style', 'background-color:#028284; font-size: 0.85rem;')
                            .html('<i class="fas fa-wifi me-1 text-white"></i> ' + source.toUpperCase());

                        if (!dropdownPopulated) {
                            let sel = $('#base_currency_select');
                            let curVal = sel.val();
                            sel.find('option:not(:first)').remove();
                            apiData.forEach(function(item) {
                                sel.append('<option value="' + item.kode + '">' + item.kode + ' - ' +
                                    item.nama + '</option>');
                            });
                            sel.val(curVal);
                            sel.select2({
                                width: '250px'
                            });
                            dropdownPopulated = true;
                        }

                        let targetCodes = ['JPY', 'USD', 'EUR', 'GBP'];
                        if (targetCodes.includes(base)) {
                            targetCodes = targetCodes.filter(c => c !== base);
                            targetCodes.push('IDR');
                        }
                        targetCodes.forEach(function(code) {
                            let item = apiData.find(x => x.kode === code);
                            if (item) {
                                let key = code + '_' + base;
                                let dbVal = dbKurs[key] || 0;
                                if (dbVal === 0) {
                                    let revKey = base + '_' + code;
                                    let revVal = dbKurs[revKey] || 0;
                                    if (revVal > 0) {
                                        dbVal = 1.0 / revVal;
                                    }
                                }
                                let pct = 0;
                                if (dbVal > 0) pct = ((item.nilai - dbVal) / dbVal * 100).toFixed(2);

                                $('#card_nama_' + code).text(item.nama);
                                $('#card_pair_' + code).text(code + ' → ' + base);
                                $('#card_val_' + code).text(formatNumber(item.nilai));
                                let pctClass = pct > 0 ? 'bg-success text-white' : (pct < 0 ?
                                    'bg-danger text-white' : 'bg-secondary text-white');
                                let pctText = pct > 0 ? '+' + pct + '%' : pct + '%';
                                $('#card_pct_' + code).attr('class', 'badge ' + pctClass).css(
                                    'font-size', '0.85rem').text(pctText);
                                let now = new Date();
                                let timeStr = now.getHours().toString().padStart(2, '0') + ':' + now
                                    .getMinutes().toString().padStart(2, '0');
                                $('#card_time_' + code).html(
                                    '<i class="fas fa-clock me-1"></i> Diperbarui ' + timeStr);
                            }
                        });

                        @foreach ($table_detail as $detail)
                            (function() {
                                let kode = '{{ $detail->kode }}';
                                let lawan = '{{ $detail->kode_lawan }}';
                                let kodeItem = apiData.find(x => x.kode === kode);
                                let lawanItem = apiData.find(x => x.kode === lawan);
                                let valKode = (kode === base) ? 1 : (kodeItem ? kodeItem.nilai : 0);
                                let valLawan = (lawan === base) ? 1 : (lawanItem ? lawanItem.nilai : 0);
                                if (valKode > 0 && valLawan > 0) {
                                    let rate = valKode / valLawan;
                                    $('#api_kurs_' + kode + '_' + lawan).text(formatNumber(rate));
                                }
                            })();
                        @endforeach
                    } else {
                        showCardError(response.error || 'Unknown error');
                    }
                },
                error: function() {
                    showCardError('Gagal menghubungi API.');
                },
                complete: function() {
                    $('#btn_refresh_cards').find('i').removeClass('fa-spin');
                }
            });
        }

        function showCardError(msg) {
            $('#api_badge').attr('style', 'background-color:#f5365c!important; font-size: 0.85rem;').html(
                '<i class="fas fa-times me-1 text-white"></i> Offline');
            ['JPY', 'USD', 'EUR', 'GBP'].forEach(function(code) {
                $('#card_val_' + code).text('Error');
                $('#card_time_' + code).html('<i class="fas fa-exclamation-triangle me-1"></i> ' + msg);
            });
        }

        $(document).ready(function() {
            $('#base_currency_select').select2({
                width: '250px'
            });
            loadApiCards();
            $('#btn_refresh_cards').click(function() {
                loadApiCards();
            });
            $('#base_currency_select').change(function() {
                loadApiCards();
            });
        });
    </script>
@endpush