@extends('layouts.admin')


@section('style')
    <style>
        .btn-group-wrap .btn {
            padding: 5px;
            margin-bottom: 5px;
        }
    </style>
@endSection

@section('script')

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Check if there is a response stored in localStorage
            const deleteResponse = localStorage.getItem('deleteResponse');

            if (deleteResponse) {
                // Parse the JSON response
                const response = JSON.parse(deleteResponse);

                // Inject the response into an HTML element, e.g., a div with id "responseContainer"
                const responseContainer = document.getElementById('successContainer');

                if (responseContainer) {
                    responseContainer.innerHTML = `${response.message}`;
                    responseContainer.style.display = 'block';
                }

                localStorage.removeItem('deleteResponse');
            }
        });

        $(function () {
            var t = $('#store_table').DataTable({
                lengthMenu: [ [10, 25, 50, 100, 200, 500, -1], [10, 25, 50, 100, 200, 500, "All"] ],
                dom:
                    "<'row p-2'<'#create_voucher.col-sm-6 mb-2 text-left'><'#import_export.col-sm-6 mb-2 text-left text-sm-right'B>>" +
                    "<'row px-2'<'col-sm-6'l><'col-sm-6'f>>" +
                    "<'row'<'col-sm-12 overflow-auto'tr>>" +
                    "<'row p-2'<'col-sm-5'i><'col-sm-7'p>>",
                /*
                buttons: [{
                    extend: 'csv',
                    text: '<i class="fas fa-file-export"></i> Export CSV',
                    className: 'btn btn-sm btn-default'
                }],
                */
                buttons: [
                    {
                        text: '<i class="fas fa-file-export"></i> Export CSV',
                        className: 'btn btn-sm btn-default',
                        action: function ( e, dt, node, config ) {
                            // Redirect to the export route
                            //window.location.href = "{{ route('export_and_download_stores') }}";
                            
                            // Trigger the download without navigating, timeout after 5 seconds
                            //$('<iframe style="display:none;" id="downloadFrame"></iframe>').attr('src', "{{ route('export_and_download_stores') }}").appendTo('body');
                            //setTimeout(() => { $('#downloadFrame').remove(); }, 5000);   
                            
                            // Disable the button to prevent multiple clicks
                            $(node).prop('disabled', true);

                            // Create iframe for download
                            const iframe = $('<iframe style="display:none;" id="downloadFrame"></iframe>')
                                .attr('src', "{{ route('export_and_download_stores') }}")
                                .appendTo('body');

                            // Listen for iframe load to detect completion
                            iframe.on('load', function() {
                                // Re-enable button and remove iframe after a short delay
                                $(node).prop('disabled', false);
                                setTimeout(() => {
                                    iframe.remove();
                                }, 1000); // 1 second after load to ensure download initiates
                            });

                            // Fallback: Remove iframe after 70 seconds (70s for large csv files) if load event doesn't fire
                            setTimeout(() => {
                                if (iframe.length) {
                                    $(node).prop('disabled', false);
                                    iframe.remove();
                                    console.warn('Export iframe removed after timeout.');
                                }
                            }, 70000); // 70 seconds fallback (70s for large csv files)
                        }
                    }
                ],                
            });

            /*
            // Add Export product-merchant button
            var export_btn = `<a role='button' href="{{ route('export_and_download_stores') }}" class="mr-2 btn btn-sm btn-default"><i class="fas fa-file-export"></i> Export</a>`;
            $('#import_export .dt-buttons').prepend(export_btn);
            */            

            t.on( 'order.dt search.dt', function () {
                t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                    cell.innerHTML = i+1;
                } );
            } ).draw();
            var create_btn = `<a role='button' href="{{ route('create_store') }}" class="mr-2 btn btn-sm btn-secondary"><i class="fas fa-plus"></i> Add New</a>`;
            $('#create_voucher').prepend(create_btn);

            var download_qr_btn = `<a role='button' target='_blank' href="{{  route('admin.assets.download_qr_codes') }}" class="mr-2 dt-button buttons-csv buttons-html5 btn btn-sm btn-default"><i class="fas fa-file-export"></i> Download QR Codes</a>`;
            {{--            var import_csv = `<a role='button' href="{{ route('import_voucher_series') }}" class="mr-2 btn btn-sm btn-default"><i class="fas fa-file-import"></i> Import CSV</a>`;--}}
            //             $('#import_export .dt-buttons').prepend(import_csv);
            $('.dt-buttons').prepend(download_qr_btn);

                let import_csv = `<button id="uploadCSVButton" class="mr-2 dt-button buttons-csv buttons-html5 btn btn-sm btn-default"><i class="fas fa-file-import"></i>Import CSV</button>`
                $('.dt-buttons').prepend(import_csv);


            @if(config('features.stores.delete-all'))
                let delete_all = `<button id="deleteAllButton" class="mr-2 dt-button buttons-csv buttons-html5 btn btn-sm btn-danger" data-toggle="modal" data-target="#deleteModal"><i class="fas fa-warning"></i>Delete All</button>`
                $('.dt-buttons').prepend(delete_all);
            @endif

            const uploadCSVButton = $('#uploadCSVButton')

            uploadCSVButton.on('click', function() {
                $('#csvFileUploadInput').trigger('click')
            });

            $('#csvFileUploadInput').on('change', function () {
                const fileInput = document.getElementById('csvFileUploadInput');
                const file = fileInput.files[0];

                if (file) {
                    let formData = new FormData();
                    formData.append('_token', `{{csrf_token()}}`)
                    formData.append('csvFile', file);

                    // Show loading spinner
                    uploadCSVButton.prop('disabled', true); // Disable the button
                    uploadCSVButton.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Importing CSV...');

                    $.ajax({
                        url: `{{route('import_merchants_and_products_from_csv')}}`, // Your server-side script to handle the file upload
                        type: 'POST',
                        headers: {
                            'X-XSRF-TOKEN': `{{csrf_token()}}`
                        },
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            $('#errorContainer').hide();
                            uploadCSVButton.prop('disabled', false); // Re-enable the button
                            uploadCSVButton.html('<i class="fas fa-file-import"></i>Import CSV'); // Restore

                            if (response.errors) {
                                displayValidationError(response.errors)
                                return
                            }

                            // Add "?success=true" to the URL
                            let currentUrl = window.location.href;
                            if (currentUrl.indexOf('?') !== -1) {
                                currentUrl += '&success=true';
                            } else {
                                currentUrl += '?success=true';
                            }

                            // Reload the page with the updated URL
                            window.location.href = currentUrl;
                        },
                        error: function(xhr, status, error) {
                            $('#successContainer').hide()
                            uploadCSVButton.prop('disabled', false); // Re-enable the button
                            uploadCSVButton.html('<i class="fas fa-file-import"></i>Import CSV'); // Restore
                            if (xhr.status >= 400 && xhr.status < 500) {
                                // Access JSON response
                                const jsonResponse = xhr.responseJSON;

                                if (jsonResponse && jsonResponse.errors) {
                                    displayValidationError(jsonResponse.errors.csvFile[0]);
                                    return
                                }

                                displayValidationError('An error occurred: ' + (jsonResponse.error ?? xhr.statusText));
                                return
                            }

                            if (xhr.status === 500) {
                                const jsonResponse = xhr.responseJSON;
                                displayValidationError('Server Error: ' + (jsonResponse.message ?? xhr.statusText));
                            }
                        }
                    });
                } else {
                    displayValidationError('No file selected.')
                }
            });

            function displayValidationError(message) {
                $('#errorContainer').text(message).show()
            }

            function displaySuccessMessage(message) {
                $('#successContainer').text(message).show()
            }

            const urlParams = new URLSearchParams(window.location.search)
            if (urlParams.has('success')) {
                displaySuccessMessage("Import successful.")
            }

            let deleteStoreId;
            let deleteStoreName;

            $(document).on('click', '.delete-store-btn', function() {
                deleteStoreId = $(this).data('store-id');
                deleteStoreName = $(this).data('store-name');

                $('#storeNamePlaceholder').text(deleteStoreName);
                $('#deleteStoreModal').modal('show');
            });

            $('#deleteStoreModal').on('hidden.bs.modal', function () {
                $('#errorPlaceholder').text('').hide();
            });

            $('#confirmDeleteStore').on('click', function() {
                if (deleteStoreId) {
                    // Replace the placeholder in the URL with the actual store ID
                    let deleteUrl = `{{ route('delete_store', ['id' => 'PLACEHOLDER_ID']) }}`.replace('PLACEHOLDER_ID', deleteStoreId);

                    $.ajax({
                        url: deleteUrl,
                        type: 'DELETE',
                        data: {
                            _token: `{{ csrf_token() }}`
                        },
                        success: function(response) {
                            // Handle success, e.g., reload the page or remove the row from the table
                            window.location.reload();
                        },
                        error: function(xhr, status, error) {
                            // Handle error
                            const errorResponse = xhr.responseJSON || JSON.parse(xhr.responseText) || {};
                            $('#errorPlaceholder').text((errorResponse.error || 'An error occurred while deleting the store.')).show();
                        }
                    });
                }
            });

            const deleteAllButton = $('#deleteAllButton')

            $('#confirmDeleteAllProducts').on('click', function () {
                // Show loading spinner
                deleteAllButton.prop('disabled', true); // Disable the button
                deleteAllButton.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Deleting All Stores...');

                $.ajax({
                    url: `{{route('delete_all_stores')}}`,
                    type: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        $('#errorContainer').hide();
                        deleteAllButton.prop('disabled', false); // Re-enable the button
                        deleteAllButton.html('Delete All'); // Restore
                        // Reload the page with the updated URL

                        localStorage.removeItem('deleteResponse');
                        localStorage.setItem("deleteResponse", JSON.stringify(response))
                        window.location.reload();
                    },
                    error: function(xhr, status, error) {
                        $('#successContainer').hide()
                        deleteAllButton.prop('disabled', false); // Re-enable the button
                        deleteAllButton.html('Delete All'); // Restore

                        if (xhr.status >= 400 && xhr.status < 500) {
                            // Access JSON response
                            const jsonResponse = xhr.responseJSON;

                            if (jsonResponse && jsonResponse.errors) {
                                displayValidationError(jsonResponse.errors.csvFile[0]);
                                return
                            }

                            displayValidationError('An error occurred: ' + (jsonResponse.error ?? xhr.statusText));
                            return
                        }

                        if (xhr.status === 500) {
                            const jsonResponse = xhr.responseJSON;
                            displayValidationError('Server Error: ' + (jsonResponse.message ?? xhr.statusText));
                        }
                    }
                })
            })
        });


    </script>

@endSection

@section('content')
    @component('admin.components.tabs')
    <input id="csvFileUploadInput" type="file" name="csvFileUploadInput" style="display: none;">
    <div id="errorContainer" class="alert alert-danger m-2" role="alert" style="display: none;"></div>
    <div id="successContainer" class="alert alert-success m-2" role="alert" style="display: none;"></div>
    <table id="store_table" class="table table-bordered table-hover dataTable">
        <thead>
        <tr>
            <th>No.</th>
            <th>Logo</th>
            <th>Name</th>
            <th>Category</th>
            <th>Status</th>
            <th style="max-width: 120px;">Details</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        @foreach($stores ?? [] as $item)
            <tr>
                <td></td>
                <td><img src="{{$item['logo']}}" width="50px" ></td>
                <td>{{$item['name']}}</td>
                <td>{{data_get($item, 'storeType.name')}}</td>
                <td><span class="badge badge-pill {{ ($item->status === 'active') ? "badge-success" : "badge-secondary" }}">{{ $item->status }}</span></td>
                <td class="btn-group-wrap">
                    @if(config('app.IS_DEMO'))
                        <a href="{{ route('list_store_receipts', [
                            'store_slug' => $item['slug'],
                            'store_detail_key' => $store_detail_key['demoReceipt'],
                        ]) }}">
                            <button type="button" class="btn btn-block btn-warning btn-xs">View Demo Receipt</button>
                        </a>
                    @endif
                    <a href="{{ route('list_asset', $item['slug']) }}">
                        <button type="button" class="btn btn-block btn-primary btn-xs">View Outlets</button>
                    </a>
                        @if($item->productGroup)
                            <a href="{{ route('admin.list_products', $item->productGroup->slug) }}">
                                <button type="button" class="btn btn-block btn-primary btn-xs">List Products</button>
                            </a>
                        @else
                            <button type="button" class="btn btn-block btn-primary btn-xs" disabled title="No Product Group Attached">List Products</button>
                        @endif
                </td>
                <td>
                    <a href="{{ route('edit_store', $item->getKey()) }}">
                        <button type="button" class="btn btn-block btn-primary btn-xs mt-2">Edit</button>
                    </a>
                    @if(config('features.stores.delete'))
                        <button class="btn btn-block btn-danger btn-xs mt-1 delete-store-btn" data-store-id="{{ $item->getKey() }}" data-store-name="{{ $item['name'] }}">Delete</button>
                    @endif
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>
    @endcomponent
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteAllProductsModalLabel">Delete All Stores</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <h6>Are you sure you want to delete all stores? This action cannot be undone, and all store, outlet, and product data will be permanently removed.</h6>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal" id="confirmDeleteAllProducts">Delete All</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="deleteStoreModal" tabindex="-1" role="dialog" aria-labelledby="deleteStoreModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteStoreModalLabel">Delete Store</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <h6>Are you sure you want to delete the store <strong id="storeNamePlaceholder"></strong>? This action cannot be undone.</h6>
                    <div id="errorPlaceholder" class="alert alert-danger mt-3" style="display: none;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteStore">Delete</button>
                </div>
            </div>
        </div>
    </div>
@endsection