<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>@yield('title') &mdash; {{ config('app.name', 'Laravel') }}</title>

    <!-- General CSS Files -->
    <link rel="stylesheet" href="{{ asset('admin/library/bootstrap/dist/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
        integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    @stack('style')

    <!-- Template CSS -->
    <link rel="stylesheet" href="{{ asset('admin/css/style.css') }}">
    <link rel="stylesheet" href="{{ asset('admin/css/components.css') }}">
    <link rel="stylesheet" href="{{ asset('admin/css/custom.css') }} ">

    <!-- Toast -->
    <link href="{{ asset('assets/css/toastr/toastify.min.css') }}" rel="stylesheet">

    <!--datatable--->
    <link href="{{ asset('admin/css/datatable/jquery.dataTables.min.css') }}" rel="stylesheet">
    <link href="{{ asset('admin/css/datatable/dataTables.bootstrap4.min.css') }}" rel="stylesheet">

    {{-- @vite(['resources/sass/app.scss', 'resources/js/app.js']) --}}
    @vite(['resources/js/app.js'])

    <style>
        .dataTables_wrapper .dataTables_paginate .paginate_button:hover{
            background: transparent!important;
            border: none!important
        }
        .text-red-600 {
            color: red;
            font-size: 12px;
        }
    </style>
</head>
</head>

<body>
    <div id="app">
        <div class="main-wrapper">
            <!-- Header -->
            @include('admin.partials.header')

            <!-- Sidebar -->
            @include('admin.partials.sidebar')

            <!-- Content -->
            @yield('main')

            <!-- Footer -->
            @include('admin.partials.footer')
        </div>
    </div>

    <!-- General JS Scripts -->
    <script src="{{ asset('admin/library/jquery/dist/jquery.min.js') }}"></script>
    <script src="{{ asset('admin/library/popper.js/dist/umd/popper.js') }}"></script>
    <script src="{{ asset('admin/library/tooltip.js/dist/umd/tooltip.js') }}"></script>
    <script src="{{ asset('admin/library/bootstrap/dist/js/bootstrap.min.js') }}"></script>
    <script src="{{ asset('admin/library/jquery.nicescroll/dist/jquery.nicescroll.min.js') }}"></script>
    <script src="{{ asset('admin/library/moment/min/moment.min.js') }}"></script>
    <script src="{{ asset('admin/js/stisla.js') }}"></script>

    @stack('scripts')

    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <!-- Template JS File -->
    <script src="{{ asset('admin/js/scripts.js') }}"></script>
    <script src="{{ asset('admin/js/custom.js') }}"></script>

    <!-- Toastr -->
    <script src="{{ asset('assets/js/toastr/toastify-js.min.js') }}"></script>

    <!-- datatable -->
    <script src="{{ asset('admin/js/datatable/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('admin/js/datatable/dataTables.bootstrap4.min.js') }}"></script>

    <!-- Alert Notifications -->
    <x-common.alert :errors="$errors" />
</body>

</html>