@extends('layouts.app')

@section('title', 'Vincular Saque')

@push('styles-custom')
    <link href="{{ asset('vendors/select2/css/select2.min.css') }}" rel="stylesheet" />
    <style>
        .select2-container .select2-selection--single {
            height: 38px;
            border: 1px solid var(--phoenix-border-color);
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 36px;
            color: var(--phoenix-body-color);
        }
        .select2-dropdown {
            border: 1px solid var(--phoenix-border-color);
        }
    </style>
@endpush

@section('content')
<div class="content pt-3">
    <nav class="mb-3" aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('saques.index') }}">Saques</a></li>
            <li class="breadcrumb-item"><a href="{{ route('saques.show', $saque) }}">Saque #{{ $saque->id }}</a></li>
            <li class="breadcrumb-item active">Vincular</li>
        </ol>
    </nav>

    <div class="row g-3 mb-4">
        <div class="col-12">
            <h2 class="mb-0">
                <span class="fas fa-link text-primary me-3"></span>
                Vincular Saque #{{ $saque->id }}
            </h2>
        </div>
    </div>

    <!-- Informações do Saque Principal -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0">Saque Principal</h5>
        </div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-3">
                    <strong>Data:</strong><br>
                    <span class="text-body-secondary">{{ \Carbon\Carbon::parse($saque->data)->format('d/m/Y') }}</span>
                </div>
                <div class="col-md-6">
                    <strong>Descrição:</strong><br>
                    <span class="text-body-secondary">{{ $saque->descricao }}</span>
                </div>
                <div class="col-md-3">
                    <strong>Valor Total:</strong><br>
                    <span class="text-success fw-bold">R$ {{ number_format($saque->valor_total, 2, ',', '.') }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Formulário de Vinculação -->
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">Nova Vinculação</h5>
        </div>
        <div class="card-body">
            <form action="{{ route('saques.vinculacoes.store', $saque) }}" method="POST">
                @csrf

                <div class="row g-3">
                    <div class="col-md-8">
                        <label for="saque_destino_id" class="form-label">
                            <i class="fas fa-hand-holding-usd me-2"></i>Saque de Destino
                        </label>
                        <select name="saque_destino_id" id="saque_destino_id" class="form-select select2" required>
                            <option value="">Selecione um saque...</option>
                            @foreach($saquesDisponiveis as $saqueDisponivel)
                            <option value="{{ $saqueDisponivel->id }}"
                                data-data="{{ \Carbon\Carbon::parse($saqueDisponivel->data)->format('d/m/Y') }}"
                                data-descricao="{{ $saqueDisponivel->descricao }}"
                                data-valor="{{ number_format($saqueDisponivel->valor_total, 2, ',', '.') }}"
                                data-origem="{{ $saqueDisponivel->contaOrigem->empresa->nome_fantasia }}">
                                {{ \Carbon\Carbon::parse($saqueDisponivel->data)->format('d/m/Y') }} - 
                                {{ $saqueDisponivel->descricao }} - 
                                R$ {{ number_format($saqueDisponivel->valor_total, 2, ',', '.') }} -
                                {{ $saqueDisponivel->contaOrigem->empresa->nome_fantasia }}
                            </option>
                            @endforeach
                        </select>
                        <div class="form-text text-muted">
                            <small><i class="fas fa-info-circle me-1"></i>Selecione o saque que receberá a vinculação</small>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <label for="valor_vinculado" class="form-label">
                            <i class="fas fa-coins me-2"></i>Valor da Vinculação (R$)
                        </label>
                        <div class="input-group">
                            <span class="input-group-text bg-success-subtle text-success">
                                <i class="fas fa-link"></i>
                            </span>
                            <input
                                type="text"
                                name="valor_vinculado"
                                id="valor_vinculado"
                                class="form-control money"
                                inputmode="decimal"
                                placeholder="0,00"
                                value="{{ old('valor_vinculado') }}"
                                required
                                autocomplete="off"
                            >
                        </div>
                        <div class="form-text text-muted">
                            <small id="valor-maximo-vinculacao">
                                <i class="fas fa-calculator me-1"></i>
                                Valor máximo: R$ {{ number_format($saque->valor_disponivel_vinculacao, 2, ',', '.') }}
                            </small>
                        </div>
                        @error('valor_vinculado')
                            <div class="invalid-feedback d-block">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    <div class="col-12">
                        <label for="observacoes" class="form-label">
                            <i class="fas fa-comment me-2"></i>Observações (Opcional)
                        </label>
                        <textarea name="observacoes"
                                  id="observacoes"
                                  class="form-control"
                                  rows="3"
                                  placeholder="Observações sobre esta vinculação...">{{ old('observacoes') }}</textarea>
                        <div class="form-text text-muted">
                            <small>
                                <i class="fas fa-info-circle me-1"></i>
                                Informações adicionais sobre esta vinculação (opcional)
                            </small>
                        </div>
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-12 text-end">
                        <button type="submit" class="btn btn-primary">
                            <span class="fas fa-link me-2"></span>Criar Vinculação
                        </button>
                        <a href="{{ route('saques.show', $saque) }}" class="btn btn-secondary">
                            <span class="fas fa-times me-2"></span>Cancelar
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts-custom')
    <script src="{{ asset('vendors/select2/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('vendors/select2/js/i18n/pt-BR.js') }}"></script>
    
    <script>
    $(document).ready(function() {
        // Configuração padrão do Select2
        $.fn.select2.defaults.set("language", "pt-BR");
        $.fn.select2.defaults.set("theme", "default");
        $.fn.select2.defaults.set("width", "100%");

        $('.select2').select2({
            placeholder: 'Selecione uma opção',
            allowClear: true
        });
    });
    </script>

    {{-- Máscara de valor em Real brasileiro --}}
    @include('saques.scripts.mascara-valor')
@endpush