@extends('layouts.layoutMaster')

@section('title', 'Nova Conta a Pagar')

@section('vendor-style')
<link rel="stylesheet" href="{{asset('assets/vendor/libs/select2/select2.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/flatpickr/flatpickr.css')}}" />
@endsection

@section('content')
<div class="container-xxl flex-grow-1">
    <div class="row">
        <div class="col-12">
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Nova Conta a Pagar</h5>
                    <a href="{{ route('financeiro.index') }}" class="btn btn-outline-secondary">
                        <i class="ti ti-arrow-left me-1"></i>
                        Voltar
                    </a>
                </div>
                <div class="card-body">
                    @if($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('financeiro.store') }}" method="POST">
                        @csrf
                        
                        <div class="row g-3">
                            <!-- Informações Básicas -->
                            <div class="col-12">
                                <h6 class="mb-3 text-primary">
                                    <i class="ti ti-file-info me-2"></i>
                                    Informações Básicas
                                </h6>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label" for="descricao">Descrição <span class="text-danger">*</span></label>
                                <input type="text" 
                                    class="form-control @error('descricao') is-invalid @enderror" 
                                    id="descricao" 
                                    name="descricao" 
                                    value="{{ old('descricao') }}" 
                                    required>
                                @error('descricao')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-3">
                                <label class="form-label" for="documento">Documento</label>
                                <input type="text" 
                                    class="form-control @error('documento') is-invalid @enderror" 
                                    id="documento" 
                                    name="documento" 
                                    value="{{ old('documento') }}">
                                @error('documento')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-3">
                                <label class="form-label" for="boleto">Boleto</label>
                                <input type="text" 
                                    class="form-control @error('boleto') is-invalid @enderror" 
                                    id="boleto" 
                                    name="boleto" 
                                    value="{{ old('boleto') }}">
                                @error('boleto')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Relacionamentos -->
                            <div class="col-12 mt-4">
                                <h6 class="mb-3 text-primary">
                                    <i class="ti ti-users me-2"></i>
                                    Relacionamentos
                                </h6>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label" for="id_fornecedores">Fornecedor</label>
                                <select class="form-select select2 @error('id_fornecedores') is-invalid @enderror" 
                                    id="id_fornecedores" 
                                    name="id_fornecedores">
                                    <option value="">Selecione...</option>
                                    @foreach($fornecedores as $fornecedor)
                                        <option value="{{ $fornecedor->id_fornecedores }}" 
                                            {{ old('id_fornecedores') == $fornecedor->id_fornecedores ? 'selected' : '' }}>
                                            {{ $fornecedor->nome }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('id_fornecedores')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4">
                                <label class="form-label" for="id_categoria_contas">Categoria</label>
                                <select class="form-select select2 @error('id_categoria_contas') is-invalid @enderror" 
                                    id="id_categoria_contas" 
                                    name="id_categoria_contas">
                                    <option value="">Selecione...</option>
                                    @foreach($categorias as $categoria)
                                        <option value="{{ $categoria->id_categoria_contas }}" 
                                            {{ old('id_categoria_contas') == $categoria->id_categoria_contas ? 'selected' : '' }}>
                                            {{ $categoria->nome }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('id_categoria_contas')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4">
                                <label class="form-label" for="id_bancos">Banco</label>
                                <select class="form-select select2 @error('id_bancos') is-invalid @enderror" 
                                    id="id_bancos" 
                                    name="id_bancos">
                                    <option value="">Selecione...</option>
                                    @foreach($bancos as $banco)
                                        <option value="{{ $banco->id_bancos }}" 
                                            {{ old('id_bancos') == $banco->id_bancos ? 'selected' : '' }}>
                                            {{ $banco->nome }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('id_bancos')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Valores -->
                            <div class="col-12 mt-4">
                                <h6 class="mb-3 text-primary">
                                    <i class="ti ti-cash me-2"></i>
                                    Valores
                                </h6>
                            </div>

                            <div class="col-md-3">
                                <label class="form-label" for="valor_total">Valor Total <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">R$</span>
                                    <input type="number" 
                                        class="form-control @error('valor_total') is-invalid @enderror" 
                                        id="valor_total" 
                                        name="valor_total" 
                                        step="0.01" 
                                        min="0"
                                        value="{{ old('valor_total', '0.00') }}" 
                                        required>
                                </div>
                                @error('valor_total')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-3">
                                <label class="form-label" for="juros">Juros</label>
                                <div class="input-group">
                                    <span class="input-group-text">R$</span>
                                    <input type="number" 
                                        class="form-control @error('juros') is-invalid @enderror" 
                                        id="juros" 
                                        name="juros" 
                                        step="0.01" 
                                        min="0"
                                        value="{{ old('juros', '0.00') }}">
                                </div>
                                @error('juros')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-3">
                                <label class="form-label" for="multa">Multa</label>
                                <div class="input-group">
                                    <span class="input-group-text">R$</span>
                                    <input type="number" 
                                        class="form-control @error('multa') is-invalid @enderror" 
                                        id="multa" 
                                        name="multa" 
                                        step="0.01" 
                                        min="0"
                                        value="{{ old('multa', '0.00') }}">
                                </div>
                                @error('multa')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-3">
                                <label class="form-label" for="desconto">Desconto</label>
                                <div class="input-group">
                                    <span class="input-group-text">R$</span>
                                    <input type="number" 
                                        class="form-control @error('desconto') is-invalid @enderror" 
                                        id="desconto" 
                                        name="desconto" 
                                        step="0.01" 
                                        min="0"
                                        value="{{ old('desconto', '0.00') }}">
                                </div>
                                @error('desconto')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Datas e Status -->
                            <div class="col-12 mt-4">
                                <h6 class="mb-3 text-primary">
                                    <i class="ti ti-calendar me-2"></i>
                                    Datas e Status
                                </h6>
                            </div>

                            <div class="col-md-3">
                                <label class="form-label" for="data_emissao">Data Emissão</label>
                                <input type="date" 
                                    class="form-control @error('data_emissao') is-invalid @enderror" 
                                    id="data_emissao" 
                                    name="data_emissao" 
                                    value="{{ old('data_emissao') }}">
                                @error('data_emissao')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-3">
                                <label class="form-label" for="data_vencimento">Data Vencimento <span class="text-danger">*</span></label>
                                <input type="date" 
                                    class="form-control @error('data_vencimento') is-invalid @enderror" 
                                    id="data_vencimento" 
                                    name="data_vencimento" 
                                    value="{{ old('data_vencimento') }}" 
                                    required>
                                @error('data_vencimento')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-3">
                                <label class="form-label" for="status">Status <span class="text-danger">*</span></label>
                                <select class="form-select @error('status') is-invalid @enderror" 
                                    id="status" 
                                    name="status" 
                                    required>
                                    <option value="pendente" {{ old('status') == 'pendente' ? 'selected' : '' }}>Pendente</option>
                                    <option value="pago" {{ old('status') == 'pago' ? 'selected' : '' }}>Pago</option>
                                    <option value="vencido" {{ old('status') == 'vencido' ? 'selected' : '' }}>Vencido</option>
                                    <option value="parcelado" {{ old('status') == 'parcelado' ? 'selected' : '' }}>Parcelado</option>
                                    <option value="cancelado" {{ old('status') == 'cancelado' ? 'selected' : '' }}>Cancelado</option>
                                </select>
                                @error('status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-3" id="div_forma_pagamento">
                                <label class="form-label" for="id_forma_pagamento">Forma de Pagamento</label>
                                <select class="form-select select2 @error('id_forma_pagamento') is-invalid @enderror" 
                                    id="id_forma_pagamento" 
                                    name="id_forma_pagamento">
                                    <option value="">Selecione...</option>
                                    @foreach($formasPagamento as $forma)
                                        <option value="{{ $forma->id_forma_pagamento }}" 
                                            {{ old('id_forma_pagamento') == $forma->id_forma_pagamento ? 'selected' : '' }}>
                                            {{ $forma->nome }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('id_forma_pagamento')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-3" id="div_data_pagamento">
                                <label class="form-label" for="data_pagamento">Data Pagamento</label>
                                <input type="date" 
                                    class="form-control @error('data_pagamento') is-invalid @enderror" 
                                    id="data_pagamento" 
                                    name="data_pagamento" 
                                    value="{{ old('data_pagamento') }}">
                                @error('data_pagamento')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-3" id="div_valor_pago">
                                <label class="form-label" for="valor_pago">Valor Pago</label>
                                <div class="input-group">
                                    <span class="input-group-text">R$</span>
                                    <input type="number" 
                                        class="form-control @error('valor_pago') is-invalid @enderror" 
                                        id="valor_pago" 
                                        name="valor_pago" 
                                        step="0.01" 
                                        min="0"
                                        value="{{ old('valor_pago', '0.00') }}">
                                </div>
                                @error('valor_pago')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Observações -->
                            <div class="col-12 mt-4">
                                <label class="form-label" for="observacoes">Observações</label>
                                <textarea class="form-control @error('observacoes') is-invalid @enderror" 
                                    id="observacoes" 
                                    name="observacoes" 
                                    rows="3">{{ old('observacoes') }}</textarea>
                                @error('observacoes')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Botões -->
                            <div class="col-12 mt-4">
                                <button type="submit" class="btn btn-primary">
                                    <i class="ti ti-check me-1"></i>
                                    Salvar
                                </button>
                                <a href="{{ route('financeiro.index') }}" class="btn btn-outline-secondary">
                                    <i class="ti ti-x me-1"></i>
                                    Cancelar
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('vendor-script')
<script src="{{asset('assets/vendor/libs/select2/select2.js')}}"></script>
<script src="{{asset('assets/vendor/libs/flatpickr/flatpickr.js')}}"></script>
@endsection

@section('page-script')
<script>
$(document).ready(function() {
    // Initialize Select2
    if ($('.select2').length) {
        $('.select2').select2({
            placeholder: 'Selecione...',
            allowClear: true
        });
    }

    // Toggle payment fields based on status
    function togglePaymentFields() {
        const status = $('#status').val();
        if (status === 'pago') {
            $('#div_forma_pagamento, #div_data_pagamento, #div_valor_pago').show();
            $('#data_pagamento, #id_forma_pagamento').prop('required', true);
        } else {
            $('#div_forma_pagamento, #div_data_pagamento, #div_valor_pago').hide();
            $('#data_pagamento, #id_forma_pagamento').prop('required', false);
        }
    }

    $('#status').on('change', togglePaymentFields);
    togglePaymentFields(); // Initial call
});
</script>
@endsection