@extends('Componentes.app')

@section('title', 'Mapas')

@section('index')
<div class="p-4 container">
    <h1 class="text-center mb-5 fw-bold text-uppercase" style="color: #2c3e50;">Mapas Diários</h1>
    
    <div class="table-responsive">
        <div class="container">
            <!-- Mensagem de Sucesso -->
            @if(session('message'))
            <div class="alert alert-{{ session('type') === 'error' ? 'danger' : 'success' }} alert-dismissible fade show" role="alert">
                {{ session('message') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

            <!-- Botão Adicionar -->
            <div class="mb-4 text-center">
                <a href="{{ route('mapcomplete.create') }}" class="btn btn-success fw-bold px-4 py-2" style="transition: all 0.3s;">
                    <i class="bi bi-plus-circle me-2"></i>Adicionar Novo Mapa
                </a>
            </div>

            <!-- Grid de Cards -->
            <div class="row row-cols-1 row-cols-md-3 g-4">
                @foreach($data as $map)
                    <div class="col">
                        <div class="card h-100 shadow-sm border-0" style="transition: transform 0.2s;">
                            <div class="card-header p-0 border-0">
                                @switch($map->transportadora->nome)
                                    @case('TBFORTE')
                                        <h5 class="card-title text-bg-secondary text-white p-2 m-0 text-center fw-semibold">{{ $map->transportadora->nome }}</h5>
                                        @break
                                    @case('PROSSEGUR')
                                        <h5 class="card-title text-bg-warning text-white p-2 m-0 text-center fw-semibold">{{ $map->transportadora->nome }}</h5>
                                        @break
                                    @case('BLUE ANGLES')
                                        <h5 class="card-title text-bg-info text-white p-2 m-0 text-center fw-semibold">{{ $map->transportadora->nome }}</h5>
                                        @break
                                    @case('RENAFORTE')
                                        <h5 class="card-title text-bg-danger text-white p-2 m-0 text-center fw-semibold">{{ $map->transportadora->nome }}</h5>
                                        @break
                                    @default
                                        <h5 class="card-title text-bg-primary text-white p-2 m-0 text-center fw-semibold">{{ $map->transportadora->nome }} - {{$map->id}}</h5>
                                @endswitch
                            </div>

                            <div class="card-body p-4">
                                <div class="mb-2">
                                    <strong class="text-muted">Nome:</strong> 
                                    <span>{{ $map->nome }}</span>
                                </div>
                                
                                <div class="mb-2">
                                    <strong class="text-muted">Status:</strong>
                                    <span>{{ $map->status->nome }}</span>
                                    @if($map->status->nome === 'Pendente')
                                        <i class="bi bi-x-circle text-danger ms-2"></i>
                                    @else
                                        <i class="bi bi-check2-circle text-success ms-2"></i>
                                    @endif
                                </div>

                                <div class="mb-2">
                                    <strong class="text-muted">Criação:</strong> 
                                    <span>{{ $map->created_at->format('d/m/Y H:i') }}</span>
                                </div>
                                
                                <div class="mb-4">
                                    <strong class="text-muted">Atualização:</strong> 
                                    <span>{{ $map->updated_at->format('d/m/Y H:i') }}</span>
                                </div>

                                <!-- Botões -->
                              <div class="row g-2">

    <!-- Botão Detalhes -->
    <div class="col-md-4">
        <a href="{{ route('items', ['id' => $map->id]) }}" 
           class="btn btn-info text-white w-100" 
           title="Visualizar itens do mapa">
            <i class="bi bi-eye me-1"></i>Detalhes
        </a>
    </div>

    <!-- Botão Aprovar ou Aprovado -->
    <div class="col-md-4">
        @if($map->status->nome === 'Pendente')
            <a href="{{ route('aprovar-mapa', ['id' => $map->id]) }}" 
               class="btn btn-success text-white w-100" 
               title="Aprovar mapa">
                <i class="bi bi-check-lg me-1"></i>Aprovar
            </a>
        @else
            <button class="btn btn-secondary text-white text-center w-100 disabled" title="Mapa já aprovado" >
                <i class="bi bi-check-lg me-1 text-center" style="font-size: 14px"></i>Aprovado
            </button>
        @endif
    </div>

    <!-- Botão Enviar -->
    <div class="col-md-4">
        @if($map->status->nome === 'Pendente')
            <button class="btn btn-secondary text-white w-100 disabled text-center" title="Download indisponível">
                <i class="bi bi-file-earmark-arrow-down me-1"></i>Enviar
            </button>
        @elseif($map->status->nome === 'Aprovado')
            <button type="button" 
                    class="btn text-white w-100" 
                    style="background-color: #0a496f"
                    data-bs-toggle="modal" 
                    data-bs-target="#modal-{{ $map->id }}">
                <i class="bi bi-send-check-fill me-1 text-center"></i>Enviar
            </button>
        @elseif($map->status->nome === 'Enviado')
            <button type="button" 
                    class="btn text-white w-100 disabled" 
                    style="background-color: #0a496f"
                    data-bs-toggle="modal" 
                    data-bs-target="#modal-{{ $map->id }}">
                <i class="bi bi-send-check-fill me-1"></i>Enviado
            </button>
        @endif
    </div>

</div>
                                
                            </div>
                        </div>
                    </div>

                    <div class="modal fade" id="modal-{{ $map->id }}" tabindex="-1" aria-labelledby="exampleModalLabel-{{ $map->id }}" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title text-center" id="exampleModalLabel-{{ $map->id }}">Confirmar envio para o FourBank</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body text-center">
                                    <i class="bi bi-check-circle-fill text-success" style="font-size: 3rem;"></i>
                                    
                                    <p class="mt-3">Tem certeza que deseja fazer a conciliação?</p>
                                </div>
                                <div class="modal-footer justify-content-center">
                                    <a href="{{ route('baixar-csv', ['id' => $map->id]) }}" 
                                       class="btn text-white" style="background-color: #0a496f">
                                        Enviar para o FourBank
                                    </a>
                                    {{-- <button type="button" class="btn btn-secondary w-50" data-bs-dismiss="modal">Cancelar</button> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>


<style>
    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
    }
    
    .btn {
        transition: all 0.3s;
    }
    
    .btn:hover {
        transform: translateY(-2px);
    }
</style>
@endsection