@extends('layouts.erp')

@section('content')

<style>

.import-wrapper{

    max-width:700px;

    margin:auto;
}

.import-card{

    background:white;

    border-radius:28px;

    padding:40px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.04);
}

.import-title{

    margin-bottom:30px;
}

.import-title h1{

    font-size:34px;

    font-weight:800;

    color:#111827;

    margin-bottom:10px;
}

.import-title p{

    color:#6b7280;

    margin:0;
}

.import-box{

    border:2px dashed #d1d5db;

    border-radius:24px;

    padding:40px;

    text-align:center;

    transition:.2s;

    background:#fafafa;
}

.import-box:hover{

    border-color:#7A0014;

    background:#fff;
}

.import-icon{

    font-size:64px;

    color:#16a34a;

    margin-bottom:20px;
}

.import-btn{

    background:#7A0014;

    color:white;

    border:none;

    border-radius:14px;

    padding:14px 26px;

    font-weight:700;

    transition:.2s;
}

.import-btn:hover{

    transform:translateY(-2px);

    background:#980019;
}

</style>

<div class="import-wrapper">

    <div class="import-card">

        <div class="import-title">

            <h1>
                Importar Servicios Excel
            </h1>

            <p>
                Carga masiva de servicios históricos ASITEC
            </p>

        </div>

        @if(session('success'))

            <div class="alert alert-success">

                {{ session('success') }}

            </div>

        @endif

        @if ($errors->any())

            <div class="alert alert-danger">

                {{ $errors->first() }}

            </div>

        @endif

        <form
            action="{{ route('importar.excel') }}"
            method="POST"
            enctype="multipart/form-data">

            @csrf

            <div class="import-box">

                <div class="import-icon">

                    <i class="fas fa-file-excel"></i>

                </div>

                <h4 class="mb-4">

                    Selecciona tu archivo Excel

                </h4>

                <input
                    type="file"
                    name="archivo"
                    class="form-control mb-4"
                    required>

                <button
                    type="submit"
                    class="import-btn">

                    <i class="fas fa-upload"></i>

                    Importar Servicios

                </button>

            </div>

        </form>

    </div>

</div>

@endsection