@extends('admin.layouts.app')

@push('css')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
.form-section-title {
    color: #495057;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
}

.help-text {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.form-actions {
    border-top: 1px solid #dee2e6;
    padding-top: 1.5rem;
    margin-top: 2rem;
    background: #f8f9fa;
    padding: 1.5rem;
}

#bank-data-section {
    display: none;
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.25rem;
    margin-top: 1rem;
}
</style>
@endpush

@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Crear Método de Pago</h4>
            <div class="page-title-right">
                <a href="{{ route('payment-methods.index') }}" class="btn btn-primary">Volver</a>
            </div>
        </div>
    </div>
</div>
        <form action="" method="post" id="paymentMethodForm" name="paymentMethodForm">

            <div class="card">
                <div class="card-body">

                    <!-- Información Básica -->
                    <h5 class="form-section-title">
                        <i class="ri-bank-card-line text-primary"></i>
                        Información Básica
                    </h5>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="name" class="form-label">Nombre <span class="text-danger">*</span></label>
                                <input type="text" name="name" id="name" class="form-control"
                                       placeholder="Ej: Transferencia Bancaria, MercadoPago">
                                <p></p>
                                <small class="help-text">
                                    <i class="ri-information-line"></i>
                                    Nombre del método de pago que verá el cliente
                                </small>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="slug" class="form-label">Slug <span class="text-danger">*</span></label>
                                <input type="text" readonly name="slug" id="slug" class="form-control"
                                       placeholder="Se genera automáticamente">
                                <p></p>
                                <small class="help-text">
                                    <i class="ri-links-line"></i>
                                    Identificador único que se genera del nombre
                                </small>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="icon" class="form-label">Icono (Font Awesome)</label>
                                <input type="text" name="icon" id="icon" class="form-control"
                                       placeholder="Ej: fa-university, fa-credit-card">
                                <small class="help-text">
                                    <i class="ri-remixicon-line"></i>
                                    Clase de Font Awesome 4.x (opcional)
                                </small>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="display_order" class="form-label">Orden de Visualización</label>
                                <input type="number" name="display_order" id="display_order" class="form-control"
                                       value="0" placeholder="0">
                                <small class="help-text">
                                    <i class="ri-sort-asc"></i>
                                    Número de orden (menor = aparece primero)
                                </small>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="instructions" class="form-label">Instrucciones para el Cliente</label>
                                <textarea name="instructions" id="instructions" class="form-control" rows="3"
                                    placeholder="Instrucciones que verá el cliente al seleccionar este método de pago"></textarea>
                                <small class="help-text">
                                    <i class="ri-chat-1-line"></i>
                                    Mensaje que se muestra en el checkout
                                </small>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="is_active"
                                           id="is_active" checked>
                                    <label class="form-check-label" for="is_active">
                                        <strong>Activo</strong>
                                    </label>
                                </div>
                                <small class="help-text">
                                    <i class="ri-toggle-line"></i>
                                    ¿Está disponible para los clientes?
                                </small>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="requires_bank_email"
                                           id="requires_bank_email" onchange="toggleBankData()">
                                    <label class="form-check-label" for="requires_bank_email">
                                        <strong>Enviar Email con Datos Bancarios</strong>
                                    </label>
                                </div>
                                <small class="help-text">
                                    <i class="ri-mail-line"></i>
                                    ¿Se envía email automático con datos de la cuenta?
                                </small>
                            </div>
                        </div>
                    </div>

                    <!-- Datos Bancarios (solo visible si requires_bank_email está marcado) -->
                    <div id="bank-data-section">
                        <h5 class="form-section-title">
                            <i class="ri-bank-line text-success"></i>
                            Datos Bancarios
                        </h5>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="bank_name" class="form-label">Banco</label>
                                    <input type="text" name="bank_name" id="bank_name" class="form-control"
                                           placeholder="Ej: Banco Galicia">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="bank_cbu" class="form-label">CBU</label>
                                    <input type="text" name="bank_cbu" id="bank_cbu" class="form-control"
                                           placeholder="22 dígitos">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="bank_alias" class="form-label">Alias</label>
                                    <input type="text" name="bank_alias" id="bank_alias" class="form-control"
                                           placeholder="Ej: EMPRESA.ONLINE.CBU">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="bank_cuit" class="form-label">CUIT</label>
                                    <input type="text" name="bank_cuit" id="bank_cuit" class="form-control"
                                           placeholder="XX-XXXXXXXX-X">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label for="bank_titular" class="form-label">Titular de la Cuenta</label>
                                    <input type="text" name="bank_titular" id="bank_titular" class="form-control"
                                           placeholder="Razón Social o Nombre Completo">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Actions -->
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">
                            <i class="ri-save-line"></i> Guardar
                        </button>
                        <a href="{{ route('payment-methods.index') }}" class="btn btn-outline-dark ms-3">
                            <i class="ri-close-line"></i> Cancelar
                        </a>
                    </div>

                </div>
            </div>

        </form>

@endsection

@push('scripts')
<script>
// Auto-generate slug from name
jQuery("#name").on('input', function(){
    var element = jQuery(this);
    var title = element.val();
    jQuery.ajax({
        url: '{{ route("getSlug") }}',
        type: 'get',
        data: {title: title},
        dataType: 'json',
        success: function(response){
            if (response["status"] == true) {
                jQuery("#slug").val(response["slug"]);
            }
        }
    });
});

// Toggle bank data section
function toggleBankData() {
    if (jQuery('#requires_bank_email').is(':checked')) {
        jQuery('#bank-data-section').slideDown();
    } else {
        jQuery('#bank-data-section').slideUp();
    }
}

// Form submission
jQuery("#paymentMethodForm").submit(function(event){
    event.preventDefault();
    var element = jQuery(this);
    jQuery("button[type=submit]").prop('disabled', true);

    jQuery.ajax({
        url: '{{ route("payment-methods.store") }}',
        type: 'post',
        data: element.serializeArray(),
        dataType: 'json',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        success: function(response){
            jQuery("button[type=submit]").prop('disabled', false);

            if (response["status"] == true) {
                Swal.fire({
                    icon: 'success',
                    title: 'Éxito',
                    text: response["message"],
                    timer: 2000,
                    showConfirmButton: false
                }).then(() => {
                    window.location.href = "{{ route('payment-methods.index') }}";
                });
            } else {
                var errors = response['errors'];
                jQuery.each(errors, function(key, value) {
                    jQuery("#" + key)
                        .addClass('is-invalid')
                        .siblings('p')
                        .addClass('invalid-feedback')
                        .html(value);
                });
            }
        },
        error: function(jqXHR, exception){
            jQuery("button[type=submit]").prop('disabled', false);
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Ocurrió un error al guardar'
            });
        }
    });
});
</script>
@endpush