@extends('layouts.index', ['subHeader' => 'Carga de Recursos'])

@section('header')
    <a href="{{ route('home') }}" class="text-decoration-none text-dark">Dashboard</a>
    <a href="{{ route('cargar-recursos.index') }}" class="text-decoration-none text-dark"> / Carga de Recursos</a>
@endsection

@section('content')
    <div class="">
        <div class="row"> <!-- Agregando espacio entre columnas -->
            <div class="col">
                <div class="shadow-s"><!-- Agregando margen inferior -->
                    <div class="d-flex flex-column p-4">
                        <h1 class="fs-3x fw-bolder">Nueva carga de recursos</h1>
                        <br>
                        <form id="formCargarRecurso" enctype="multipart/form-data" class="row">
                            <div class="col-md-4">
                                <label for="inputState" class="form-label fw-bolder">Tipo de recurso</label>
                                <select id="inputState" class="form-select form-control fromcss form-select-lg" data-control="select2" data-placeholder="Tipo de recurso" required name="tipo">
                                    <option></option>
                                    <option value="1">Areas - Departamentos</option>
                                    <option value="2">Registros</option>
                                    <option value="3">Visitantes</option>
                                    {{-- <option value="4">Funcionarios</option> --}}
                                    <option value="5">Viajeros</option>
                                    <option value="6">Personal</option>
                                    <option value="7">Entidad</option>
                                    <option value="8">Proveedor</option>
                                    {{-- <option value="9">Departamento</option> --}}
                                </select>
                            </div>
                            <div class="col-md-8">
                                <label for="" class="form-label fw-bolder">Cargue del recurso</label>
                                <input class="form-control btn-outline-p form-control-lg" required
                                    accept=".xlsx, .xls, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                                    name="archivo" type="file" id="formFile">
                            </div>

                            <div class="col-12 d-flex justify-content-end mt-4">
                                <div class="flex-row g-4 w-100">
                                    <div class="">
                                        <button class=" btn btn-lg mb-3 btn-cancelar" type="reset">Cancelar</button>
                                        <button class=" btn btn-lg mb-3 btn-enviar" type="submit">Guardar</button>
                                    </div>
                                </div>
                            </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <br>
    <div class="container-fluid shadow-s p-4">
        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link linktab active fw-bolder" id="pills-one-tab" data-bs-toggle="pill"
                    data-bs-target="#pills-one" type="button" role="tab" aria-controls="pills-one"
                    aria-selected="true">Cargas</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link linktab fw-bolder" id="pills-two-tab" data-bs-toggle="pill"
                    data-bs-target="#pills-two" type="button" role="tab" aria-controls="pills-two"
                    aria-selected="false">Plantillas</button>
            </li>
        </ul>
        <div class="tab-content" id="pills-tabContent">
            <div class="tab-pane fade show active" id="pills-one" role="tabpanel" aria-labelledby="pills-one-tab">
                <div class="table-responsive">
                    <table class="table table-striped table-hover" id="tablaHistorialCarga">
                        <thead>
                            <tr>
                                <th scope="col" class="grayt">Tipo de recurso</th>
                                <th scope="col" class="grayt">Fecha</th>
                                <th scope="col" class="grayt">Archivo</th>
                                <th scope="col" class="grayt">Tipo de archivo</th>
                                <th scope="col" class="grayt">Responsable</th>
                                <th scope="col" class="grayt"></th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
            <div class="tab-pane fade" id="pills-two" role="tabpanel" aria-labelledby="pills-two-tab">
                <div class="table-responsive">
                    <table class="table table-striped table-hover" id="tablaArchivos">
                        <thead>
                            <tr>
                                <th scope="col" class="grayt">Tipo de recurso</th>
                                <th scope="col" class="grayt">Nombre</th>
                                <th scope="col" class="grayt">Descargar</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Areas - Departamentos</td>
                                <td>Areas_Departamentos.xlsx</td>
                                <td>
                                    <a href="{{ asset('archivos-carga/Areas_Departamentos.xlsx') }}" class="btn btn-outline-p">
                                        <i class="bi bi-download"></i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>Vehiculos</td>
                                <td>Vehiculos.xlsx</td>
                                <td>
                                    <a href="{{ asset('archivos-carga/Vehiculos.xlsx') }}" class="btn btn-outline-p">
                                        <i class="bi bi-download"></i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>Visitantes</td>
                                <td>Visitantes.xlsx</td>
                                <td>
                                    <a href="{{ asset('archivos-carga/Visitantes.xlsx') }}" class="btn btn-outline-p">
                                        <i class="bi bi-download"></i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>Funcionarios</td>
                                <td>Funcionarios.xlsx</td>
                                <td>
                                    <a href="{{ asset('archivos-carga/Funcionarios.xlsx') }}" class="btn btn-outline-p">
                                        <i class="bi bi-download"></i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>Personal</td>
                                <td>Personal.xlsx</td>
                                <td>
                                    <a href="{{ asset('archivos-carga/Personal.xlsx') }}" class="btn btn-outline-p">
                                        <i class="bi bi-download"></i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>Departamento</td>
                                <td>Departamento.xlsx</td>
                                <td>
                                    <a href="{{ asset('archivos-carga/Departamento.xlsx') }}" class="btn btn-outline-p">
                                        <i class="bi bi-download"></i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>Proveedor</td>
                                <td>Proveedor.xlsx</td>
                                <td>
                                    <a href="{{ asset('archivos-carga/Proveedor.xlsx') }}" class="btn btn-outline-p">
                                        <i class="bi bi-download"></i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>Entidad</td>
                                <td>Entidad.xlsx</td>
                                <td>
                                    <a href="{{ asset('archivos-carga/Entidad.xlsx') }}" class="btn btn-outline-p">
                                        <i class="bi bi-download"></i>
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="{{ mix('js/cargar-recursos/principal.js') }}"></script>
@endsection