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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Laravel') }}</title>
    <!-- Google Fonts -->
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/fontawesome-free/css/all.min.css') }}">
    <!-- AdminLTE -->
    <link rel="stylesheet" href="{{ asset('assets/css/adminlte.min.css') }}">
    <!-- DataTables CDN -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            margin: 0;
        }

        #app {
            flex: 1;
            /* This allows the main content to take up remaining space */
        }

        .irfan-footer {
            background-color: #fff;
            border-top: 1px solid #dee2e6;
            color: #869099;
            padding: 1rem; 
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- Display Errors or Success Messages -->
        {{-- @if (session()->has('error'))
            <div class="alert alert-danger" role="alert">
                This is a danger alert—check it out!
            </div>
        @endif --}}

        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        <!-- Include Navbar and Sidebar if needed -->
        {{-- @include('layouts.navbar') --}}
        {{-- @include('layouts.sidebar') --}}

        <!-- Main Content -->
        <main class="py-4">
            @yield('content')
        </main>
    </div>

    <footer class="irfan-footer">
        <strong>Final Year Project 23/24 <a href="https://adminlte.io">U2102739</a>.</strong>
        NURAUFA NATASHA
        <div class="float-right d-none d-sm-inline-block">
            <b>FSKTM</b> .FMIS
        </div>
    </footer>

    <!-- jQuery (required for DataTables) -->
    <script src="{{ asset('assets/plugins/jquery/jquery.min.js') }}"></script>
    <!-- Bootstrap 4 -->
    <script src="{{ asset('assets/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <!-- AdminLTE App -->
    <script src="{{ asset('assets/js/adminlte.min.js') }}"></script>
    <!-- DataTables CDN -->
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

    <!-- Initialize DataTables (example) -->
    <script>
        $(document).ready(function() {
            $('#example').DataTable(); // Initialize DataTables on a table with the id `example`
        });
    </script>

    <!-- Custom JS (optional) -->
    <script>
        // Example function to update file name when selecting a file
        function updateFileName(input) {
            const fileName = input.files[0].name;
            const label = input.nextElementSibling;
            label.innerText = fileName;
        }
    </script>
    @yield('scripts')
</body>

</html>
