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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate, max-age=0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <!-- Title -->
    <title><?= $title ?></title>

    <!-- Favicons -->
    <link href="<?= base_url('assets/img/logo.png') ?>" rel="icon">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com" rel="preconnect">
    <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
        rel="stylesheet">

    <!-- Vendor CSS Files -->
    <link href="<?= base_url('User/assets/vendor/bootstrap-icons/bootstrap-icons.css') ?>" rel="stylesheet">
    <link href="<?= base_url('User/assets/vendor/aos/aos.css') ?>" rel="stylesheet">
    <link href="<?= base_url('User/assets/vendor/glightbox/css/glightbox.min.css') ?>" rel="stylesheet">
    <link href="<?= base_url('User/assets/vendor/swiper/swiper-bundle.min.css') ?>" rel="stylesheet">
    <link rel="stylesheet" href="<?= base_url('assets/plugins/fontawesome-free/css/all.min.css') ?>">

    <!-- DataTables CSS -->
    <link rel="stylesheet" href="<?= base_url('assets/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') ?>">
    <link rel="stylesheet" href="<?= base_url('assets/plugins/datatables-responsive/css/responsive.bootstrap4.min.css') ?>">
    <link rel="stylesheet" href="<?= base_url('assets/plugins/datatables-buttons/css/buttons.bootstrap4.min.css') ?>">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <!-- momentjs -->
    <script src="<?= base_url('assets/js/moment.js') ?>"></script>


    <!-- Main CSS File -->
    <link href="<?= base_url('User/assets/css/main.css') ?>" rel="stylesheet">

    <script src="https://uicdn.toast.com/tui.code-snippet/latest/tui-code-snippet.js"></script>
    <script src="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.js"></script>
    <script src="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.js"></script>
    <script src="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.js"></script>
    <link rel="stylesheet" href="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.css">
    <link rel="stylesheet" href="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.css">
    <link rel="stylesheet" href="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>



    <style>
        a {
            text-decoration: none;
        }

        #calendar {
            width: 100%;
            height: 800px;
        }

        /* Custom Table Styling */
        table tr td,
        table tr th {
            font-size: 0.875rem !important;
            /* 14px */
        }

        /* Custom Background Colors */
        #header {
            background-color: #e5e7eb !important;
        }

        .content .card {
            border: 2px solid #d1d5db !important;
        }

        .modal-content {
            background-color: #fff !important;
        }
    </style>

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Poppins&display=swap" rel="stylesheet">

</head>

<body class="index-page">

    <header id="header" class="header d-flex align-items-center sticky-top">
        <div class="container-fluid container-xl position-relative d-flex align-items-center">

            <a href="<?= base_url('dashboard') ?>" class="logo d-flex align-items-center me-auto">
                <!-- Uncomment the line below if you also wish to use an image logo -->
                <img src="<?= base_url('assets/img/logo.png') ?>" alt="AdminLTE Logo" width="100%" style="opacity: .8">
            </a>

            <form action="" id="proses-form" method="POST">
                <?= csrf_field() ?>
            </form>

            <nav id="navmenu" class="navmenu">

                <ul>
                    <li><a href="<?= base_url('dashboard') ?>"
                            class="nav-link text-bold  <?= $title == "Dashboard" ? 'text-primary' : '' ?>">Home</a>
                    </li>
                    <li><a href="<?= base_url('type_of_fabrics') ?>"
                            class="nav-link text-bold  <?= $title == "Jenis Kain" || $title == "Edit Jenis Kain"  ? 'text-primary' : '' ?>">Jenis Kain</a>
                    </li>
                    <li>
                        <a href="<?= base_url('model') ?>" class=" nav-link text-bold <?= $title == "Model" || $title == "Edit Model"  ? 'text-primary' : '' ?>">Model</a>
                    </li>

                    <li>
                        <a href="<?= base_url('permintaan_custom') ?>"
                            class="nav-link text-bold  <?= $title == "Pesanan Custom" || $title == "Edit Pesanan Custom"  ? 'text-primary' : '' ?>">Pesanan Custom</a>
                    </li>
                    <!-- <li><a href="<?= base_url('permintaan_perubahan') ?>"
                            class="nav-link text-bold  <?= $title == "Revisi Permintaan" || $title == "Edit Revisi Permintaan"  ? 'text-primary' : '' ?>">Revisi Permintaan</a>
                    </li> -->

                    <li>
                        <a href="<?= base_url('permintaan_custom/history') ?>"
                            class="nav-link text-bold  <?= $title == "Riwayat Pesanan" || $title == "Edit Riwayat Pesanan"  ? 'text-primary' : '' ?>">Riwayat Pesanan</a>
                    </li>

                    <!-- <li class="">
                        <a href="<?= base_url('riwayat_perubahan') ?>"
                            class="nav-link text-bold  <?= $title == "Riwayat Pesanan" || $title == "Edit Riwayat Pesanan"  ? 'text-primary' : '' ?>">Riwayat Pesanan</a>
                    </li> -->

                    <li class="offset-lg-5">
                        <a class="nav-link text-bold" onclick="show_lg('<?= base_url('permintaan_custom/create') ?>')"><i class="fas fa-shopping-bag " style="font-size: 16px;"></i></a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="d-flex"><span>
                                <span class="fas fa-user" style="font-size: 16px;"></span>&nbsp;
                                <?= auth()->user()->name ?></span><i
                                class="bi bi-chevron-down toggle-dropdown"></i>
                        </a>
                        <ul>
                            <li>
                                <a href="#" class="btn btn-secondary text-white ms-2 me-2"
                                    onclick="event.preventDefault(); document.getElementById('logout-form').submit();">Logout</a>
                            </li>
                            <form id="logout-form" action="<?= base_url('logout') ?>" method="POST"
                                class="d-none">
                                <?= csrf_field() ?>
                            </form>
                        </ul>
                    </li>
                </ul>
                <i class="mobile-nav-toggle d-xl-none bi bi-list"></i>

            </nav>

        </div>
    </header>

    <main class="main">

        <?php if (isset($validation)): ?>
            <script>
                Swal.fire({
                    icon: 'error',
                    title: '<?= json_encode(implode('<br>', $validation->getErrors())) ?>, ',
                    showConfirmButton: false,
                    timer: 1500
                })
            </script>
        <?php endif ?>

        <?php if (session()->getFlashdata('errors')): ?>
            <script>
                Swal.fire({
                    icon: 'error',
                    title: '<?= json_encode(implode('<br>', session()->getFlashdata('errors'))) ?>, ',
                    showConfirmButton: false,
                    timer: 1500
                })
            </script>
        <?php endif ?>

        <?php if (session()->getFlashdata('error')): ?>
            <script>
                Swal.fire({
                    icon: 'error',
                    title: '<?= session()->getFlashdata('error') ?>',
                    showConfirmButton: false,
                    timer: 1500
                })
            </script>
        <?php endif ?>

        <?php if (session()->getFlashdata('success')): ?>
            <script>
                Swal.fire({
                    icon: 'success',
                    title: '<?= session()->getFlashdata('success') ?>',
                    showConfirmButton: false,
                    timer: 1500
                })
            </script>
        <?php endif ?>


        <?php if (session()->getFlashdata('warning')): ?>
            <script>
                Swal.fire({
                    icon: 'warning',
                    title: '<?= session()->getFlashdata('warning') ?>',
                    showConfirmButton: false,
                    timer: 1500
                })
            </script>
        <?php endif ?>

        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper pb-5">
            <!-- Main content -->
            <main class="main">
                <?php if ($title == "Dashboard"): ?>
                    <div class="container" style="max-width: 1200px; margin: 0 auto;">
                        <div id="carouselExampleIndicators" class="carousel slide shadow-lg rounded" data-ride="carousel" style="overflow: hidden;">
                            <ol class="carousel-indicators">
                                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                            </ol>
                            <div class="carousel-inner">
                                <div class="carousel-item active">
                                    <img class="d-block w-100" src="<?= base_url('assets/file/file_1.png') ?>" alt="First slide" style="max-height: 550px; object-fit: cover; object-position: center;">
                                </div>
                                <!-- <div class="carousel-item">
                                    <img class="d-block w-100" src="<?= base_url('assets/file/file_2.png') ?>" alt="Second slide" style="max-height: 550px; object-fit: cover; object-position: center;">
                                </div>
                                <div class="carousel-item">
                                    <img class="d-block w-100" src="<?= base_url('assets/file/file_3.png') ?>" alt="Third slide" style="max-height: 550px; object-fit: cover; object-position: center;">
                                </div> -->
                            </div>
                            <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </button>
                            <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </button>
                        </div>
                    </div>
                <?php endif; ?>
                <!-- About Section -->
                <section id="about" class="about section">

                    <!-- Section Title -->
                    <div class="container section-title" data-aos="fade-up">
                        <h2><?= $title ?></h2>
                        <p><?= $title ?><br></p>
                    </div><!-- End Section Title -->

                    <div class="container" style="margin-top: -4rem;">
                        <?= $this->renderSection('content') ?>

                    </div>
                    <div class="modal fade" id="detail_modal" tabindex="-1" aria-labelledby="addLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div id="page">

                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal fade" id="detail_modal_lg" tabindex="-1" aria-labelledby="addLabel" aria-hidden="true">
                        <div class="modal-dialog modal-xl">
                            <div class="modal-content">
                                <div id="page_lg">

                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </main>
            <!-- /.content -->
        </div>
        <!-- /.content-wrapper -->

        <!-- Main Footer -->

    </main>


    <form action="" id="proses-form" method="POST">
        <?= csrf_field() ?>
    </form>

    <form action="" id="delete-form" method="POST">
        <?= csrf_field() ?>
    </form>

    <script>
        $(function() {
            // Summernote
            $('#summernote').summernote()

            // CodeMirror
            CodeMirror.fromTextArea(document.getElementById("codeMirrorDemo"), {
                mode: "htmlmixed",
                theme: "monokai"
            });
        })

        $(document).ready(function() {
            // DataTable dengan konfigurasi yang benar
            $('#myTable').DataTable({
                "responsive": true,
                "lengthChange": true,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "pageLength": 10,
                "dom": "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
                "aoColumnDefs": [{
                    'bSortable': false,
                    'aTargets': [0]
                }]
            });

            $("#example1").DataTable({
                "responsive": true,
                "lengthChange": true,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "pageLength": 10,
                "dom": "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
                "aoColumnDefs": [{
                    'bSortable': false,
                    'aTargets': [0]
                }]
            });

            $('#example2').DataTable({
                "responsive": true,
                "lengthChange": true,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "pageLength": 10,
                "dom": "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
                "aoColumnDefs": [{
                    'bSortable': false,
                    'aTargets': [0]
                }]
            });

            $('#example3').DataTable({
                "responsive": true,
                "lengthChange": true,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "pageLength": 10,
                "dom": "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
                "aoColumnDefs": [{
                    'bSortable': false,
                    'aTargets': [0]
                }]
            });
        });

        $(function() {
            //Initialize Select2 Elements - only if library exists
            if (typeof $.fn.select2 !== 'undefined') {
                $('.select2').select2({
                    theme: 'bootstrap4'
                })

                //Initialize Select2 Elements
                $('.select2bs4').select2({
                    theme: 'bootstrap4'
                })
            }

            //Datemask dd/mm/yyyy
            $('#datemask').inputmask('dd/mm/yyyy', {
                'placeholder': 'dd/mm/yyyy'
            })
            //Datemask2 mm/dd/yyyy
            $('#datemask2').inputmask('mm/dd/yyyy', {
                'placeholder': 'mm/dd/yyyy'
            })
            //Money Euro
            $('[data-mask]').inputmask()

            //Date picker
            $('#reservationdate').datetimepicker({
                format: 'L'
            });

            //Date and time picker
            $('#reservationdatetime').datetimepicker({
                icons: {
                    time: 'far fa-clock'
                }
            });

            //Date range picker
            $('#reservation').daterangepicker()
            //Date range picker with time picker
            $('#reservationtime').daterangepicker({
                timePicker: true,
                timePickerIncrement: 30,
                locale: {
                    format: 'MM/DD/YYYY hh:mm A'
                }
            })
            //Date range as a button
            $('#daterange-btn').daterangepicker({
                    ranges: {
                        'Today': [moment(), moment()],
                        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                        'This Month': [moment().startOf('month'), moment().endOf('month')],
                        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                    },
                    startDate: moment().subtract(29, 'days'),
                    endDate: moment()
                },
                function(start, end) {
                    $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'))
                }
            )

            //Timepicker
            $('#timepicker').datetimepicker({
                format: 'LT'
            })

            //Bootstrap Duallistbox
            $('.duallistbox').bootstrapDualListbox()

            //Colorpicker
            $('.my-colorpicker1').colorpicker()
            //color picker with addon
            $('.my-colorpicker2').colorpicker()

            $('.my-colorpicker2').on('colorpickerChange', function(event) {
                $('.my-colorpicker2 .fa-square').css('color', event.color.toString());
            })
            // Initialize summernote only if library exists and element is present
            if (typeof $.fn.summernote !== 'undefined' && $('.summernote').length) {
                $('.summernote').summernote();
            }
        })
        // BS-Stepper Init - only if library exists and element is present
        document.addEventListener('DOMContentLoaded', function() {
            if (typeof Stepper !== 'undefined' && document.querySelector('.bs-stepper')) {
                window.stepper = new Stepper(document.querySelector('.bs-stepper'))
            }
        })

        // DropzoneJS Demo Code Start - only if library exists
        if (typeof Dropzone !== 'undefined') {
            Dropzone.autoDiscover = false

            // Get the template HTML and remove it from the doumenthe template HTML and remove it from the doument
            var previewNode = document.querySelector("#template")
            previewNode.id = ""
            var previewTemplate = previewNode.parentNode.innerHTML
            previewNode.parentNode.removeChild(previewNode)

            var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
                base_url: "/target-base_url", // Set the base_url
                thumbnailWidth: 80,
                thumbnailHeight: 80,
                parallelUploads: 20,
                previewTemplate: previewTemplate,
                autoQueue: false, // Make sure the files aren't queued until manually added
                previewsContainer: "#previews", // Define the container to display the previews
                clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
            })

            myDropzone.on("addedfile", function(file) {
                // Hookup the start button
                file.previewElement.querySelector(".start").onclick = function() {
                    myDropzone.enqueueFile(file)
                }
            })

            // Update the total progress bar
            myDropzone.on("totaluploadprogress", function(progress) {
                document.querySelector("#total-progress .progress-bar").style.width = progress + "%"
            })

            myDropzone.on("sending", function(file) {
                // Show the total progress bar when upload starts
                document.querySelector("#total-progress").style.opacity = "1"
                // And disable the start button
                file.previewElement.querySelector(".start").setAttribute("disabled", "disabled")
            })

            // Hide the total progress bar when nothing's uploading anymore
            myDropzone.on("queuecomplete", function(progress) {
                document.querySelector("#total-progress").style.opacity = "0"
            })

            // Setup the buttons for all transfers
            // The "add files" button doesn't need to be setup because the config
            // `clickable` has already been specified.
            document.querySelector("#actions .start").onclick = function() {
                myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED))
            }
            document.querySelector("#actions .cancel").onclick = function() {
                myDropzone.removeAllFiles(true)
            }
        } // End of Dropzone check

        function notif(icon, title) {
            Swal.fire({
                icon: icon,
                title: title,
                showConfirmButton: false,
                timer: 1500
            })
        }

        function notificationforDelete(event, el) {
            event.preventDefault();
            swal.fire({
                title: "Apakah Anda Yakin Menghapus Data Ini?",
                icon: "warning",
                closeOnClickOutside: false,
                showCancelButton: true,
                confirmButtonText: 'Iya',
                confirmButtonColor: '#6777ef',
                cancelButtonText: 'Batal',
                cancelButtonColor: '#d33',
            }).then((result) => {
                if (result.value) {
                    $("#delete-form").attr('action', $(el).attr('href'));
                    $("#delete-form").submit();
                }
            });
        }


        $(function() {
            // Summernote
            $('.summernote').summernote()

            // CodeMirror
            CodeMirror.fromTextArea(document.getElementById("codeMirrorDemo"), {
                mode: "htmlmixed",
                theme: "monokai"
            });
        })

        function prosesData(event, el, pesan, status) {
            event.preventDefault();
            swal.fire({
                title: pesan,
                icon: "warning",
                closeOnClickOutside: false,
                showCancelButton: true,
                confirmButtonText: 'Iya',
                confirmButtonColor: '#6777ef',
                cancelButtonText: 'Batal',
                cancelButtonColor: '#d33',
            }).then((result) => {
                if (result.value) {
                    $("#proses-form").attr('action', $(el).attr('href'));
                    $('#status').val(status);
                    $("#proses-form").submit();
                }
            });
        }



        function show(base_url) {
            $.get(base_url, function(data) {
                $("#page").html(data);
                $('#detail_modal').modal('show');
            });
        }



        function show_lg(base_url) {
            // Reset global variables dulu
            if (typeof window.resetFormState === 'function') {
                window.resetFormState();
            }

            // Clear semua global functions
            window.selectModelFromGrid = null;
            window.selectFabricFromGrid = null;
            window.saveCustomSize = null;
            window.deleteCustomSize = null;
            window.closeModalOnly = null;

            // Load konten baru - langsung replace tanpa tutup modal
            $.get(base_url, function(data) {
                $("#page_lg").html(data);

                // Trigger manual initialization setelah HTML loaded
                setTimeout(function() {
                    if (typeof window.initializeCurrentForm === 'function') {
                        window.initializeCurrentForm();
                    }
                }, 50);

                // Jika modal belum terbuka, buka
                if (!$('#detail_modal_lg').hasClass('show')) {
                    $('#detail_modal_lg').modal('show');
                }
            });
        }

        var state = false;

        function toggle(id) {
            if (state) {
                document.getElementById(id).setAttribute("type", "password");
                document.getElementById("lock").setAttribute("class", "fas fa-lock");
                state = false;
            } else {
                document.getElementById(id).setAttribute("type", "text");
                document.getElementById("lock").setAttribute("class", "fas fa-unlock");
                state = true;
            }
        }

        function toggle1(id) {
            if (state) {
                document.getElementById(id).setAttribute("type", "password");
                document.getElementById("lock1").setAttribute("class", "fas fa-lock");
                state = false;
            } else {
                document.getElementById(id).setAttribute("type", "text");
                document.getElementById("lock1").setAttribute("class", "fas fa-unlock");
                state = true;
            }
        }
    </script>


    <!-- Scroll Top -->
    <a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i
            class="bi bi-arrow-up-short"></i></a>

    <!-- Preloader -->
    <div id="preloader"></div>

    <!-- Vendor JS Files -->
    <script src="<?= base_url('User/assets/vendor/php-email-form/validate.js') ?>"></script>
    <script src="<?= base_url('User/assets/vendor/aos/aos.js') ?>"></script>
    <script src="<?= base_url('User/assets/vendor/glightbox/js/glightbox.min.js') ?>"></script>
    <script src="<?= base_url('User/assets/vendor/imagesloaded/imagesloaded.pkgd.min.js') ?>"></script>
    <script src="<?= base_url('User/assets/vendor/isotope-layout/isotope.pkgd.min.js') ?>"></script>
    <script src="<?= base_url('User/assets/vendor/purecounter/purecounter_vanilla.js') ?>"></script>
    <script src="<?= base_url('User/assets/vendor/waypoints/noframework.waypoints.js') ?>"></script>
    <script src="<?= base_url('User/assets/vendor/swiper/swiper-bundle.min.js') ?>"></script>

    <!-- DataTables  & Plugins -->
    <script src="<?= base_url('assets/plugins/datatables/jquery.dataTables.min.js') ?>"></script>
    <script src="<?= base_url('assets/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') ?>"></script>
    <script src="<?= base_url('assets/plugins/datatables-responsive/js/dataTables.responsive.min.js') ?>"></script>
    <script src="<?= base_url('assets/plugins/datatables-responsive/js/responsive.bootstrap4.min.js') ?>"></script>
    <script src="<?= base_url('assets/plugins/datatables-buttons/js/dataTables.buttons.min.js') ?>"></script>
    <script src="<?= base_url('assets/plugins/datatables-buttons/js/buttons.bootstrap4.min.js') ?>"></script>
    <script src="<?= base_url('assets/plugins/jszip/jszip.min.js') ?>"></script>
    <script src="<?= base_url('assets/plugins/pdfmake/pdfmake.min.js') ?>"></script>
    <script src="<?= base_url('assets/plugins/pdfmake/vfs_fonts.js') ?>"></script>
    <script src="<?= base_url('assets/plugins/datatables-buttons/js/buttons.html5.min.js') ?>"></script>
    <script src="<?= base_url('assets/plugins/datatables-buttons/js/buttons.print.min.js') ?>"></script>
    <script src="<?= base_url('assets/plugins/datatables-buttons/js/buttons.colVis.min.js') ?>"></script>


    <!-- Main JS File -->
    <script src="<?= base_url('User/assets/js/main.js') ?>"></script>

</body>

</html>