@extends('donamarmita-admin')
@section('title', 'Editar Método de Pagamento - Donamarmita')
@section('content')

<div class="right_col" role="main">
    <!-- Page Header -->
    <div class="page-title">
        <div class="title_left">
            <h1><i class="fas fa-credit-card text-primary"></i> Editar Método de Pagamento</h1>
            <p class="text-muted">Configure as taxas e visibilidade deste método de pagamento</p>
        </div>
    </div>

    <div class="clearfix"></div>

    <!-- Breadcrumbs -->
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.paymentmethod') }}">Métodos de Pagamento</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Editar</li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Alert Messages -->
    @if ($errors->any())
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="fas fa-exclamation-circle mr-2"></i>
        <strong>Erro!</strong> Por favor, corrija os seguintes problemas:
        <ul class="mb-0 mt-2">
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
        <button type="button" class="close" data-dismiss="alert" aria-label="Fechar">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    @endif

    @if ($message = Session::get('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="fas fa-check-circle mr-2"></i>
        <strong>Sucesso!</strong> {{ $message }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Fechar">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    @endif

    @if ($message = Session::get('warning'))
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
        <i class="fas fa-exclamation-triangle mr-2"></i>
        <strong>Atenção!</strong> {{ $message }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Fechar">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    @endif

    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2><i class="fas fa-edit"></i> Formulário de Edição</h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="card-box">
                                <!-- Current Method Info -->
                                <div class="row mb-4">
                                    <div class="col-md-12">
                                        <div class="card border-info">
                                            <div class="card-header bg-info text-white py-2">
                                                <i class="fas fa-info-circle mr-2"></i> Método Atual
                                            </div>
                                            <div class="card-body">
                                                <div class="row align-items-center">
                                                    <div class="col-md-2 text-center">
                                                        <img src="{{ asset('images/paymentmethod/' . $paymentMethod->pay_img) }}" 
                                                             class="img-thumbnail rounded" 
                                                             width="100"
                                                             alt="{{ $paymentMethod->pay_description_pt }}"
                                                             title="{{ $paymentMethod->pay_description_pt }}">
                                                    </div>
                                                    <div class="col-md-10">
                                                        <h5 class="card-title mb-1">{{ $paymentMethod->pay_description_pt }}</h5>
                                                        <p class="card-text text-muted mb-2">
                                                            <i class="fas fa-id-card mr-1"></i> ID: {{ $paymentMethod->pay_id }}
                                                        </p>
                                                        <p class="card-text">
                                                            <span class="badge {{ $paymentMethod->pay_visible ? 'badge-success' : 'badge-secondary' }} py-1 px-3">
                                                                <i class="fas {{ $paymentMethod->pay_visible ? 'fa-eye' : 'fa-eye-slash' }} mr-1"></i>
                                                                {{ $paymentMethod->pay_visible ? 'Visível na Loja' : 'Não Visível' }}
                                                            </span>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Edit Form -->
                                <form class="form-horizontal form-label-left" method="POST" 
                                      enctype="multipart/form-data" 
                                      id="formPaymentMethod" 
                                      action="{{ route('admin.paymentmethod.update', $paymentMethod->pay_id) }}">
                                    @csrf
                                    @method('PUT')

                                    <!-- Method Name (Readonly) -->
                                    <div class="form-group row">
                                        <label class="col-form-label col-md-3 col-sm-3 label-align" for="pay_description_pt">
                                            <i class="fas fa-signature mr-1 text-primary"></i> Descrição do Método:
                                        </label>
                                        <div class="col-md-6 col-sm-6">
                                            <input type="text" 
                                                   class="form-control" 
                                                   value="{{ $paymentMethod->pay_description_pt }}" 
                                                   readonly
                                                   style="background-color: #f8f9fa; cursor: not-allowed;">
                                            <small class="form-text text-muted">
                                                <i class="fas fa-info-circle mr-1"></i> Nome do método não pode ser alterado
                                            </small>
                                        </div>
                                    </div>

                                    <hr>

                                    <!-- Fee Configuration -->
                                    <div class="row mb-3">
                                        <div class="col-md-12">
                                            <h5><i class="fas fa-euro-sign text-warning mr-2"></i> Configuração de Taxas</h5>
                                            <p class="text-muted small mb-3">
                                                <i class="fas fa-lightbulb mr-1"></i>
                                                Configure as taxas aplicáveis a este método de pagamento. Deixe ambos os campos a zero para não aplicar taxas.
                                            </p>
                                        </div>
                                    </div>

                                    <!-- Fixed Fee -->
                                    <div class="form-group row">
                                        <label class="col-form-label col-md-3 col-sm-3 label-align" for="pay_flatrate">
                                            <i class="fas fa-euro-sign mr-1 text-success"></i> Taxa Fixa (€):
                                        </label>
                                        <div class="col-md-6 col-sm-6">
                                            <div class="input-group">
                                                <input type="text" 
                                                       class="form-control text-right" 
                                                       id="pay_flatrate" 
                                                       name="pay_flatrate" 
                                                       value="{{ number_format($paymentMethod->pay_flatrate, 2, ',', '') }}"
                                                       placeholder="0,00"
                                                       inputmode="decimal">
                                                <div class="input-group-append">
                                                    <span class="input-group-text">€</span>
                                                </div>
                                            </div>
                                            <small class="form-text text-muted">
                                                Valor fixo cobrado por cada transação (ex: 0,30€)
                                            </small>
                                        </div>
                                    </div>

                                    <!-- Percentage Fee -->
                                    <div class="form-group row">
                                        <label class="col-form-label col-md-3 col-sm-3 label-align" for="pay_percentagerate">
                                            <i class="fas fa-percentage mr-1 text-info"></i> Taxa Percentual (%):
                                        </label>
                                        <div class="col-md-6 col-sm-6">
                                            <div class="input-group">
                                                <input type="text" 
                                                       class="form-control text-right" 
                                                       id="pay_percentagerate" 
                                                       name="pay_percentagerate" 
                                                       value="{{ number_format($paymentMethod->pay_percentagerate, 2, ',', '') }}"
                                                       placeholder="0,00"
                                                       inputmode="decimal">
                                                <div class="input-group-append">
                                                    <span class="input-group-text">%</span>
                                                </div>
                                            </div>
                                            <small class="form-text text-muted">
                                                Percentagem do valor total (ex: 2,50%)
                                            </small>
                                        </div>
                                    </div>

                                    <!-- Example Calculation -->
                                    <div class="row mb-4">
                                        <div class="col-md-9 offset-md-3">
                                            <div class="card border-light">
                                                <div class="card-body py-2">
                                                    <p class="mb-0 small">
                                                        <i class="fas fa-calculator mr-1 text-primary"></i>
                                                        <strong>Exemplo:</strong> 
                                                        Para uma compra de 50,00€ com 
                                                        <span id="exampleFlat">0,00€</span> fixos + 
                                                        <span id="examplePerc">0,00%</span> = 
                                                        <strong><span id="exampleTotal">0,00€</span> em taxas</strong>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <hr>

                                    <!-- Visibility Toggle -->
                                    <div class="form-group row">
                                        <label class="col-form-label col-md-3 col-sm-3 label-align" for="pay_visible">
                                            <i class="fas fa-eye mr-1 text-primary"></i> Estado na Loja:
                                        </label>
                                        <div class="col-md-6 col-sm-6">
                                            <div class="custom-control custom-switch">
                                                <input type="checkbox" 
                                                       class="custom-control-input" 
                                                       id="pay_visible" 
                                                       name="pay_visible" 
                                                       value="1"
                                                       {{ $paymentMethod->pay_visible ? 'checked' : '' }}>
                                                <label class="custom-control-label" for="pay_visible">
                                                    <span id="visibilityText">
                                                        {{ $paymentMethod->pay_visible ? 'Visível para Clientes' : 'Oculto dos Clientes' }}
                                                    </span>
                                                </label>
                                            </div>
                                            <small class="form-text text-muted">
                                                <i class="fas fa-info-circle mr-1"></i>
                                                Quando ativo, este método aparece no checkout. Quando inativo, fica oculto.
                                            </small>
                                        </div>
                                    </div>

                                    <!-- Form Actions -->
                                    <div class="ln_solid"></div>
                                    <div class="form-group row">
                                        <div class="col-md-9 offset-md-3">
                                            <div class="btn-group" role="group">
                                                <a href="{{ route('admin.paymentmethod') }}" 
                                                   class="btn btn-outline-secondary">
                                                    <i class="fas fa-times mr-1"></i> Cancelar
                                                </a>
                                                <button type="reset" class="btn btn-outline-warning">
                                                    <i class="fas fa-undo mr-1"></i> Limpar Alterações
                                                </button>
                                                <button type="submit" class="btn btn-success">
                                                    <i class="fas fa-save mr-1"></i> Guardar Alterações
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('styles')
<style>
    .custom-switch .custom-control-label::before {
        border-color: #adb5bd;
    }
    
    .custom-switch .custom-control-input:checked~.custom-control-label::before {
        border-color: #28a745;
        background-color: #28a745;
    }
    
    .input-group-text {
        background-color: #f8f9fa;
        border-color: #ced4da;
    }
</style>
@endpush

@push('scripts')
<script>
    // Atualizar exemplo de cálculo em tempo real
    function updateExample() {
        const flatInput = document.getElementById('pay_flatrate');
        const percInput = document.getElementById('pay_percentagerate');
        
        // Obter valores e limpar formatação
        let flatRateStr = flatInput.value.trim().replace(/[^\d,.-]/g, '');
        let percRateStr = percInput.value.trim().replace(/[^\d,.-]/g, '');
        
        // Converter para número (tratar vírgula como decimal)
        let flatRate = flatRateStr ? parseFloat(flatRateStr.replace(',', '.')) : 0;
        let percRate = percRateStr ? parseFloat(percRateStr.replace(',', '.')) : 0;
        
        // Garantir que são números válidos
        flatRate = isNaN(flatRate) ? 0 : flatRate;
        percRate = isNaN(percRate) ? 0 : percRate;
        
        const exampleAmount = 50.00;
        const percAmount = exampleAmount * (percRate / 100);
        const totalFees = flatRate + percAmount;
        
        // Formatar para exibição (PT)
        document.getElementById('exampleFlat').textContent = 
            flatRate.toLocaleString('pt-PT', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '€';
        
        document.getElementById('examplePerc').textContent = 
            percRate.toLocaleString('pt-PT', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '%';
        
        document.getElementById('exampleTotal').textContent = 
            totalFees.toLocaleString('pt-PT', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '€';
    }
    
    // Atualizar texto do toggle de visibilidade
    function updateVisibilityText() {
        const checkbox = document.getElementById('pay_visible');
        const textSpan = document.getElementById('visibilityText');
        textSpan.textContent = checkbox.checked ? 'Visível para Clientes' : 'Oculto dos Clientes';
    }
    
    // Formatar valor para PT quando perde o foco
    function formatPTValue(input) {
        let value = input.value.trim();
        
        // Se estiver vazio, manter vazio
        if (!value) {
            return;
        }
        
        // Remover tudo exceto números, vírgula e ponto
        value = value.replace(/[^\d,.]/g, '');
        
        // Se após limpar ficar vazio, limpar o campo
        if (!value) {
            input.value = '';
            return;
        }
        
        // Substituir vírgulas por pontos para conversão
        let numericValue = value.replace(/,/g, '.');
        
        // Se houver múltiplos pontos, manter apenas o último como decimal
        const parts = numericValue.split('.');
        if (parts.length > 2) {
            numericValue = parts.slice(0, -1).join('') + '.' + parts[parts.length - 1];
        }
        
        // Converter para número
        let numValue = parseFloat(numericValue);
        
        // Se não for um número válido, limpar o campo
        if (isNaN(numValue)) {
            input.value = '';
            return;
        }
        
        // Limitar a 2 casas decimais
        numValue = Math.round(numValue * 100) / 100;
        
        // Formatar com 2 casas decimais e vírgula como separador decimal
        input.value = numValue.toLocaleString('pt-PT', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    }
    
    // Event Listeners
    document.addEventListener('DOMContentLoaded', function() {
        // Inicializar
        updateExample();
        updateVisibilityText();
        
        // Configurar eventos para os campos de taxa
        const flatInput = document.getElementById('pay_flatrate');
        const percInput = document.getElementById('pay_percentagerate');
        
        // Atualizar exemplo em tempo real (enquanto digita)
        flatInput.addEventListener('input', function() {
            updateExample();
        });
        
        percInput.addEventListener('input', function() {
            updateExample();
        });
        
        // Formatar quando perder o foco
        flatInput.addEventListener('blur', function() {
            formatPTValue(this);
            updateExample();
        });
        
        percInput.addEventListener('blur', function() {
            formatPTValue(this);
            updateExample();
        });
        
        // Permitir apenas números, vírgula e ponto durante digitação
        [flatInput, percInput].forEach(input => {
            input.addEventListener('keypress', function(e) {
                const char = e.key;
                const currentValue = this.value;
                
                // Permitir teclas de controle
                if (e.ctrlKey || e.metaKey || char === 'Backspace' || char === 'Delete' || char === 'Tab' || char === 'Enter') {
                    return;
                }
                
                // Permitir apenas números, vírgula e ponto
                if (!/[\d,.]/.test(char)) {
                    e.preventDefault();
                    return;
                }
                
                // Permitir apenas uma vírgula ou ponto
                if ((char === ',' || char === '.') && (currentValue.includes(',') || currentValue.includes('.'))) {
                    e.preventDefault();
                }
            });
        });
        
        // Configurar evento para o toggle
        document.getElementById('pay_visible').addEventListener('change', updateVisibilityText);
    });
</script>
@endpush