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

<head>
    <title>Trường Đại Học FPT</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{ asset('admin') }}/css/bootstrap.min.css" />
    <link rel="stylesheet" href="{{ asset('admin') }}assets/css/templatemo.css" />
    <link rel="stylesheet" href="{{ asset('admin') }}assets/css/customsize.css" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link rel="icon" href="{{ asset('admin') }}/img/banner_home/logo_web.jpg" type="image/x-icon" />
</head>

<style>
    .carousel-indicators button {
        width: 20px !important;
        height: 20px !important;
        border-radius: 50%;
        background-color: #e22803 !important;
        border: none;
    }

    .carousel-indicators .active {
        background-color: #fff;
        /* Màu nền của nút đang hoạt động */
    }

    .bg-header {
        background: linear-gradient(to right, #ffffff, #ff3c00) !important;
        width: 100%;
        height: 100px;
    }

    .pading-banner {
        padding-bottom: 70px;
    }

    .bg-footer {
        background-color: #000049;
    }
</style>

<body>
    <!-- Header -->
    <nav class="navbar navbar-expand-lg bg-body-tertiary px-5">
        <div class="container-fluid">
            <a class="navbar-brand" href="{{ route('home') }}">
                <img src="{{ asset(env('LOGO')) }}" alt="" width="125px">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
                aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <div class="me-auto"></div>
                <a href="{{ route('login.index', ['role_id' => 4]) }}" class="btn btn-dark me-4">Cán Bộ Đào Tạo</a>
                <a href="{{ route('login.index', ['role_id' => 3]) }}" class="btn btn-dark me-4">Giảng Viên</a>
                <a href="{{ route('login.index', ['role_id' => 2]) }}" class="btn btn-dark me-4">Sinh Viên</a>
                <a href="{{ route('login.index', ['role_id' => 1]) }}" class="btn btn-dark me-4">Quản Trị Viên</a>
            </div>
        </div>
    </nav>


    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
        <div class="offcanvas-body mt-3">
            <div><a href="{{ route('login.index', ['role_id' => 4]) }}" class="btn btn-dark mb-3 w-100">Cán Bộ Đào
                    Tạo</a></div>
            <div><a href="{{ route('login.index', ['role_id' => 3]) }}" class="btn btn-dark mb-3 w-100">Giảng Viên</a>
            </div>
            <div><a href="{{ route('login.index', ['role_id' => 2]) }}" class="btn btn-dark mb-3 w-100">Sinh Viên</a>
            </div>
            <div><a href="{{ route('login.index', ['role_id' => 1]) }}" class="btn btn-dark mb-3 w-100">Quản Trị
                    Viên</a></div>
        </div>
    </div>
    <!-- Close Header -->

    <!-- Start Banner Hero -->
    <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
        <div class="pading-banner">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="{{ asset('default/banner/banner-qlsv_01.png') }}" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="{{ asset('default/banner/banner-qlsv_01.png') }}" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                    </div>
                </div>
                {{-- <div class="carousel-item">
                    <img src="{{ asset('admin') }}/img/banner_home/banner_2.jpg" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="{{ asset('admin') }}/img/banner_home/banner_3.jpg" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                    </div>
                </div> --}}
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
                data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
                data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"
                aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
                aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
                aria-label="Slide 3"></button>
        </div>
    </div>
    <!-- End Banner Hero -->
    <!-- Start Footer -->
    <footer class="bg-footer" id="tempaltemo_footer">
        <div class="container p-5">
            <div class="text-center">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d29793.9884588654!2d105.81636405839674!3d21.02273835997583!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3135ab9bd9861ca1%3A0xe7887f7b72ca17a9!2zSMOgIE7hu5lpLCBWaeG7h3QgTmFt!5e0!3m2!1svi!2s!4v1734939706576!5m2!1svi!2s" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                
                <h2 class="text-white">Trụ Sở Chính Tại Tòa N Đường Trần Hưng Đạo, Quận Ninh Kiều, Cần Thơ</h2>
            </div>

        </div>

        <div class="w-100 bg-light py-3 ">
            <div class="container">
                <div class="row pt-2">
                    <div class="col-12">
                        <p class="text-center text-dark">
                            Đại học FPT © 2026, All Rights Reserved
                        </p>
                    </div>
                </div>
            </div>
        </div>

    </footer>
    <!-- End Footer -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
        integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"
        integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous">
    </script>

    <!-- jQuery Scrollbar -->
    <script src="{{ asset('admin') }}/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>

    <!-- Chart JS -->
    <script src="{{ asset('admin') }}/js/plugin/chart.js/chart.min.js"></script>

    <!-- jQuery Sparkline -->
    <script src="{{ asset('admin') }}/js/plugin/jquery.sparkline/jquery.sparkline.min.js"></script>

    <!-- Chart Circle -->
    <script src="{{ asset('admin') }}/js/plugin/chart-circle/circles.min.js"></script>

    <!-- Datatables -->
    <script src="{{ asset('admin') }}/js/plugin/datatables/datatables.min.js"></script>

    <!-- Bootstrap Notify -->
    {{-- <script src="{{ asset('admin') }}/js/plugin/bootstrap-notify/bootstrap-notify.min.js"></script> --}}

    <!-- jQuery Vector Maps -->
    <script src="{{ asset('admin') }}/js/plugin/jsvectormap/jsvectormap.min.js"></script>
    <script src="{{ asset('admin') }}/js/plugin/jsvectormap/world.js"></script>

    <!-- Sweet Alert -->
    <script src="{{ asset('admin') }}/js/plugin/sweetalert/sweetalert.min.js"></script>

    <!-- Kaiadmin JS -->
    <script src="{{ asset('admin') }}/js/kaiadmin.min.js"></script>

    <!-- Kaiadmin DEMO methods, don't include it in your project! -->
    <script src="{{ asset('admin') }}/js/setting-demo.js"></script>
    <script src="{{ asset('admin') }}/js/demo.js"></script>
    <script src="{{ asset('admin') }}/js/core/bootstrap.js"></script>

    <script src="{{ asset('admin/js/core/bootstrap.js') }}"></script>
    <script src="{{ asset('admin/js/core/bootstrap.min.js') }}"></script>
    <script src="{{ asset('admin/js/core/jquery-3.7.1.min.js') }}"></script>
    <script src="{{ asset('admin/js/core/popper.min.js') }}"></script>
</body>

</html>
