@extends('../layouts/partials/header')

@section('content')

    <style>
        table {
            width: 100%; /* Ocupa el 100% del ancho del contenedor */
            border-collapse: collapse; /* Opcional: para eliminar el espacio entre bordes de celdas */
        }
        .img-custom-size {
            width: 444px;
            height: 300px;
            border: 3px solid black; border-radius: 15px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
        }
        .table td {
            text-align: left;
        }

    </style>
    
<h1>Importar Contenedores desde Excel</h1>

{{-- Formulario para importar Excel --}}
<form action="{{ route('contenedores.importar') }}" method="POST" enctype="multipart/form-data">
    @csrf

    <div class="form-group mt-3">
        <input type="file" name="archivo" id="archivo" class="form-control" required>
    </div>

    <button type="submit" class="btn btn-success mt-3">Importar Excel</button>
</form>

{{-- Mensaje de éxito --}}
@if (session('success'))
<div class="alert alert-success">
    {!! session('success') !!}
</div>
@endif

{{-- Errores de importación --}}
@if(session('errores'))
    <div class="alert alert-warning">
        ⚠ Algunas filas no fueron importadas correctamente:<br>
        <strong>{!! session('errores') !!}</strong>
    </div>
@endif

@endsection

@extends('../layouts/partials/footer')