@extends('layouts.pedidos')

@section('estilo')
    <style>
        /* Custom default button */
        .btn-secondary,
        .btn-secondary:hover,
        .btn-secondary:focus {
        color: #333;
        text-shadow: none; /* Prevent inheritance from `body` */
        }
        /*
        * Base structure
        */
        body {
        text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
        box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
        }
        .cover-container {
        max-width: 42em;
        }
        /*
        * Header
        */
        .nav-masthead .nav-link {
        padding: .25rem 0;
        font-weight: 700;
        color: rgba(255, 255, 255, .5);
        background-color: transparent;
        border-bottom: .25rem solid transparent;
        }

        .nav-masthead .nav-link:hover,
        .nav-masthead .nav-link:focus {
        border-bottom-color: rgba(255, 255, 255, .25);
        }

        .nav-masthead .nav-link + .nav-link {
        margin-left: 1rem;
        }

        .nav-masthead .active {
        color: #fff;
        border-bottom-color: #fff;
        }
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
            font-size: 3.5rem;
            }
        }
    </style>
@endsection

@section('cuerpo')
    <div class="container d-flex w-100 h-100 p-3 mx-auto flex-column">
        <div class="row d-flex justify-content-center rounded-3 my-3 p-3 bg-light bg-gradient">
            <div class="col-md-3 text-center align-middle"><img class="img-fluid" style="max-width: 15rem;" src="{{ asset('img/logo.png') }}" alt=""></div>
            <div class="col-md-6 display-4 text-center">
                <div class="d-flex align-middle mt-3 text-dark">
                    Programa de estudios de Electricidad Industrial
                </div>
            </div>
            <div class="col-md-3 text-center align-middle"><img class="img-fluid" src="{{ asset('img/i-logo.png') }}" alt=""></div>
        </div>
        <!--header class="mb-auto">
            <div>
                <h3 class="float-md-start mb-0">Cover</h3>
                <nav class="nav nav-masthead justify-content-center float-md-end">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                    <a class="nav-link" href="#">Features</a>
                    <a class="nav-link" href="#">Contact</a>
                </nav>
            </div>
        </header-->

        <main class="px-3 mt-auto">
            <div class="border border-2 rounded-3 col-8 mx-auto py-4">
                <h1>Pedido de Materiales para Laboratorio</h1>
                <p class="lead">Registre sus datos personales, de la unidad didáctica y los materiales a utilizar.</p>
                <p class="lead">
                    <a href="{{ route('pedidos_ingresar') }}" class="btn btn-lg btn-dark bg-gradient col-3">Registrar pedido</a>
                </p>
            </div>
        </main>

        <footer class="mt-auto text-white-50">
            <p>Consultas y reportes: <a href="#" class="text-white">electricidadindustrial@iestp-ppd.edu.pe</a></p>
        </footer>
    </div>
@endsection