@extends('layouts.adminmaster')

@section('styles')
    <!-- Choices Css -->
    <link rel="stylesheet" href="{{ asset('build/assets/plugins/choices.js/public/assets/styles/choices.min.css') }}">

    <!-- INTERNAL Data table css -->
    <link href="{{ asset('build/assets/plugins/datatable/css/dataTables.bootstrap5.min.css') }}?v=1746402276"
        rel="stylesheet" />
    <link href="{{ asset('build/assets/plugins/datatable/responsive.bootstrap5.css') }}?v=1746402276"
        rel="stylesheet" />

    <!-- INTERNAL Sweet-Alert css -->
    <link href="{{ asset('build/assets/plugins/sweet-alert/sweetalert.css') }}?v=1746402276" rel="stylesheet" />
@endsection

@section('content')
    <!--Page header-->
    <div class="page-header d-xl-flex d-block">
        <div class="page-leftheader">
            <h4 class="page-title"><span class="font-weight-normal text-muted ms-2">{{ lang('Currencies') }}</span>
            </h4>
        </div>
    </div>
    <!--End Page header-->


    <!--Category List -->
    <div class="col-xl-12 col-lg-12 col-md-12">
        <div class="card ">
            <div class="card-header border-0 d-sm-flex d-block">
                <div class="card-title">
                    {{ lang('Currencies') }}
                    @can('Currencies Delete')
                        <button class="btn btn-outline-light btn-sm mb-4 data-table-btn" id="massdelete" style="display: none;"><i
                                class="fe fe-trash"></i>{{ lang('Delete') }}</button>
                    @endcan
                </div>

                <div class="ms-auto">
                    @can('Currencies Add')
                        <a href="javascript:void(0);" class="btn btn-primary" id="addCurrency">
                            {{ lang('Add Currency') }}</a>
                    @endcan
                </div>
            </div>

            <div class="card-body">
                <div class="table-responsive spruko-delete" style="min-height: 230px;">
                    <table class="table table-bordered border-bottom text-nowrap w-100" id="support-category">
                        <thead>
                            <tr>
                                <th data-sortable="false" scope="col">{{ lang('S.No') }}</th>
                                <th data-sortable="false" scope="col" class="text-center">
                                    @can('Currencies Delete')
                                        <input type="checkbox" id="customCheckAll">
                                    @else
                                        <input type="checkbox" disabled>
                                    @endcan

                                </th>
                                <th scope="col">{{ lang('currency Code') }}</th>
                                <th scope="col">{{ lang('Symbol') }}</th>
                                <th scope="col">{{ lang('Exchange rate') }}</th>
                                <th scope="col">{{ lang('Created At') }}</th>
                                <th scope="col">{{ lang('Status') }}</th>
                                <th scope="col">{{ lang('Actions') }}</th>

                            </tr>
                        </thead>
                        <div id="hideAfterloading"><img src="{{ asset('build/assets/images/loader.svg') }}" alt="">
                            <p>loading.. Please Wait</p>
                        </div>
                    </table>
                </div>
            </div>
        </div>
    </div>
    </div>
    <!-- List Category List -->
    @include('admin.currency.modal')
@endsection


@section('scripts')
    <!-- Choices JS -->
    <script src="{{ asset('build/assets/plugins/choices.js/public/assets/scripts/choices.min.js') }}"></script>

    <!-- INTERNAL Vertical-scroll js-->
    <script src="{{ asset('build/assets/plugins/vertical-scroll/jquery.bootstrap.newsbox.js') }}?v=1746402276">
    </script>
    <!-- INTERNAL Data tables -->
    <script src="{{ asset('build/assets/plugins/datatable/js/jquery.dataTables.min.js') }}?v=1746402276"></script>
    <script src="{{ asset('build/assets/plugins/datatable/js/dataTables.bootstrap5.js') }}?v=1746402276"></script>
    <script src="{{ asset('build/assets/plugins/datatable/dataTables.responsive.min.js') }}?v=1746402276">
    </script>
    <script src="{{ asset('build/assets/plugins/datatable/responsive.bootstrap5.min.js') }}?v=1746402276">
    </script>

    {{-- C:\xampp\htdocs\projects\appointments\public\assets\plugins\moment\min\moment.min.js --}}
    <!-- INTERNAL Sweet-Alert js-->
    <script src="{{ asset('build/assets/plugins/sweet-alert/sweetalert.min.js') }}?v=1746402276"></script>



    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", (event) => {

            let tableData = @json($currencies);

            let delPerm = @json(Auth::user()->can('Currencies Delete'));
            let editPerm = @json(Auth::user()->can('Currencies Edit'));
            let dateFormat = @json(setting('date_format'));
            var dataTable;
            var tableDropDown;
            var currencies = @json(config('currencies'));
            var SITEURL = '{{ url('') }}';




            function truncateTitle(title) {
                const maxLength = 40;
                return title.length > maxLength ? title.substring(0, maxLength) + '...' : title;
            }

            function dateTime(createdTime) {

                const jsDate = new Date(createdTime);

                let format = @json(setting('date_format'));
                switch (format) {
                    case 'd M, Y':
                        return jsDate.toLocaleDateString('en-GB', {
                            day: '2-digit',
                            month: 'short',
                            year: 'numeric'
                        });
                    case 'm.d.y':
                        return jsDate.toLocaleDateString('en-US', {
                            day: '2-digit',
                            month: '2-digit',
                            year: '2-digit'
                        }).replace(/\//g, '.');
                    case 'Y-m-d':
                        return jsDate.toISOString().split('T')[0];
                    case 'd-m-Y':
                        return jsDate.toLocaleDateString('en-GB').replace(/\//g, '-');
                    case 'd/m/Y':
                        return jsDate.toLocaleDateString('en-GB');
                    case 'Y/m/d':
                        return jsDate.toISOString().split('T')[0].replace(/-/g, '/');
                    default:
                        return jsDate.toLocaleDateString(); // Default format
                }

            }

            function numberFormat(num, decimals = 0, decimalSeparator = '.', thousandsSeparator = ',') {
                // Ensure the number is a valid number
                num = parseFloat(num);
                if (isNaN(num)) return '';

                // Convert the number to a string with fixed decimal places
                let parts = num.toFixed(decimals).split('.');

                // Format the integer part with thousands separator
                let integerPart = parts[0];
                let decimalPart = parts[1] || '';

                let formattedIntegerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSeparator);

                // Combine integer and decimal parts
                return decimalPart ? formattedIntegerPart + decimalSeparator + decimalPart : formattedIntegerPart;
            }

            loadTable(tableData);

            function loadTable(tableData) {
                document.getElementById('hideAfterloading')?.classList.remove('d-none');
                document.getElementById('theadShow')?.classList.add('d-none');
                if (tableDropDown)
                    tableDropDown.destroy();

                // if (dataTable)
                //     dataTable.destroy();
                if ($.fn.DataTable.isDataTable('#support-category')) {
                    $('#support-category').DataTable().clear().destroy();
                }

                if (document.getElementById('tableBody'))
                    document.getElementById('tableBody').remove();

                let createTbody = document.createElement('tbody');
                createTbody.setAttribute('id', "tableBody");
                let rows = tableData.map((data, index) => {

                    return `
                        <tr mainP>
                            <td>${index + 1}</td>
                            <td class="text-center">
                                ${delPerm  &&  data.code != 'USD' ? ` <input class=" checkall" type="checkbox" value="${data.id}" />` : '~'
                                }
                            </td>

                            <td>${data.code}</td>

                            <td> ${currencies[data.code]} </td>

                            <td> ${numberFormat(data.conversion_factor, 2, '.', '') } </td>

                            <td> ${dateTime(data.created_at)} </td>

                            <td>
                                ${ editPerm &&  data.code != 'USD' ? `<div class="custom-switch form-switch mb-0">
                                        <input type="checkbox" name="status" data-id="${data.id}" id="myonoffswitch${data.id}" class="custom-switch-input tswitch"${data.status == '1' ? 'checked' : '~' } >
                                        <label for="myonoffswitch${data.id}" class="custom-switch-indicator"></label>
                                </div>`  : '~' }
                            </td>

                            <td>
                                <div class="btn-list">
                                    ${ editPerm && data.code != 'USD' ? ` <a href="javascript:void(0)" data-id="${data.id}"
                                                                                                class="action-btns1 currencyEdit">
                                                                                                <i class="feather feather-edit text-primary"
                                                                                                data-id="${data.id}"data-bs-toggle="tooltip"
                                                                                                data-bs-placement="top" title="{{ lang('Edit') }}"></i>
                                                                                            </a>` : '~'
                                    }


                                    ${delPerm && data.code != 'USD'  ? `  <a href="javascript:void(0)" data-id="${data.id}"
                                                                                                class="action-btns1 currencyDelete">
                                                                                                <i class="feather feather-trash-2 text-danger"
                                                                                                data-id="${data.id}"data-bs-toggle="tooltip"
                                                                                                data-bs-placement="top" title="{{ lang('Delete') }}"></i>
                                                                                            </a> ` : '~'
                                    }

                                </div>
                            </td>

                        </tr>
                    `;
                });

                createTbody.innerHTML = rows.length ? rows.join('') : '';
                document.getElementById('support-category').appendChild(createTbody);
                let prev = {!! json_encode(lang('Previous')) !!};
                let next = {!! json_encode(lang('Next')) !!};
                let nodata = {!! json_encode(lang('No data available in table')) !!};
                let noentries = {!! json_encode(lang('No entries to show')) !!};
                let showing = {!! json_encode(lang('showing page')) !!};
                let ofval = {!! json_encode(lang('of')) !!};
                let maxRecordfilter = {!! json_encode(lang('- filtered from ')) !!};
                let maxRecords = {!! json_encode(lang('records')) !!};
                let entries = {!! json_encode(lang('entries')) !!};
                let show = {!! json_encode(lang('Show')) !!};
                let search = {!! json_encode(lang('Search...')) !!};
                // Reinitialize DataTable
                dataTable = $('#support-category').DataTable({
                    language: {
                        searchPlaceholder: search,
                        scrollX: "100%",
                        sSearch: '',
                        paginate: {
                            previous: prev,
                            next: next
                        },
                        emptyTable: nodata,
                        infoFiltered: `${maxRecordfilter} _MAX_ ${maxRecords}`,
                        info: `${showing} _PAGE_ ${ofval} _PAGES_`,
                        infoEmpty: noentries,
                        lengthMenu: `${show} _MENU_ ${entries}`,
                    },
                    order: [],
                    columnDefs: [{
                        "orderable": false,
                        "targets": [0, 1, 3]
                    }],
                });
                document.querySelector('.card-body').style.setProperty('filter','')

                $('.form-select').select2({
                    minimumResultsForSearch: Infinity,
                    width: '100%'
                });
                $('.form-select').on('focus', function() {
                    $(this).attr('aria-hidden', 'false');
                });
                document.getElementById('hideAfterloading')?.classList.add('d-none');
                document.getElementById('theadShow')?.classList.remove('d-none');

                initializeTooltips();

                function initializeTooltips() {
                    var tooltipElements = document.querySelectorAll('[data-bs-toggle="tooltip"]');
                    tooltipElements.forEach(function(element) {
                        new bootstrap.Tooltip(element);
                    });
                }


            }

            "use strict";

            var choicesArray = Object.entries(currencies).map(([key, value]) => ({
                label: key,
                value: key
            }));

            var textUniqueVals;
            var positions;
            var positionArray = [{
                    label: 'Prefix',
                    value: 'Prefix'
                },
                {
                    label: 'Sufix',
                    value: 'Sufix'
                }
            ];


            $(document).on('click', '#customCheckAll', function() {
                $('.checkall').prop('checked', this.checked);
                updateMassDeleteVisibility();
            });

            // Handle individual checkboxes
            $(document).on('click', '.checkall', function() {
                updateCustomCheckAll();
                updateMassDeleteVisibility();
            });

            // // Handle pagination controls
            $(document).on('click', '.pagination a', function() {
                // Assuming '.pagination a' is the selector for your pagination controls
                setTimeout(function() {
                    updateMassDeleteVisibility();
                }, 100);
            });

            // Initialize the "Select All" checkbox to unchecked
            $('#customCheckAll').prop('checked', false);

            // Function to update the visibility of the mass delete button
            function updateMassDeleteVisibility() {
                if ($('.checkall:checked').length === 0) {
                    $('#massdelete').hide();
                } else {
                    $('#massdelete').show();
                }
            }

            // Function to update the state of the "Select All" checkbox
            function updateCustomCheckAll() {
                var totalCheckboxes = $('.checkall').length;
                var checkedCheckboxes = $('.checkall:checked').length;

                if (checkedCheckboxes === totalCheckboxes) {
                    $('#customCheckAll').prop('checked', true);
                } else {
                    $('#customCheckAll').prop('checked', false);
                }
            }


            //TRIGGER CURRENCY MODAL
            let catCreateModal = new bootstrap.Modal(document.querySelector('#addCurrencyModal'));
            document.getElementById('addCurrency').addEventListener('click', function() {
                $('.modal-title').html("{{ lang('Add Currency') }}");

                document.querySelector('#codeError').innerHTML = '';
                document.querySelector('#positionError').innerHTML = '';
                document.querySelector('#conversion_factorError').innerHTML = '';
                document.querySelector('#decimalError').innerHTML = '';
                document.querySelector('#currencyForm').reset();
                document.getElementById('currencyId').value = null
                if (textUniqueVals) {
                    textUniqueVals.destroy();
                }

                if (positions) {
                    positions.destroy();
                }

                textUniqueVals = new Choices("#currencyCode", {
                    allowHTML: true,
                    choices: choicesArray,
                    paste: false,
                    duplicateItemsAllowed: false,
                    removeItemButton: true,
                    editItems: true,
                });

                positions = new Choices("#position", {
                    allowHTML: true,
                    choices: positionArray,
                    paste: false,
                    duplicateItemsAllowed: false,
                    removeItemButton: true,
                    editItems: true,
                });


                catCreateModal.show();
            });

            //CHANGE CURRENCY
            document.getElementById('currencyCode').addEventListener('change', function(element) {
                var selected = document.getElementById('currencyCode').value;
                var symbol = currencies[selected];
                var element = document.getElementById('currencySymbol');
                element.value = symbol;
                element.disabled = true;

            });

            //SAVE CURRENCY
            document.getElementById('saveCurrency').addEventListener('click', function(e) {
                e.preventDefault();
                document.getElementById('saveCurrency').disabled = true;
                document.getElementById('saveCurrency').innerHTML = '{{ lang('loading..') }}';
                document.querySelector('#codeError').innerHTML = '';
                document.querySelector('#positionError').innerHTML = '';
                document.querySelector('#conversion_factorError').innerHTML = '';
                document.querySelector('#decimalError').innerHTML = '';

                var form = document.querySelector('#currencyForm');
                var formData = new FormData(form);

                fetch(SITEURL + "/admin/currency/store", {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        },
                    })
                    .then(function(response) {
                        if (!response.ok) {
                            throw new Error('Network response was not ok');
                        }
                        return response.json();
                    })
                    .then(function(data) {
                        if (data.errors) {
                            document.getElementById('saveCurrency').disabled = false;
                            document.getElementById('saveCurrency').innerHTML = '{{ lang('Save') }}';
                            if (data.errors.code) {
                                document.querySelector('#codeError').innerHTML = data.errors.code;
                            }
                            if (data.errors.position) {
                                document.querySelector('#positionError').innerHTML = data.errors.position;
                            }
                            if (data.errors.conversion_factor) {
                                document.querySelector('#conversion_factorError').innerHTML =
                                    data.errors.conversion_factor;
                            }
                            if (data.errors.decimal) {
                                document.querySelector('#decimalError').innerHTML = data.errors
                                    .decimal;
                            }
                            return;
                        }
                        if (data.error === 'This action is unauthorized.') {
                            toastr.error(data.error);
                            // new AWN().alert(data.error);
                            setTimeout(() => {
                                location.reload();
                            }, 3000);
                        }
                        if (data.success) {
                            // new AWN().success(data.success);
                            toastr.success(data.success);
                            let newCurrency = data.data
                            let exists = false;
                            tableData = tableData.map(category => {
                                if (category.id === newCurrency.id) {
                                    exists = true;
                                    return newCurrency;
                                }
                                return category;
                            });

                            if (!exists) {
                                tableData.push(newCurrency);
                            }
                            document.getElementById('hideAfterloading')?.classList.remove('d-none');
                            document.querySelector('.card-body').style.setProperty('filter','blur(1px)');

                            loadTable(tableData);
                            document.querySelector('.currencyClose').click();
                            document.getElementById('saveCurrency').disabled = false;
                            document.getElementById('saveCurrency').innerHTML = "{{lang('Save')}}";

                            // setTimeout(() => {
                            //     location.reload();
                            // }, 3000);
                        }
                    })
                    .catch(function(error) {
                        document.getElementById('saveCurrency').disabled = false;
                        // Handle error here
                    });
            });

            //STATUS CHANGE

            document.querySelectorAll('.tswitch')?.forEach(element => {
                element.addEventListener('change', function(event) {

                    var _id = event.target.getAttribute('data-id');
                    var status = event.target.checked ? '1' : '0';

                    fetch(SITEURL + '/admin/currency/status/' + _id + '?status=' + status, {
                            method: 'GET',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                        })
                        .then(response => {
                            if (response.ok) {
                                return response.json();
                            } else {
                                throw new Error('Network response was not ok');
                            }
                        })
                        .then(data => {

                            if (data.error === 'This action is unauthorized.') {
                                toastr.error(data.error);
                                setTimeout(() => {
                                    location.reload();
                                }, 3000);
                            }
                            if (data.success) {
                                toastr.success(data.success);
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                        });


                });
            });

            document.querySelectorAll('[data-bs-dismiss="modal"]').forEach((e) => {
                e.onclick = () => {
                    catCreateModal.hide();
                }
            });

            let postions;
            //EDIT CURRENCY
            // document.querySelectorAll('.currencyEdit')?.forEach(element => {
            //     element.addEventListener('click', function(event) {
                document.addEventListener('click', (event) => {
                    const targetElement = event.target.closest('.currencyEdit');
                    if(targetElement){
                    var _id = targetElement.getAttribute("data-id");
                    $('.modal-title').html("{{ lang('Edit Currency') }}");

                    fetch(SITEURL + "/admin/currency/" + _id + "/edit", {
                            method: "GET",
                        })
                        .then(function(response) {
                            if (response.ok) {
                                return response.json();
                            } else {
                                throw new Error('Network response was not ok');
                            }
                        })
                        .then(function(data) {
                            if (data.error === 'This action is unauthorized.') {
                                toastr.error(data.error);
                                setTimeout(() => {
                                    location.reload();
                                }, 3000);
                            }
                            // document.querySelector('#currencyForm').reset();

                            if (data.data) {
                                var choiceElement = document.getElementById('currencyCode')
                                if (textUniqueVals) {
                                    textUniqueVals.destroy();
                                }

                                if (positions) {
                                    positions.destroy();
                                }

                                textUniqueVals = new Choices("#currencyCode", {
                                    allowHTML: true,
                                    choices: choicesArray,
                                    paste: false,
                                    duplicateItemsAllowed: false,
                                    removeItemButton: true,
                                    editItems: true,
                                });

                                textUniqueVals.setChoiceByValue([data.data.code]);

                                var symbol = currencies[data.data.code];
                                var element = document.getElementById('currencySymbol');
                                element.value = symbol;
                                element.disabled = true;

                                positions = new Choices("#position", {
                                    allowHTML: true,
                                    choices: positionArray,
                                    paste: false,
                                    duplicateItemsAllowed: false,
                                    removeItemButton: true,
                                    editItems: true,
                                });
                                positions.setChoiceByValue([data.data.position]);

                                document.getElementById('conversion_factor').value = data.data.conversion_factor;
                                document.getElementById('decimal').value = data.data .decimal;

                                document.getElementById('currencyId').value = data.data .id;


                                if (data.data.status == 1) {
                                    document.querySelector('.tswitchStatus').checked = true;
                                }
                                document.querySelector('#codeError').innerHTML = '';
                                document.querySelector('#positionError').innerHTML = '';
                                document.querySelector('#conversion_factorError').innerHTML = '';
                                document.querySelector('#decimalError').innerHTML = '';

                                new bootstrap.Modal(document.querySelector('#addCurrencyModal')).show();
                            }
                        })
                        .catch(function(error) {
                            console.error('Error:', error);
                        });
                    }
                });

            // });

            //DELETE CURRENCY
            document.addEventListener('click', (event) => {
                    const targetElement = event.target.closest('.currencyDelete');
                    if(targetElement){
                    var _id = targetElement.getAttribute('data-id');
                    let parent = targetElement.closest('.mainP');
                    let par = targetElement.closest('tr');
                    swal({
                            title: `{{ lang('Are you sure you want to continue?', 'alerts') }}`,
                            text: "{{ lang('This might erase your records permanently', 'alerts') }}",
                            icon: 'warning',
                            buttons: true,
                            dangerMode: true,
                        })
                        .then((willDelete) => {
                            if (willDelete) {
                                $.ajax({
                                    type: "get",
                                    url: SITEURL + '/admin/currency/' + _id,
                                    success: function(data) {
                                        toastr.success(data.success);
                                        par.classList.add('fade-out');
                                        let newData = tableData.filter(
                                            item => item
                                            .id != parseInt(_id));
                                        tableData = newData;
                                        document.getElementById('hideAfterloading')?.classList.remove('d-none');
                                        document.querySelector('.card-body').style.setProperty('filter','blur(1px)');

                                        setTimeout(() => {
                                            par.remove();
                                            loadTable(tableData);
                                        }, 1500);
                                        // location.reload();
                                    },
                                    error: function(data) {
                                        console.log('Error:', data);
                                    }
                                });
                            }
                        });
                    };
                });
            // });

            //CURRENCY MULTIPLE DELETE
            document.querySelector('#massdelete')?.addEventListener('click', function(event) {
                var id = [];
                var parent = [];
                document.querySelectorAll('.checkall:checked').forEach(function(checkbox) {
                    var row = checkbox.closest('tr');
                    if (row) {
                        var currencyCode = row.cells[2].textContent.trim();
                        if (currencyCode !== 'USD') {
                            id.push(checkbox.value);
                            parent.push(row);
                        }
                        else
                        {
                            toastr.error('Cant delete default currency USD');
                            return
                        }
                    }
                });

                if (id.length > 0) {
                    swal({
                            title: `{{ lang('Are you sure you want to continue?', 'alerts') }}`,
                            text: "{{ lang('This might erase your records permanently', 'alerts') }}",
                            icon: 'warning',
                            buttons: true,
                            dangerMode: true,
                        })
                        .then((willDelete) => {
                            if (willDelete) {
                                $.ajax({
                                    url: "{{ route('currency.deleteall') }}",
                                    method: "POST",
                                    data: {
                                        id: id
                                    },
                                    success: function(data) {
                                        toastr.success(data.success);
                                        parent.forEach(element => {
                                            element.classList.add('fade-out');
                                        });
                                    let newData = tableData.filter(item => !id.includes(String(item.id)));
                                    tableData = newData;
                                    document.getElementById('hideAfterloading')?.classList.remove('d-none');
                                    document.querySelector('.card-body').style.setProperty('filter','blur(1px)');
                                    setTimeout(() => {loadTable(tableData);
                                    }, 1500);
                                    $('.checkall:checked').prop('checked', false);
                                    $('#customCheckAll').prop('checked', false);
                                    },
                                    error: function(data) {
                                    }
                                });
                            }
                        });
                } else {
                    toastr.error('{{ lang('Please select at least one checkbox.', 'alerts') }}');
                }
            });
        });
    </script>
@endsection