@extends('layouts.layout')
@section('body_class', 'nav-md')
@section('body_content')
    <div class="container body">
        <div class="main_container">
            @include('includes.sidebar')
            <div class="right_col" role="main">
                <div class="page-title">
                    <div class="row">
                        <div class="col-md-7">
                            <div class="title_left text-danger">
                                <h3><i class="fa fa-book"></i> History Harga Emas Fisik</h3>
                            </div>
                        </div>
                        <div class="col-md-5">
                            <form>
                                <div class="row">
                                    <input type="hidden" name="brand" value="{{ $request->input('brand', 'antam') }}">
                                    <div class="col-md-3">
                                        <input type="date" name="date_start" class="form-control"
                                            value="{{ $request->input('date_start', date('Y-m-d')) }}">
                                    </div>
                                    <div class="col-md-3">
                                        <input type="date" name="date_end" class="form-control"
                                            value="{{ $request->input('date_end', date('Y-m-d')) }}">
                                    </div>
                                    <div class="col-md-5">
                                        <button type="submit" class="btn btn-success">Filter</button>
                                        <a href="{{ url('pricing/harga_emas_fisik_history') }}"
                                            class="btn btn-warning">Reset</a>
                                        <a href="{{ url('pricing/harga_emas_fisik_history/download') }}?brand={{ $request->input('brand', 'antam') }}&date_start={{ $request->input('date_start', date('Y-m-d')) }}&date_end={{ $request->input('date_end', date('Y-m-d')) }}"
                                            class="btn btn-default" id="downloadButton">Download</a>
                                    </div>
                                </div>
                            </form>

                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>

                <div class="row">
                    <div class="col-xs-12">
                        <div class="x_panel">
                            <div class="x_content">
                                <div style="margin-bottom: 20px;">
                                    <a href="{{ url('pricing/harga_emas_fisik_history?brand=antam') }}"
                                        class="btn-tab-history {{ !$request['brand'] || $request['brand'] == 'antam' ? 'btn-tab-history-active' : '' }}"
                                        style="margin: 5px; font-weight:bold;">ANTAM CERTIEYE</a>
                                    <a href="{{ url('pricing/harga_emas_fisik_history?brand=retro') }}"
                                        class="btn-tab-history {{ $request['brand'] == 'retro' ? 'btn-tab-history-active' : '' }}"
                                        style="margin: 5px; font-weight:bold;">ANTAM RETRO</a>
                                    <a href="{{ url('pricing/harga_emas_fisik_history?brand=ubs') }}"
                                        class="btn-tab-history {{ $request['brand'] == 'ubs' ? 'btn-tab-history-active' : '' }}"
                                        style="margin: 5px; font-weight:bold;">UBS</a>
                                    <a href="{{ url('pricing/harga_emas_fisik_history?brand=lotus') }}"
                                        class="btn-tab-history {{ $request['brand'] == 'lotus' ? 'btn-tab-history-active' : '' }}"
                                        style="margin: 5px; font-weight:bold;">LOTUS ARCHI</a>
                                    <a href="{{ url('pricing/harga_emas_fisik_history?brand=hartadinata') }}"
                                        class="btn-tab-history {{ $request['brand'] == 'hartadinata' ? 'btn-tab-history-active' : '' }}"
                                        style="margin: 5px; font-weight:bold;">Hartadinata</a>
                                    <a href="{{ url('pricing/harga_emas_fisik_history?brand=star_gold') }}"
                                        class="btn-tab-history {{ $request['brand'] == 'star_gold' ? 'btn-tab-history-active' : '' }}"
                                        style="margin: 5px; font-weight:bold;">Star Gold</a>
                                    <a href="{{ url('pricing/harga_emas_fisik_history?brand=idn_spesial') }}"
                                        class="btn-tab-history {{ $request['brand'] == 'idn_spesial' ? 'btn-tab-history-activ' : '' }}"
                                        style="margin: 5px; font-weight:bold;">IDN Spesial</a>
                                    <a href="{{ url('pricing/harga_emas_fisik_history?brand=heraues') }}"
                                        class="btn-tab-history {{ $request['brand'] == 'heraues' ? 'btn-tab-history-activ' : '' }}"
                                        style="margin: 5px; font-weight:bold;">LBMA Gold</a>
                                    {{-- <a href="{{ url('pricing/harga_emas_fisik_history?brand=metalor') }}"
                                        class="btn-tab-history {{ $request['brand'] == 'metalor' ? 'btn-tab-history-activ' : '' }}"
                                        style="margin: 5px; font-weight:bold;">Metalor</a> --}}
                                </div>
                                {!! csrf_field() !!}
                                <input type="hidden" name="brand" value="{{ $request['brand'] ?: 'antam' }}">
                                <div id="report">
                                    <table class="table table-hover" width="100%">
                                        <thead>
                                            <tr style="background: #c6e0f5;">
                                                <th>Pecahan Emas</th>
                                                <th>Harga Beli</th>
                                                <th>Harga Jual</th>
                                                @if ($request['brand'] == 'antam' || !$request['brand'])
                                                    <th>Harga Jual 2025-2022</th>
                                                    <th>Harga Jual 2021-2018</th>
                                                @endif
                                                <th>Sell (Stock)</th>
                                                <th>Sell (PO)</th>
                                                <th>Tukar Fisik</th>
                                                <th>Laku Cicil</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td colspan="10" class="text-center">
                                                    <h3><i class="fa fa-spinner fa-pulse"></i></h3>
                                                </td>
                                            </tr>
                                        </tbody>

                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @include('includes.footer')
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content modal-red">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Konfirmasi Simpan Perubahan</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="confirmationMessage"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"
                        style="color: black">Batal</button>
                    <button type="button" class="btn btn-primary" id="confirmChangesButton">Simpan Perubahan</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.0.7/cleave.min.js"></script>
    <script type="text/javascript">
        document.getElementById("submitButton").addEventListener("click", function(event) {
            event.preventDefault();

            var confirmationMessage = "Apakah Anda yakin ingin menyimpan perubahan dengan data berikut?" + "<br>";
            var shouldExecute = false;
            var addedInputs = {};

            var hargaBeliInputs = document.querySelectorAll('[name^="harga_beli_"]');
            hargaBeliInputs.forEach(function(input) {
                var initialValue = input.defaultValue.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                var newValue = input.value;
                var parentTh = input.closest('tr').querySelector('th').innerText;
                if (initialValue !== newValue) {
                    confirmationMessage += "Emas " + parentTh + " Harga Beli dari: " + initialValue +
                        " menjadi: <span style='color: red;'>" + newValue + "</span><br>";
                    shouldExecute = true;
                }
            });

            var hargaJualInputs = document.querySelectorAll('[name^="harga_jual_"]');
            hargaJualInputs.forEach(function(input) {
                var initialValue = input.defaultValue.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                var newValue = input.value;
                var parentTh = input.closest('tr').querySelector('th').innerText;
                if (initialValue !== newValue && !addedInputs[input.name]) {
                    confirmationMessage += "Emas " + parentTh + " Harga Jual dari: " + initialValue +
                        " menjadi: <span style='color: red;'>" + newValue + "</span><br>";
                    shouldExecute = true;
                    addedInputs[input.name] = true;
                }
            });

            var hargaJualOldInputs = document.querySelectorAll('[name^="harga_jual_old_"]');
            hargaJualOldInputs.forEach(function(input) {
                var initialValue = input.defaultValue.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                var newValue = input.value;
                var parentTh = input.closest('tr').querySelector('th').innerText;
                if (initialValue !== newValue && !addedInputs[input.name]) {
                    confirmationMessage += "Emas " + parentTh + " Harga Jual Lama dari: " + initialValue +
                        " menjadi: <span style='color: red;'>" + newValue + "</span><br>";
                    shouldExecute = true; // Jika ada perubahan, set shouldExecute menjadi true
                    addedInputs[input.name] = true;
                }
            });

            if (shouldExecute) {
                var confirmationParagraph = document.getElementById("confirmationMessage");
                confirmationParagraph.innerHTML = confirmationMessage;
                $('#exampleModal').modal('show');
            }
        });


        document.getElementById("confirmChangesButton").addEventListener("click", function(event) {
            document.getElementById("priceForm").submit();
        });




        $(document).ready(function() {
            create_cleave();
        })

        function create_cleave() {
            document.querySelectorAll('.input-harga').forEach(inp => new Cleave(inp, {
                numeral: true,
                numeralThousandsGroupStyle: 'thousand'
            }));
            // new Cleave(".input-hargabeli", {
            //     numeral: !0,
            //     numeralThousandsGroupStyle: "thousand",
            //     numeralPositiveOnly: !0
            // })
        }
    </script>
    <script>
        $(document).ready(function() {
            fetchRealTimeUpdates();
        });

        function fetchRealTimeUpdates() {
            var dateStart = $('input[name="date_start"]').val();
            var dateEnd = $('input[name="date_end"]').val();
            var brand = $('input[name="brand"]').val();

            $.ajax({
                url: '/pricing/harga_emas_fisik_history/data', // Ganti dengan route yang sesuai
                method: 'GET',
                data: {
                    date_start: dateStart,
                    date_end: dateEnd,
                    brand: brand
                },
                dataType: 'json',
                success: function(data) {
                    // Update tampilan dengan data yang diterima
                    $('#report').html(data.data);
                },
                error: function(error) {
                    console.error('Error fetching real-time updates:', error);
                },
            });
        }


        //download
        function updateDownloadUrl() {
            var dateStart = $('input[name="date_start"]').val();
            var dateEnd = $('input[name="date_end"]').val();
            var brand = $('input[name="brand"]').val();
            var newUrl = '/pricing/harga_emas_fisik_history/download?brand=' + brand + '&date_start=' + dateStart +
                '&date_end=' + dateEnd;

            $('#downloadButton').attr('href', newUrl);
        }

        $(document).ready(function() {
            $('input[name="date_start"], input[name="date_end"]').change(function() {
                updateDownloadUrl();
            });

            updateDownloadUrl();
        });

        document.getElementById("downloadButton").addEventListener("click", function(event) {
            event.preventDefault(); // Mencegah aksi default tombol

            var downloadButton = this;
            var originalText = downloadButton.innerHTML; // Menyimpan teks tombol asli

            // Mengganti teks tombol dengan animasi loading
            downloadButton.innerHTML = '<i class="fa fa-spinner fa-pulse"></i> Download';
            downloadButton.disabled = true; // Menonaktifkan tombol

            var downloadUrl = downloadButton.getAttribute('href');

            // Memulai proses download menggunakan fetch
            fetch(downloadUrl)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Terjadi kesalahan dalam proses download');
                    }
                    return response.blob();
                })
                .then(blob => {
                    var downloadLink = document.createElement('a');
                    var url = window.URL.createObjectURL(blob);
                    downloadLink.href = url;
                    downloadLink.download = 'harga_emas_fisik_history.xlsx';
                    document.body.appendChild(downloadLink);
                    downloadLink.click(); // Menjalankan download

                    window.URL.revokeObjectURL(url); // Membersihkan URL
                    downloadLink.remove(); // Menghapus elemen link dari DOM

                    alert('Download telah selesai.');
                })
                .catch(error => {
                    console.error('Error saat melakukan download:', error);
                    alert('Terjadi kesalahan saat mendownload. Coba lagi.');
                })
                .finally(() => {
                    // Mengembalikan tombol ke keadaan semula setelah download selesai
                    downloadButton.innerHTML = originalText;
                    downloadButton.disabled = false;
                });
        });
    </script>





@endsection