@extends('dashboardAdmin.plantilla')

@section('titulo')
    Administrar carousel
@endsection

@section('tituloDos')
    <a href="">Carousel</a>
@endsection
<link rel="apple-touch-icon" href="assets/img/logofavi.png">
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico">

<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/templatemo.css">
<link rel="stylesheet" href="assets/css/custom.css">

<!-- Carga las fuentes -->
<link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;700;900&display=swap">
<link rel="stylesheet" href="assets/css/fontawesome.min.css">

@section('contenido')
    <div class="card">
        <div class="card-body">

            <div class="container-fluid">
                <h6 class="display-6">Carousel</h6>
                <hr>
                <!-- Inicio de carousel -->
                <div id="template-mo-zay-hero-carousel" class="carousel slide" data-bs-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-bs-target="#template-mo-zay-hero-carousel" data-bs-slide-to="0" class="active"></li>
                        <li data-bs-target="#template-mo-zay-hero-carousel" data-bs-slide-to="1"></li>
                        <li data-bs-target="#template-mo-zay-hero-carousel" data-bs-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="carousel-item active">

                            <div class="container">

                                <div class="row p-5">
                                    <div class="mx-auto col-md-8 col-lg-6 order-lg-last">
                                        <img class="img-fluid" src="./assets/img/banner_img_01.jpg" alt=""
                                            style="height: 2rem">
                                    </div>
                                    <div class="col-lg-6 mb-0 d-flex align-items-center">
                                        <div class="text-align-left align-self-center">
                                            <h1 class="h1 text-success"><b>Zay</b> eCommerce</h1>
                                            <h3 class="h2">Tiny and Perfect eCommerce Template</h3>
                                            <button class="btn btn-lg btn-success">Ver más</button>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="container">
                                <div class="row p-5">
                                    <div class="mx-auto col-md-8 col-lg-6 order-lg-last">
                                        <img class="img-fluid" src="./assets/img/banner_img_02.jpg" alt="">
                                    </div>
                                    <div class="col-lg-6 mb-0 d-flex align-items-center">
                                        <div class="text-align-left">
                                            <h1 class="h1">Proident occaecat</h1>
                                            <h3 class="h2">Aliquip ex ea commodo consequat</h3>
                                            <button class="btn btn-lg btn-success">Ver más</button>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="carousel-item">

                            <div class="container">
                                <div class="row p-5">
                                    <div class="mx-auto col-md-8 col-lg-6 order-lg-last">
                                        <img class="img-fluid" src="./assets/img/banner_img_03.jpg" alt="">
                                    </div>
                                    <div class="col-lg-6 mb-0 d-flex align-items-center">
                                        <div class="text-align-left">
                                            <h1 class="h1">Repr in voluptate</h1>
                                            <h3 class="h2">Ullamco laboris nisi ut </h3>
                                            <button class="btn btn-lg btn-success">Ver más</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <a class="carousel-control-prev text-decoration-none w-auto ps-3" href="#template-mo-zay-hero-carousel"
                        role="button" data-bs-slide="prev">
                        <i class="fas fa-chevron-left"></i>
                    </a>
                    <a class="carousel-control-next text-decoration-none w-auto pe-3" href="#template-mo-zay-hero-carousel"
                        role="button" data-bs-slide="next">
                        <i class="fas fa-chevron-right"></i>
                    </a>
                </div>
            </div>
            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                <a href="{{ route('dashboardAdmin.carousel.edit') }}" class="btn btn-lg btn-warning m-3">Modificar Slider<i
                        class="fas fa-pencil-alt"></i></a>
            </div>
            <!-- Fin carusel -->

            <!-- Start Script -->
            <script src="assets/js/jquery-1.11.0.min.js"></script>
            <script src="assets/js/jquery-migrate-1.2.1.min.js"></script>
            <script src="assets/js/bootstrap.bundle.min.js"></script>
            <script src="assets/js/templatemo.js"></script>
            <script src="assets/js/custom.js"></script>
            <!-- End Script -->
        </div>
    </div>
@endsection