@extends('Componentes.app')

@section('title', 'Mapas')

@section('index')

<div class="p-3 p-md-4 container">
    <h1 class="text-center mb-4 mb-md-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-3 px-md-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-sm-2 row-cols-lg-3 g-3 g-md-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-3 p-md-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"></i>
                                    @else
                                        <i class="bi bi-check2-circle text-success"></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>
                                
                               
                                  @if ($map->status->nome == 'Pendente' || $map->status->nome == 'Aprovado')
                                 <div class="mb-3 mb-md-4">
                                    <strong class="text-muted">Não Enviado</strong> 
                                   
                                </div>
                                @else
                                <div class="mb-3 mb-md-4">
                                    <strong class="text-success">Enviado:</strong> 
                                    <span>{{ $map->updated_at->format('d/m/Y H:i') }}</span>
                                </div>
                                @endif



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

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

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

@endsection