@extends('admin.layouts.app')

@push('css')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
.nav-tabs .nav-link {
    border-radius: 0.25rem 0.25rem 0 0;
    border: 1px solid transparent;
    background: none;
    color: #6c757d;
}

.nav-tabs .nav-link.active {
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
    color: #495057;
    font-weight: 600;
}

.nav-tabs .nav-link:hover {
    border-color: #e9ecef #e9ecef #dee2e6;
    isolation: isolate;
}

.tab-content {
    border: 1px solid #dee2e6;
    border-top: 0;
    border-radius: 0 0 0.25rem 0.25rem;
    padding: 1.5rem;
    background: #fff;
}

.tab-icon {
    margin-right: 0.5rem;
}

.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;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    margin-bottom: -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 1.5rem;
}

.payment-method-card {
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    padding: 1.5rem;
    background: #f8f9fa;
    margin-bottom: 1.5rem;
}

.payment-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    margin-right: 1rem;
}

.payment-bank { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.payment-mercadopago { background: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%); }
.payment-deposit { background: linear-gradient(135deg, #43a047 0%, #2e7d32 100%); }
.payment-credit { background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%); }
.payment-digital { background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%); }

.security-badge {
    background: #e8f5e8;
    color: #2e7d32;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.field-group {
    border-left: 3px solid #007bff;
    padding-left: 1rem;
    margin-bottom: 1.5rem;
}
</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">Configuración de Métodos de Pago</h4>
            <div class="page-title-right">
                <a href="{{ route('admin.dashboard') }}" class="btn btn-primary">Volver</a>
            </div>
        </div>
    </div>
</div>
        <form action="{{ route('settings.banking.update') }}" method="POST">
            @csrf
            @method('PUT')

            <div class="card">
                <div class="card-body p-0">
                    
                    <!-- Navigation Tabs -->
                    <ul class="nav nav-tabs" id="bankingTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="bank-transfer-tab" data-bs-toggle="tab" data-bs-target="#bank-transfer" 
                                    type="button" role="tab" aria-controls="bank-transfer" aria-selected="true">
                                <i class="ri-bank-line tab-icon"></i>
                                Transferencias Bancarias
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="mercadopago-tab" data-bs-toggle="tab" data-bs-target="#mercadopago" 
                                    type="button" role="tab" aria-controls="mercadopago" aria-selected="false">
                                <i class="ri-smartphone-line tab-icon"></i>
                                Mercado Pago
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="deposits-tab" data-bs-toggle="tab" data-bs-target="#deposits" 
                                    type="button" role="tab" aria-controls="deposits" aria-selected="false">
                                <i class="ri-money-dollar-box-line tab-icon"></i>
                                Depósitos Bancarios
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="credit-cards-tab" data-bs-toggle="tab" data-bs-target="#credit-cards" 
                                    type="button" role="tab" aria-controls="credit-cards" aria-selected="false">
                                <i class="ri-bank-card-line tab-icon"></i>
                                Tarjetas de Crédito
                            </button>
                        </li>
                    </ul>

                    <!-- Tab Content -->
                    <div class="tab-content" id="bankingTabContent">
                        
                        <!-- Transferencias Bancarias -->
                        <div class="tab-pane fade show active" id="bank-transfer" role="tabpanel" aria-labelledby="bank-transfer-tab">
                            <div class="payment-method-card">
                                <div class="d-flex align-items-center mb-4">
                                    <div class="payment-icon payment-bank">
                                        <i class="ri-bank-line"></i>
                                    </div>
                                    <div>
                                        <h5 class="mb-1">Transferencias Bancarias</h5>
                                        <p class="text-muted mb-0">Configuración para recibir pagos mediante transferencias bancarias</p>
                                        <span class="security-badge mt-2 d-inline-block">
                                            <i class="ri-shield-check-line"></i> Método Seguro
                                        </span>
                                    </div>
                                </div>

                                <h6 class="form-section-title">
                                    <i class="ri-bank-line text-primary"></i>
                                    Información de la Cuenta Bancaria
                                </h6>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="field-group">
                                            <div class="mb-3">
                                                <label for="bank_name" class="form-label">Nombre del Banco <span class="text-danger">*</span></label>
                                                <input type="text" name="bank_name" id="bank_name" class="form-control @error('bank_name') is-invalid @enderror" 
                                                       value="{{ old('bank_name', json_decode($settings->bank_transfer_details)->bank_name ?? '') }}" 
                                                       placeholder="Ej: Banco de la Nación Argentina">
                                                <small class="help-text">
                                                    <i class="ri-building-line"></i>
                                                    Nombre oficial de la entidad bancaria
                                                </small>
                                                @error('bank_name')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="field-group">
                                            <div class="mb-3">
                                                <label for="account_number" class="form-label">Número de Cuenta <span class="text-danger">*</span></label>
                                                <input type="text" name="account_number" id="account_number" class="form-control @error('account_number') is-invalid @enderror" 
                                                       value="{{ old('account_number', json_decode($settings->bank_transfer_details)->account_number ?? '') }}" 
                                                       placeholder="Ej: 1234567890123456">
                                                <small class="help-text">
                                                    <i class="ri-hashtag"></i>
                                                    Número de cuenta sin espacios ni guiones
                                                </small>
                                                @error('account_number')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="field-group">
                                            <div class="mb-3">
                                                <label for="cbu" class="form-label">CBU (Clave Bancaria Uniforme) <span class="text-danger">*</span></label>
                                                <input type="text" name="cbu" id="cbu" class="form-control @error('cbu') is-invalid @enderror" 
                                                       value="{{ old('cbu', json_decode($settings->bank_transfer_details)->cbu ?? '') }}" 
                                                       placeholder="Ej: 1234567890123456789012" maxlength="22">
                                                <small class="help-text">
                                                    <i class="ri-key-line"></i>
                                                    CBU de 22 dígitos para transferencias
                                                </small>
                                                @error('cbu')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="field-group">
                                            <div class="mb-3">
                                                <label for="alias" class="form-label">Alias Bancario</label>
                                                <input type="text" name="alias" id="alias" class="form-control @error('alias') is-invalid @enderror" 
                                                       value="{{ old('alias', json_decode($settings->bank_transfer_details)->alias ?? '') }}" 
                                                       placeholder="Ej: TIENDA.ONLINE.PAGO">
                                                <small class="help-text">
                                                    <i class="ri-at-line"></i>
                                                    Alias fácil de recordar para transferencias
                                                </small>
                                                @error('alias')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Mercado Pago -->
                        <div class="tab-pane fade" id="mercadopago" role="tabpanel" aria-labelledby="mercadopago-tab">
                            <div class="payment-method-card">
                                <div class="d-flex align-items-center mb-4">
                                    <div class="payment-icon payment-mercadopago">
                                        <i class="ri-smartphone-line"></i>
                                    </div>
                                    <div>
                                        <h5 class="mb-1">Mercado Pago</h5>
                                        <p class="text-muted mb-0">Plataforma de pagos digitales más popular en Argentina</p>
                                        <span class="security-badge mt-2 d-inline-block">
                                            <i class="ri-smartphone-line"></i> Pago Digital
                                        </span>
                                    </div>
                                </div>

                                <h6 class="form-section-title">
                                    <i class="ri-mail-line text-info"></i>
                                    Información de Contacto para Mercado Pago
                                </h6>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="field-group">
                                            <div class="mb-3">
                                                <label for="mp_contact_email" class="form-label">Email de Contacto <span class="text-danger">*</span></label>
                                                <input type="email" name="mp_contact_email" id="mp_contact_email" class="form-control @error('mp_contact_email') is-invalid @enderror" 
                                                       value="{{ old('mp_contact_email', json_decode($settings->mercado_pago_details)->contact_email ?? '') }}" 
                                                       placeholder="usuario@ejemplo.com">
                                                <small class="help-text">
                                                    <i class="ri-mail-line"></i>
                                                    Email registrado en Mercado Pago para recibir pagos
                                                </small>
                                                @error('mp_contact_email')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="field-group">
                                            <div class="mb-3">
                                                <label for="mp_contact_phone" class="form-label">Teléfono de Contacto</label>
                                                <input type="text" name="mp_contact_phone" id="mp_contact_phone" class="form-control @error('mp_contact_phone') is-invalid @enderror" 
                                                       value="{{ old('mp_contact_phone', json_decode($settings->mercado_pago_details)->contact_phone ?? '') }}" 
                                                       placeholder="+54 9 11 1234 5678">
                                                <small class="help-text">
                                                    <i class="ri-phone-line"></i>
                                                    Teléfono asociado a la cuenta de Mercado Pago
                                                </small>
                                                @error('mp_contact_phone')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="alert alert-info mt-3">
                                    <i class="ri-information-line"></i>
                                    <strong>Información:</strong> Los clientes podrán realizar pagos a través de Mercado Pago usando este email como referencia. Asegúrate de que sea una cuenta verificada y activa.
                                </div>
                            </div>
                        </div>

                        <!-- Depósitos Bancarios -->
                        <div class="tab-pane fade" id="deposits" role="tabpanel" aria-labelledby="deposits-tab">
                            <div class="payment-method-card">
                                <div class="d-flex align-items-center mb-4">
                                    <div class="payment-icon payment-deposit">
                                        <i class="ri-money-dollar-box-line"></i>
                                    </div>
                                    <div>
                                        <h5 class="mb-1">Depósitos Bancarios</h5>
                                        <p class="text-muted mb-0">Cuenta adicional para depósitos en efectivo o cheques</p>
                                        <span class="security-badge mt-2 d-inline-block">
                                            <i class="ri-money-dollar-circle-line-wave"></i> Depósito Directo
                                        </span>
                                    </div>
                                </div>

                                <h6 class="form-section-title">
                                    <i class="ri-bank-line text-success"></i>
                                    Cuenta para Depósitos
                                </h6>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="field-group">
                                            <div class="mb-3">
                                                <label for="deposit_bank_name" class="form-label">Nombre del Banco</label>
                                                <input type="text" name="deposit_bank_name" id="deposit_bank_name" class="form-control @error('deposit_bank_name') is-invalid @enderror" 
                                                       value="{{ old('deposit_bank_name', json_decode($settings->deposit_details)->bank_name ?? '') }}" 
                                                       placeholder="Ej: Banco Galicia">
                                                <small class="help-text">
                                                    <i class="ri-building-line"></i>
                                                    Banco donde se pueden realizar depósitos
                                                </small>
                                                @error('deposit_bank_name')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="field-group">
                                            <div class="mb-3">
                                                <label for="deposit_account_number" class="form-label">Número de Cuenta</label>
                                                <input type="text" name="deposit_account_number" id="deposit_account_number" class="form-control @error('deposit_account_number') is-invalid @enderror" 
                                                       value="{{ old('deposit_account_number', json_decode($settings->deposit_details)->account_number ?? '') }}" 
                                                       placeholder="Ej: 9876543210987654">
                                                <small class="help-text">
                                                    <i class="ri-hashtag"></i>
                                                    Número de cuenta para depósitos
                                                </small>
                                                @error('deposit_account_number')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="field-group">
                                            <div class="mb-3">
                                                <label for="deposit_cbu" class="form-label">CBU</label>
                                                <input type="text" name="deposit_cbu" id="deposit_cbu" class="form-control @error('deposit_cbu') is-invalid @enderror" 
                                                       value="{{ old('deposit_cbu', json_decode($settings->deposit_details)->cbu ?? '') }}" 
                                                       placeholder="Ej: 9876543210987654321098" maxlength="22">
                                                <small class="help-text">
                                                    <i class="ri-key-line"></i>
                                                    CBU para transferencias a esta cuenta
                                                </small>
                                                @error('deposit_cbu')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="field-group">
                                            <div class="mb-3">
                                                <label for="deposit_alias" class="form-label">Alias</label>
                                                <input type="text" name="deposit_alias" id="deposit_alias" class="form-control @error('deposit_alias') is-invalid @enderror" 
                                                       value="{{ old('deposit_alias', json_decode($settings->deposit_details)->alias ?? '') }}" 
                                                       placeholder="Ej: TIENDA.DEPOSITO.PAGO">
                                                <small class="help-text">
                                                    <i class="ri-at-line"></i>
                                                    Alias para esta cuenta de depósitos
                                                </small>
                                                @error('deposit_alias')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Tarjetas de Crédito -->
                        <div class="tab-pane fade" id="credit-cards" role="tabpanel" aria-labelledby="credit-cards-tab">
                            <div class="payment-method-card">
                                <div class="d-flex align-items-center mb-4">
                                    <div class="payment-icon payment-credit">
                                        <i class="ri-bank-card-line"></i>
                                    </div>
                                    <div>
                                        <h5 class="mb-1">Tarjetas de Crédito</h5>
                                        <p class="text-muted mb-0">Información para procesamiento de pagos con tarjetas</p>
                                        <span class="security-badge mt-2 d-inline-block">
                                            <i class="ri-shield-check-line"></i> Pago Protegido
                                        </span>
                                    </div>
                                </div>

                                <h6 class="form-section-title">
                                    <i class="ri-bank-card-line text-danger"></i>
                                    Configuración de Tarjetas de Crédito
                                </h6>
                                
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="field-group">
                                            <div class="mb-3">
                                                <label for="card_provider" class="form-label">Proveedor/Procesador</label>
                                                <input type="text" name="card_provider" id="card_provider" class="form-control @error('card_provider') is-invalid @enderror" 
                                                       value="{{ old('card_provider', json_decode($settings->credit_card_details)->provider ?? '') }}" 
                                                       placeholder="Ej: Visa, MasterCard, Mercado Pago">
                                                <small class="help-text">
                                                    <i class="ri-bank-card-line"></i>
                                                    Proveedor o procesador de pagos
                                                </small>
                                                @error('card_provider')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-4">
                                        <div class="field-group">
                                            <div class="mb-3">
                                                <label for="card_contact_email" class="form-label">Email de Contacto</label>
                                                <input type="email" name="card_contact_email" id="card_contact_email" class="form-control @error('card_contact_email') is-invalid @enderror" 
                                                       value="{{ old('card_contact_email', json_decode($settings->credit_card_details)->contact_email ?? '') }}" 
                                                       placeholder="tarjetas@empresa.com">
                                                <small class="help-text">
                                                    <i class="ri-mail-line"></i>
                                                    Email para consultas sobre pagos con tarjeta
                                                </small>
                                                @error('card_contact_email')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-4">
                                        <div class="field-group">
                                            <div class="mb-3">
                                                <label for="card_contact_phone" class="form-label">Teléfono de Contacto</label>
                                                <input type="text" name="card_contact_phone" id="card_contact_phone" class="form-control @error('card_contact_phone') is-invalid @enderror" 
                                                       value="{{ old('card_contact_phone', json_decode($settings->credit_card_details)->contact_phone ?? '') }}" 
                                                       placeholder="+54 9 11 2345 6789">
                                                <small class="help-text">
                                                    <i class="ri-phone-line"></i>
                                                    Teléfono para soporte de pagos con tarjeta
                                                </small>
                                                @error('card_contact_phone')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="alert alert-warning mt-3">
                                    <i class="ri-error-warning-line"></i>
                                    <strong>Importante:</strong> Para procesar pagos con tarjeta de crédito necesitas una cuenta de comercio con un procesador de pagos autorizado. Esta información es solo para mostrar a los clientes.
                                </div>
                            </div>
                        </div>

                    </div>

                    <!-- Form Actions -->
                    <div class="form-actions">
                        <button type="submit" class="btn btn-success btn-lg">
                            <i class="ri-save-line me-2"></i>Actualizar Configuración de Pagos
                        </button>
                        <a href="{{ route('admin.dashboard') }}" class="btn btn-outline-secondary btn-lg ms-3">
                            <i class="ri-close-line me-2"></i>Cancelar
                        </a>
                    </div>

                </div>
            </div>

        </form>


@endsection

@section('customJs')
@endsection