@component('components.modal_detail')
    @slot('title', 'Check Report Detail')
    @slot('id', 'modal_detail')
    @slot('minWidth', '30rem')
    {{-- Body --}}
    <div class="print p-4">
        <h3 class="text-xl text-center font-semibold text-gray-900 mb-6">
            <span>Serial Number: </span><span data-modal_detail="_serialNumber"></span>
        </h3>
        <div class="text-left">
            <ul>
                {{-- // TODO show data this --}}
                <li class="mt-2">
                    <span>Instance ID: </span><code data-modal_detail="instanceId"></code>
                </li>
                <li class="mt-2">
                    <span>Part Number: </span><code data-modal_detail="_partNumber"></code>
                </li>
                <li class="mt-2">
                    <span>Flag: </span><code data-modal_detail_type="bool" data-modal_detail="disabledLineFlagMsgs"></code>
                </li>
                <li class="mt-2">
                    <span>Cover: </span><code data-modal_detail_type="bool" data-modal_detail="isCovered"></code>
                </li>
                <li class="mt-2" data-modal_detail_display="warrantyExpiry">
                    <span>Warranty end: </span><code data-modal_detail="warrantyExpiry"></code>
                </li>
                <li class="mt-2">
                    <span>End Customer: </span>
                    <code data-modal_detail="endCustomer"></code>
                </li>
                <li class="mt-2" data-modal_detail_display="CountryOfOrigin">
                    <span>Country Of Origin: </span>
                    <code data-modal_detail="CountryOfOrigin"></code>
                    <span class="mx-1">-</span>
                    <div class="country" style="display: inline-flex;align-items: center;">
                        <span data-country="name"></span>
                        <img data-country="flag" style="margin-left: 10px; width: 50px;">
                    </div>
                </li>
                <li class="mt-2 no-print">
                    <div>
                        <span>Find Parent/Child SN: </span>
                        <button
                            class="text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
                            onclick="modalDetail_developing()">
                            50 Credit
                        </button>
                    </div>
                </li>
                <li class="mt-2 no-print">
                    <div>
                        <span>View previous user: </span>
                        <button
                            class="text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
                            onclick="modalDetail_developing()">
                            50 Credit
                        </button>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    {{-- Action --}}
    <div class="flex items-center justify-evenly p-4 md:p-5 border-t border-gray-200 rounded-b">
        <button type="button"
            class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
            onclick="modalDetail_print()">
            <i class="ri-printer-line"></i><span class="ml-2">Print</span>
        </button>
    </div>

    {{-- Print by iframe --}}
    <iframe id="modal_detail__print" style="display: none" frameborder="0"></iframe>
@endcomponent

@push('script')
    <script>
        var COUNTRIES = [];
        const BADGE_YN = {
            NO: '<span class="bg-red-300 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded">NO</span>',
            YES: '<span class="bg-green-300 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded">YES</span>',
        };

        // fetch countries data
        (function fetchCountries() {
            fetch('/api/helper/country')
                .then(response => response.json())
                .then(response => COUNTRIES = response['data'])
            return fetchCountries;
        }());

        function modalDetail_developing() {
            alert('The feature are developing')
        }

        function modalDetail_appendCountry(code) {
            const country = COUNTRIES.find(item => item['code'] === code)
            if (country) {
                $('[data-country="name"]').text(country['name'])
                $('[data-country="flag"]').attr('src', country['flag'])
            }
        }

        function modalDetail_print() {
            const $bodyPrint = $('body').clone();
            $bodyPrint.html($('.print').html());
            $bodyPrint.append(`
                <style>
                    @media print
                    {
                        .no-print, .no-print *
                        {
                            display: none !important;
                        }
                    }
                    * {
                        font-family: arial;
                        box-sizing: border-box;
                    }
                    body {
                        margin: 0 !important;
                        padding: 0 !important;
                        overflow: hidden;
                        display: flex;
                        flex-flow: column;
                        justify-content: center;
                        align-items: center;
                        flex-direction: column;
                        height: 100vh;
                    }
                    h3 {
                        text-align: center;
                        font-size: 2rem;
                    }
                    ul {
                        list-style-type: none;
                    }
                    ul li {
                        padding: 10px 5px;
                        font-size: 1.5rem;
                    }
                    .text-red-300 {
                        --tw-text-opacity: 1;
                        color: rgb(252 165 165 / var(--tw-text-opacity));
                    }
                </style>
            `);

            // Add content to the iframe (replace this with your actual content)
            window['modal_detail__print'].contentDocument.body.innerHTML = $bodyPrint.html();
            // Print the content inside the iframe
            window['modal_detail__print'].contentWindow.print();
        }

        // Main function
        function showDetailByIndex(index) {
            const INFO = window.resultSNCheck[index];

            $('#modal_detail')
                .find('[data-modal_detail]')
                .each((i, el) => {
                    let value = '';
                    let fieldValue = $(el).attr('data-modal_detail');
                    let typeValue = $(el).attr('data-modal_detail_type')
                    try {
                        value = fieldValue
                            .split('.')
                            .reduce((acc, key) => acc[key] ?? INFO[fieldValue], {}) ?? null;
                    } catch (error) {
                        value = null
                    }

                    switch (typeValue) {
                        case 'bool':
                            $(el).html(BADGE_YN[value ? 'YES' : 'NO'])
                            break;

                        default:
                            $(el).html(value ?? '<span class="text-xs text-red-300 italic">No data</span>');
                            break;
                    }

                    // Case special
                    switch (fieldValue) {
                        case 'CountryOfOrigin':
                            modalDetail_appendCountry(INFO['CountryOfOrigin'])
                            break;
                    }

                    // Hidden for element if value as NULL
                    if (typeof INFO[fieldValue] === 'undefined' || !INFO[fieldValue]) {
                        $(`[data-modal_detail_display="${fieldValue}"]`).css({
                            display: 'none'
                        })
                    } else {
                        $(`[data-modal_detail_display="${fieldValue}"]`).css({
                            display: 'list-item'
                        })
                    }
                })
            $MODAL_SHOW('modal_detail')
        }
    </script>
@endpush
