<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Metas -->
    @if (env('IS_DEMO'))
        <x-demo-metas></x-demo-metas>
    @endif
    <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
    <link rel="icon" type="image/png" href="../assets/img/favicon3.png">
    <title>
        Billing
    </title>
    <!-- Fonts and icons     -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
    <!-- Nucleo Icons -->
    <link href="{{asset('assets/css/bootstrap.min.css')}}" rel="stylesheet" />
    <link href="{{asset('assets/css/style.css')}}" rel="stylesheet" />
    <link type="text/css" rel="stylesheet" href="{{asset('assets/fonts/font-awesome/css/font-awesome.min.css')}}">
    <link href="{{asset('assets/css/nucleo-icons.css')}}" rel="stylesheet" />
    <link href="{{asset('assets/css/nucleo-svg.css')}}" rel="stylesheet" />
    <!-- Font Awesome Icons -->
    <link href="{{asset('assets/css/nucleo-svg.css')}}" rel="stylesheet" />
    <!-- CSS Files -->
    <link id="pagestyle" href="{{asset('assets/css/soft-ui-dashboard.css?v=1')}}" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.7.1/css/fontawesome.min.css"
        rel="stylesheet">
    <link href="https://cdn.datatables.net/v/bs5/dt-2.1.8/datatables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/buttons/3.2.0/css/buttons.dataTables.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <style>
        .sidenav {
            z-index: 1038;
            position: fixed;
            top: 0;
            left: 0;
            height: 95vh;
            width: 250px;
            transform: translateX(0);
            transition: all 0.3s ease;
            box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14),
                0 7px 10px -5px rgba(0, 0, 0, 0.4);
            background-color: #5b90c6 !important;
        }

        .sidenav.collapsed {
            transform: translateX(-250px);
            width: 250px;
        }

        /* Mobile specific styles */
        @media (max-width: 1200px) {
            .sidenav {
                transform: translateX(-250px);
            }

            .sidenav.show {
                transform: translateX(0);
            }

            .sidenav-backdrop {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 1037;
                display: none;
            }

            .sidenav-backdrop.show {
                display: block;
            }
        }

        @media (min-width: 1200px) {
            .sidenav.collapsed {
                width: 50px;
                transform: translateX(0);
            }

            .sidenav.collapsed .nav-link-text,
            .sidenav.collapsed .navbar-brand span {
                display: none;
            }

            .sidenav.collapsed .icon {
                margin-right: 0;
            }

            .main-content {
                /* margin-left: 250px; */
                transition: margin-left 0.3s ease;
            }

            .sidenav.collapsed+.main-content {
                margin-left: 80px;
            }
        }
    </style>

    @livewireStyles


</head>

<body class="g-sidenav-show" style="background-color: rgb(217, 236, 255)">

    @if(session('success'))
        <script>
            Swal.fire({
                icon: 'success',
                title: 'Success!',
                text: "{{ session('success') }}",
            });
        </script>
    @endif
    @if(session('error'))
        <script>
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: "{{ session('error') }}",
            });
        </script>
    @endif
    <div id="loading" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.7); z-index: 9999; text-align: center;">
        <div class="spinner-border text-primary" style="margin-top: 20%; width: 3rem; height: 3rem;" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
    {{ $slot }}

    <!--   Core JS Files   -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="{{asset('assets/js/core/popper.min.js')}}"></script>
    <script src="{{asset('assets/js/core/bootstrap.min.js')}}"></script>
    <script src="{{asset('assets/js/plugins/smooth-scrollbar.min.js')}}"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.7.1/js/all.min.js"></script>
    <script src="https://cdn.datatables.net/v/bs5/dt-2.1.8/datatables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/3.2.0/js/dataTables.buttons.js"></script>
    <script src="https://cdn.datatables.net/buttons/3.2.0/js/buttons.bootstrap5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/3.2.0/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/3.2.0/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/3.2.0/js/buttons.colVis.min.js"></script>
    <script src="{{asset('assets/js/jspdf.min.js')}}"></script>
    <script src="{{asset('assets/js/html2canvas.js')}}"></script>
    <script src="{{asset('assets/js/app.js')}}"></script>
    <script>
        var win = navigator.platform.indexOf('Win') > -1;
        if (win && document.querySelector('#sidenav-scrollbar')) {
            var options = {
                damping: '0.5'
            }
            Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
        }
    </script>
    <!-- Github buttons -->
    <script async defer src="https://buttons.github.io/buttons.js"></script>
    <!-- Control Center for Soft Dashboard: parallax effects, scripts for the example pages etc -->
    <script src="{{asset('assets/js/soft-ui-dashboard.js')}}"></script>


    @livewireScripts
    @stack('js')
    <script>
        Livewire.on('callAlert', (data) => {
            Swal.fire({
                icon: data[0].type,
                text: data[0].message,
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            $('#myTable').DataTable({
                "order": [],
                layout: {
                    topStart: {
                        buttons: ['excel', 'pdf', 'print', 'colvis', 'pageLength']
                    },
                },
                lengthMenu: [[10, 500, 1000, -1], [10, 500, 1000, "All"]],
                pageLength: 10,
            });
        });
    </script>
    <script>
        $('#myTable1').DataTable({
            "order": [],            
        });
    </script>
    <script>
        $(document).ready(function () {
            $('.select2').select2({
                placeholder: "Search...",
                allowClear: true,
                width: '100%',
                height: '100%'
            });
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const elements = document.querySelectorAll('.btn, .nav-item');

            elements.forEach(function (el) {
                el.addEventListener('click', function () {
                    $('#loading').fadeIn(200);
                    setTimeout(() => {
                        $('#loading').fadeOut(200);
                    }, 1000);
                });
            });
        });

        function showLoader() {
            $('#loading').fadeIn(200);
        }

        function hideLoader() {
            $('#loading').fadeOut(200);
        }

        $(document).ajaxStart(function () {
            showLoader();
        });

        $(document).ajaxStop(function () {
            hideLoader();
        });
    </script>
    <script>
        $(document).on('click', '#sidenavToggle', function () {
            const sidenav = $('#sidenav-main');
            sidenav.toggleClass('collapsed');
        });
    </script>

    @stack('scripts')
</body>

</html>