@extends('Componentes.app')

@section('title', 'Detalhes do Cliente')

@section('items-edit')
<div class="container py-4">


  @if (session('result'))
    @foreach (session('result') as $item)
        <div class="alert alert-{{ $item['type'] }} alert-dismissible fade show" role="alert">
            {{ $item['message'] }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fechar"></button>
        </div>
    @endforeach
@endif


    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show shadow-sm" role="alert">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
        <a href="{{route('clients.index')}}" class="btn text-white mb-4" style="background-color: #0b496e;"><i class="bi bi-arrow-left-circle"></i> Voltar</a>   
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="fw-bold mb-0">Cofres Vinculados ao {{$client->name}}</h4>
        <!-- Botão para abrir modal -->
        <button class="btn text-white" style="background-color: #0b496e;" data-bs-toggle="modal" data-bs-target="#addCofreModal">
            <i class="bi bi-plus-circle"></i> Vincular Cofre
        </button>
         
    </div>
        
    <!-- Cards de cofres -->
<div class="row g-4">
    @forelse($client_terminals as $terminal)
        <div class="col-md-4">
            <div class="card h-100 border-0 shadow-lg rounded-4" style="border-left: 5px solid #0b496e; background-color: #f9fbfc;">
                <div class="card-body d-flex flex-column justify-content-between">
                    <div>
                        <h5 class="card-title fw-bold mb-3 text-dark">
                            <i class="bi bi-hdd-stack text-primary me-2"></i>{{ $terminal->terminal_name }}
                        </h5>

                        <p class="mb-2 text-muted">
                            <i class="bi bi-upc-scan me-2 text-secondary"></i>
                            <strong>Código:</strong> {{ $terminal->terminal_code }}
                        </p>

                        <p class="mb-2 text-muted">
                            <i class="bi bi-file-earmark-text me-2 text-secondary"></i>
                            <strong>Contrato:</strong> {{ $terminal->contract_name ?? 'N/A' }}
                        </p>

                        <p class="mb-0 text-muted d-flex align-items-center">
                            <i class="me-2
                                @switch($terminal->terminal_status_id)
                                    @case(1) bi bi-circle text-secondary @break
                                    @case(2) bi bi-check-circle-fill text-success @break
                                    @case(3) bi bi-slash-circle-fill text-danger @break
                                    @case(4) bi bi-lock-fill text-warning @break
                                    @default bi bi-question-circle text-muted
                                @endswitch
                            " style="font-size: 1.3rem;" title="Status do Cofre"></i>
                            <span>
                                @switch($terminal->terminal_status_id)
                                    @case(1) Inativo @break
                                    @case(2) Ativo @break
                                    @case(3) Bloqueado @break
                                    @case(4) Envio Bloqueado @break
                                    @default Desconhecido
                                @endswitch
                            </span>
                        </p>
                    </div>

                    <div class="d-flex justify-content-end mt-4">
                        <form action="{{ route('client-terminal.destroy', $terminal->id) }}" method="POST" onsubmit="return confirm('Tem certeza que deseja desvincular este cofre?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-outline-danger btn-sm" title="Remover Cofre">
                                <i class="bi bi-trash3-fill me-1"></i> Remover
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @empty
        <div class="col-12 text-center text-muted">
            Nenhum cofre vinculado.
        </div>
    @endforelse
</div>

<!-- Modal para adicionar cofre -->
<div class="modal fade" id="addCofreModal" tabindex="-1" aria-labelledby="addCofreModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content shadow">
            <div class="modal-header text-white" style="background-color: #0b496e;">
                <h5 class="modal-title" id="addCofreModalLabel">Vincular Novo Cofre</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>
            <form action="{{ route('client-terminal.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <input type="hidden" name="client_id" value="{{ $client->id }}">

                    <div class="mb-3">
                        <label for="terminal_id" class="form-label">Terminal</label>
                        <livewire:terminals.select-terminals />
                    </div>

                    <div class="mb-3">
                        <label for="client_terminal_contract_id" class="form-label">Contrato</label>                   
                          <select class="form-select" id="client_terminal_contract_id" name="client_terminal_contract_id" required>
                    <option value="">Selecione</option>
                    @foreach($client_terminal_contracts as $contract)
                        <option value="{{ $contract->id }}">{{ $contract->name }}</option>
                    @endforeach
                </select>


                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn text-white" style="background-color: #0b496e;">Salvar</button>
                </div>
            </form>
        </div>
    </div>
</div>
<style>
    .card-title i,
    .card-text i {
        font-size: 1.1rem;
        vertical-align: middle;
    }

    .card {
        transition: transform 0.2s ease-in-out;
    }

    .card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }
     .card-highlight {
        border-left: 4px solid #0b496e;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
        transition: transform 0.2s ease-in-out;
    }

    .card-highlight:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 28px rgba(37, 37, 37, 0.4);
    }
</style>
@endsection