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

<head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-90680653-2"></script>

    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());

        gtag('config', 'UA-90680653-2');
    </script>


    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" type="image/x-icon" href="{{ asset('img/MDS_LOGO.png') }}">
    <link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css" rel="stylesheet"
        type="text/css" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/fontawesome.min.css" />
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css" rel="stylesheet">

    <link href="{{ url('plugins') }}/components/datatables/jquery.dataTables.min.css" rel="stylesheet"
        type="text/css" />
    <!--<link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />-->
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.dataTables.min.css" />
    <!-- <link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css"/>
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/1.0.7/css/responsive.dataTables.min.css"/> -->

    {{-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"> --}}
    <!-- Twitter -->
    <!-- <meta name="twitter:site" content="@bootstrapdash">
    <meta name="twitter:creator" content="@bootstrapdash">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Azia">
    <meta name="twitter:description" content="Responsive Bootstrap 5 Dashboard Template">
    <meta name="twitter:image" content="https://www.bootstrapdash.com/azia/img/azia-social.png"> -->

    <!-- Facebook -->
    <!-- <meta property="og:url" content="https://www.bootstrapdash.com/azia">
    <meta property="og:title" content="Azia">
    <meta property="og:description" content="Responsive Bootstrap 5 Dashboard Template">

    <meta property="og:image" content="https://www.bootstrapdash.com/azia/img/azia-social.png">
    <meta property="og:image:secure_url" content="https://www.bootstrapdash.com/azia/img/azia-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="600"> -->

    <!-- Meta -->
    <meta name="description" content="Responsive Bootstrap 5 Dashboard Template">
    <meta name="author" content="BootstrapDash">

    <title>M.D.S Group Of Companies - Supply Chain Management</title>
    @include('layouts.css')
    <style>
        .hide-content {
            visibility: hidden;
        }

        @media print {
            .no-print {
                display: none !important;
            }
        }

        .loader {
            --d: 22px;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background-color: #00beda;
            /* Ensuring visibility */
            box-shadow:
                calc(1 * var(--d)) calc(0 * var(--d)) 0 0 #00beda,
                calc(0.707 * var(--d)) calc(0.707 * var(--d)) 0 1px #00beda,
                calc(0 * var(--d)) calc(1 * var(--d)) 0 2px #00beda,
                calc(-0.707 * var(--d)) calc(0.707 * var(--d)) 0 3px #00beda,
                calc(-1 * var(--d)) calc(0 * var(--d)) 0 4px #00beda,
                calc(-0.707 * var(--d)) calc(-0.707 * var(--d)) 0 5px #00beda,
                calc(0 * var(--d)) calc(-1 * var(--d)) 0 6px #00beda;
            animation: spin 1s infinite linear;
            /* Changed to linear spin */

            /* Positioning to center the loader */
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
                /* Starting point */
            }

            100% {
                transform: rotate(360deg);
                /* Full rotation */
            }
        }


        .select2-container {
            width: 100% !important;
        }
    </style>
</head>

<body onload="startTime()">
    <div class="loader"></div>
    {{-- <div id="preloader" class="loadscreen">
        <div class="loader"></div>
    </div> --}}

    <div id="admin-dashboard" class="hide-content">
        @include('layouts.header')

        <div class="az-content pd-y-20 pd-lg-y-30 pd-xl-y-40">
            <div class="container-fluid">
                <div class="az-content-body  d-flex flex-column">

                    {{-- <div class="card p-3 " style="border-radius: 5px"> --}}
                    @yield('content')
                    {{-- </div> --}}
                </div>
            </div><!-- container -->
        </div><!-- az-content -->
        <!-- Container-fluid Ends-->

        <!-- footer start-->
        <audio class="my_audio d-none" controls>
            <source src="{{ asset('/noti_1.mp3') }}">
        </audio>
        <button id="play_noti" class="d-none" onclick="play_audio('play')">Play</button>
        @include('layouts.footer')
    </div>

    <!-- latest jquery-->
    @include('layouts.script')
    {{-- @jquery
    @toastr_js
    @toastr_render --}}
    <!-- Plugin used-->
    <script src="{{ url('plugins') }}/components/datatables/jquery.dataTables.min.js"></script>
    <!-- start - This is for export functionality only -->
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
    <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
    <script src="{{ url('plugins') }}/components/datatables/jquery.dataTables.min.js"></script>



    {{-- <script type="text/javascript">
        if ($(".page-wrapper").hasClass("horizontal-wrapper")) {
            $(".according-menu.other").css("display", "none");
            $(".sidebar-submenu").css("display", "block");

        }
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(function() {
                document.getElementById('preloader').style.display = 'none';
                document.getElementById('admin-dashboard').classList.remove('hide-content');
            }, 3000); // Adjust the timeout to match your needs
        });
    </script> --}}
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Hide the loader and show the content
            const loader = document.querySelector('.loader');
            const content = document.getElementById('admin-dashboard');
            setTimeout(() => {
                loader.style.visibility = 'hidden';
                content.classList.remove('hide-content');
            }, 500); // Adjust as necessary
        });
    </script>

    <script>
        // amount formatting
        function formatWithCommas(input) {
            // Remove all non-digit characters except commas
            let value = input.value.replace(/[^0-9]/g, '');

            // Format the value with commas
            let formattedValue = value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

            // Set the input field with the formatted value
            input.value = formattedValue;
        }
    </script>

    <!-- ===== Datatables JS End ===== -->
    <link rel="stylesheet" href="https://cdn.datatables.net/rowgroup/1.0.2/css/rowGroup.dataTables.min.css"
        type="text/css">
    <script src="https://cdn.datatables.net/rowgroup/1.0.2/js/dataTables.rowGroup.min.js"></script>

    <script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
    <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>


    @stack('scripts')



    <script>
        $(document).ready(function() {
            $('.js-example-basic-multiple').select2();

            $('.fc-datepicker').datepicker({
                showOtherMonths: true,
                selectOtherMonths: true
            });

            $('#datepickerNoOfMonths').datepicker({
                showOtherMonths: true,
                selectOtherMonths: true,
                numberOfMonths: 2
            });

            // AmazeUI Datetimepicker
            $('#datetimepicker').datetimepicker({
                format: 'yyyy-mm-dd hh:ii',
                autoclose: true
            });
            $('.datetimepickertime').datetimepicker({
                format: 'LT'
            });
            // jQuery Simple DateTimePicker
            $('#datetimepicker2').appendDtpicker({
                closeOnSelected: true,
                onInit: function(handler) {
                    var picker = handler.getPicker();
                    $(picker).addClass('az-datetimepicker');
                }
            });

            new Picker(document.querySelector('#datetimepicker3'), {
                headers: true,
                format: 'MMMM DD, YYYY HH:mm',
                text: {
                    title: 'Pick a Date and Time',
                    year: 'Year',
                    month: 'Month',
                    day: 'Day',
                    hour: 'Hour',
                    minute: 'Minute'
                },
            });
        });
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>

</html>

