@extends('Componentes.app')

@section('title', 'Mapas')

@section('index')
<div class="container mt-5 py-4">
    <!-- Título -->

    <!-- Mensagens de Feedback -->
    @if ($errors->any())
        <div class="alert alert-danger shadow-sm rounded" role="alert">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @if (session('success'))
        <div class="alert alert-success shadow-sm rounded" role="alert">
            {{ session('success') }}
        </div>
    @endif

    @if (session('error'))
        <div class="alert alert-danger shadow-sm rounded" role="alert">
            {{ session('error') }}
        </div>
    @endif

    <!-- Formulário -->
    <div class="card shadow-sm border-0">
        <div class="card-body p-4">
            <form action="{{ route('upload') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <!-- Seleção de Transportadora -->
                <div class="mb-4">
                    <label class="form-label fw-semibold text-muted">Selecione a Transportadora</label>
                    <div class="d-flex flex-wrap gap-3">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="transportadora" id="renaforte" value="1" required>
                            <label class="form-check-label" for="renaforte">RENAFORTE</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="transportadora" id="tbforte" value="2" required>
                            <label class="form-check-label" for="tbforte">TBFORTE</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="transportadora" id="prossegur" value="3" required>
                            <label class="form-check-label" for="prossegur">PROSSEGUR</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="transportadora" id="blueangels" value="4" required>
                            <label class="form-check-label" for="blueangels">BLUE ANGELS</label>
                        </div>
                    </div>
                </div>

                <!-- Upload de Arquivo -->
                <div class="mb-4">
                    <label for="file" class="form-label fw-semibold text-muted">Escolha o Arquivo</label>
                    <input type="file" class="form-control shadow-sm" id="file" name="file" required>
                </div>

                <!-- Botão de Submit -->
                <button type="submit" class="btn btn-success px-4 py-2">
                    <i class="bi bi-upload me-2"></i>Adicionar
                </button>
            </form>
        </div>
    </div>
</div>

<!-- Estilos Personalizados -->
<style>
    .card {
        border-radius: 10px;
        background-color: #fff;
    }

    .form-check-input:checked {
        background-color: #11496f;
        border-color: #11496f;
    }

    .btn-success {
        background-color: #28a745;
        border-color: #28a745;
        transition: all 0.3s ease;
    }

    .btn-success:hover {
        background-color: #218838;
        border-color: #1e7e34;
    }

    .form-control:focus {
        border-color: #11496f;
        box-shadow: 0 0 0 0.2rem rgba(17, 73, 111, 0.25);
    }

    .alert {
        border-radius: 8px;
    }
</style>
@endsection