@extends('Componentes.app')

@section('title', 'Depósitos Manuais')

@section('ManualDepositsCreate')
<div class="container py-5">

    {{-- Alertas centralizados acima do card --}}
    <div class="row justify-content-center mb-3">
        <div class="col-md-8">

            {{-- Mensagens de erro --}}
            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show shadow-sm text-center" role="alert">
                    <ul class="mb-0 list-unstyled">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            {{-- Mensagem de sucesso --}}
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show text-center shadow-sm" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fechar"></button>
                </div>
            @endif

        </div>
    </div>

    {{-- Card principal --}}
    <div class="card shadow-lg border-0 rounded-4 mx-auto" style="max-width: 700px;">
        <div class="card-header text-white rounded-top-4" style="background-color: #0b496e;">
            <h5 class="mb-0 py-2 text-center">Depósito Manual</h5>
        </div>

        <div class="card-body p-4">
            <form action="{{ route('manual-deposits.store') }}" method="POST">
                @csrf

                {{-- Cliente --}}
                <div class="mb-4">
                    <livewire:client.select-client />
                </div>

                {{-- Valor --}}
                <div class="mb-4">
                    <label for="value" class="form-label fw-semibold">Valor (R$)</label>
                    <input type="number" step="0.01" name="value" id="value" class="form-control rounded-3 shadow-sm" required>
                </div>

                {{-- Tipo --}}
                <div class="mb-4">
                    <label for="type" class="form-label fw-semibold">Tipo</label>
                    <select name="type_value" id="type" class="form-select rounded-3 shadow-sm" required>
                        <option value="">Selecione</option>
                        <option value="MOEDA">MOEDA</option>
                        <option value="ENVELOPE">ENVELOPE</option>
                    </select>
                </div>

                {{-- Terminal --}}
                <div class="mb-4">
                    <label class="form-label fw-semibold">Terminal</label>
                    <livewire:terminals.select-terminals />
                </div>

                {{-- NSU (Gerado automaticamente com timestamp) --}}
                <input type="hidden" name="nsu" value="{{ now()->format('YmdHis') }}{{ old('terminal_code') }}">

                {{-- Ações --}}
                <div class="d-flex justify-content-end">
                    <a href="{{ route('manual-deposits.index') }}" class="btn btn-outline-secondary me-2 rounded-3">
                        <i class="bi bi-arrow-left-circle me-1"></i>Cancelar
                    </a>
                    <button type="submit" class="btn btn-success rounded-3">
                        <i class="bi bi-cash-coin me-1"></i>Enviar Depósito
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection