@extends('layouts.index', ['subHeader' => 'Nuevo Reporte de Actividades'])

@section('header')
    <a href="{{ route('home') }}" class="text-decoration-none text-dark">Dashboard </a>
    <a href="{{ route('reportes.index') }}" class="text-decoration-none text-dark">/ Reportes</a>
    <span>/ Nuevo reporte</span>
@endsection

@section('content')
    <div class="">
        <div class=" d-flex justify-content-end">
            <div class="btn-group" role="group" aria-label="">
                <a href="{{route('reportes.index')}}" type="button" class="btn btn-back btn-lg ">
                    <i class="bi bi-arrow-left-circle-fill"></i> Atrás
                </a>
            </div>
        </div>
        <br>
    </div>
    <br>
    <div class="container-fluid shadow-s p-4">
        <form class="row g-3">

            <h1 class="fs-3 fw-bolder">Nuevo Reporte de Actividades</h1>
            <div class="col-md-6">
                <label for="inputEmail4" class="form-label fw-bolder ">Tipo de Reporte</label>
                <input type="email" class="form-control fromcss form-control-lg" id="" placeholder="Campo">
            </div>
            <div class="col-md-6">
                <label for="inputState" class="form-label fw-bolder">Responsable (CIME)</label>
                <select id="inputState" class="form-select form-select-lg fromcss">
                    <option selected>Responsable (CIME)</option>
                    <option>...</option>
                </select>
            </div>

            <hr>

            <div class="col-md-6">
                <label for="inputState" class="form-label fw-bolder">Fecha</label>
                <input type="date" class="form-control form-control-lg fromcss" id="inputEmail4" placeholder="Campo">
            </div>
            <div class="col-md-6">
                <div class="g-3">
                    <div class="mb-3">
                        <label for="" class="form-label fw-bolder">Cantidad</label>
                        <input type="number" class="form-control form-control-lg fromcss" id="" placeholder="0">
                    </div>
                    <div class="mb-3">
                        <label for="" class="form-label fw-bolder">Número de tarjetas</label>
                        <input type="number" class="form-control form-control-lg fromcss" id="" placeholder="0">
                    </div>
                    <div class="mb-3">
                        <label for="" class="form-label fw-bolder">Jornada</label>
                        <input type="number" class="form-control form-control-lg fromcss" id=""
                            placeholder="Revista Nocturna">
                    </div>
                    <div class="mb-3">
                        <label for="" class="form-label fw-bolder">Articulo</label>
                        <input type="number" class="form-control form-control-lg fromcss" id=""
                            placeholder="Articulo">
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <label for="inputState" class="form-label fw-bolder">Reporte</label>
                <div class="mb-3">
                    <textarea class="form-control fromcss form-control-lg" id="" rows="3 " placeholder="Descripción"></textarea>
                </div>
            </div>

            <br>
            <div class="col-12 d-flex justify-content-end">
                <div class="flex-row g-4 w-100 justify-content-end">
                    <button class=" btn btn-lg mb-3 btn-cancelar" type="submit">Cancelar</button>
                    <button class=" btn btn-lg mb-3 btn-enviar" type="submit">Guardar</button>
                </div>
            </div>
        </form>
    </div>
@endsection