@extends('layouts.layouts')
@section('title', 'Importar Vehículos')

@section('styles')
<style>
    .container-custom {
        max-width: 1200px;
        margin: 0 auto;
        padding: 24px;
    }

    .card-form {
        background-color: #fff;
        padding: 24px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .section-title {
        font-size: 1.5rem;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 16px;
    }

    .info-text {
        color: #374151;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .info-list {
        color: #374151;
        margin-bottom: 24px;
    }

    .alert-success {
        background-color: #d1fae5;
        border-left: 4px solid #34d399;
        color: #065f46;
        padding: 16px;
        margin-bottom: 16px;
        border-radius: 4px;
    }
    
    .alert-error {
        background-color: #fee2e2;
        border-left: 4px solid #f87171;
        color: #991b1b;
        padding: 16px;
        margin-bottom: 16px;
        border-radius: 4px;
    }
    
    .form-group {
        margin-bottom: 16px;
    }
    
    .form-group label {
        display: block;
        font-size: 0.875rem;
        font-weight: 500;
        color: #374151;
        margin-bottom: 4px;
    }

    .file-input-container {
        display: block;
        width: 100%;
        font-size: 0.875rem;
        color: #6b7280;
    }
    
    .file-input {
        margin-top: 4px;
    }

    .file-input-button {
        margin-right: 16px;
        padding: 8px 16px;
        border-radius: 9999px;
        border: 0;
        font-size: 0.875rem;
        font-weight: 600;
        background-color: #eff6ff;
        color: #1d4ed8;
        transition: background-color 0.3s ease;
    }
    
    .file-input-button:hover {
        background-color: #dbeafe;
    }

    .submit-button {
        padding: 12px 24px;
        background-color: #2563eb;
        color: #fff;
        font-weight: bold;
        border-radius: 8px;
        border: none;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .submit-button:hover {
        background-color: #1d4ed8;
    }
    
    .error-message {
        color: #ef4444;
        font-size: 0.875rem;
        margin-top: 4px;
    }
</style>
@endsection

@section('mainPage')
<div class="container-custom">
    <div class="card-form">
        <h2 class="section-title">
            {{ __('Importar Vehículos') }}
        </h2>

        <p class="info-text">
            Para la carga masiva de vehículos, el archivo de Excel debe tener los siguientes encabezados en la primera fila (el orden no importa):
        </p>
        <p class="info-list">
            placa, marca, cedula, modelo, clase, flota, serial_carroceria, ano, color, tipo_combustible, estatus, ultimo_kilometraje, capacidad_tanque_1, capacidad_tanque_2, nombre_acueducto, nombre_dependencia
        </p>
        
        @if(session('success'))
        <div class="alert-success" role="alert">
            {{ session('success') }}
        </div>
        @endif
        
        @if(session('error'))
        <div class="alert-error" role="alert">
            {{ session('error') }}
        </div>
        @endif
        
        <form action="{{ route('vehiculos.import') }}" method="POST" enctype="multipart/form-data">
            @csrf
            
            <div class="form-group">
                <label for="file">Seleccionar archivo Excel</label>
                <input type="file" id="file" name="file" class="file-input-container file-input">
                @error('file') <div class="error-message">{{ $message }}</div> @enderror
            </div>
            
            <div style="margin-top: 24px;">
                <button type="submit" class="submit-button">
                    Importar Datos
                </button>
            </div>
        </form>

    </div>
</div>
@endsection