@extends('layouts.admin')

@section('title', 'Gestión de Métodos de Pago')

@section('content')
<div class="container-fluid">
    <!-- start page title -->
    <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 font-size-18">Gestión de Métodos de Pago</h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Métodos de Pago</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <!-- Estadísticas -->
    <div class="row">
        <div class="col-xl-3 col-md-6">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex">
                        <div class="flex-1 overflow-hidden">
                            <p class="text-truncate font-size-14 mb-2">Total Métodos</p>
                            <h4 class="mb-0">{{ $estadisticas['total'] }}</h4>
                        </div>
                        <div class="flex-shrink-0 align-self-center">
                            <div class="mini-stat-icon avatar-sm rounded-circle bg-primary">
                                <span class="avatar-title">
                                    <i class="bx bx-credit-card font-size-24"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex">
                        <div class="flex-1 overflow-hidden">
                            <p class="text-truncate font-size-14 mb-2">Activos</p>
                            <h4 class="mb-0">{{ $estadisticas['activos'] }}</h4>
                        </div>
                        <div class="flex-shrink-0 align-self-center">
                            <div class="mini-stat-icon avatar-sm rounded-circle bg-success">
                                <span class="avatar-title">
                                    <i class="bx bx-check-circle font-size-24"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex">
                        <div class="flex-1 overflow-hidden">
                            <p class="text-truncate font-size-14 mb-2">Efectivo</p>
                            <h4 class="mb-0">{{ $estadisticas['efectivo'] }}</h4>
                        </div>
                        <div class="flex-shrink-0 align-self-center">
                            <div class="mini-stat-icon avatar-sm rounded-circle bg-info">
                                <span class="avatar-title">
                                    <i class="bx bx-money font-size-24"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex">
                        <div class="flex-1 overflow-hidden">
                            <p class="text-truncate font-size-14 mb-2">Transferencias</p>
                            <h4 class="mb-0">{{ $estadisticas['transferencia'] }}</h4>
                        </div>
                        <div class="flex-shrink-0 align-self-center">
                            <div class="mini-stat-icon avatar-sm rounded-circle bg-warning">
                                <span class="avatar-title">
                                    <i class="bx bx-transfer font-size-24"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col">
                            <h4 class="card-title">Lista de Métodos de Pago</h4>
                        </div>
                        <div class="col-auto">
                            <a href="{{ route('admin.metodos-pago.create') }}" class="btn btn-primary">
                                <i class="fas fa-plus me-1"></i> Nuevo Método de Pago
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            {{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    <!-- Filtros -->
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <form method="GET" action="{{ route('admin.metodos-pago.index') }}">
                                <div class="row g-3">
                                    <div class="col-md-3">
                                        <label class="form-label">Buscar</label>
                                        <input type="text" class="form-control" name="search" 
                                               value="{{ request('search') }}" 
                                               placeholder="Buscar por nombre o descripción...">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Tipo de Pago</label>
                                        <select class="form-select" name="tipo_pago">
                                            <option value="">Todos los tipos</option>
                                            @foreach($tiposPago as $key => $tipo)
                                                <option value="{{ $key }}" {{ request('tipo_pago') == $key ? 'selected' : '' }}>
                                                    {{ $tipo }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Estado</label>
                                        <select class="form-select" name="activo">
                                            <option value="">Todos los estados</option>
                                            <option value="1" {{ request('activo') == '1' ? 'selected' : '' }}>Activo</option>
                                            <option value="0" {{ request('activo') == '0' ? 'selected' : '' }}>Inactivo</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">&nbsp;</label>
                                        <div class="d-flex gap-2">
                                            <button type="submit" class="btn btn-primary">
                                                <i class="fas fa-search"></i> Buscar
                                            </button>
                                            <a href="{{ route('admin.metodos-pago.index') }}" class="btn btn-secondary">
                                                <i class="fas fa-times"></i> Limpiar
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- Tabla -->
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead class="table-light">
                                <tr>
                                    <th>ID</th>
                                    <th>Nombre</th>
                                    <th>Tipo de Pago</th>
                                    <th>Requiere Comprobante</th>
                                    <th>Estado</th>
                                    <th>Fecha Creación</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($metodosPago as $metodo)
                                    <tr>
                                        <td>{{ $metodo->id }}</td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div>
                                                    <h6 class="mb-0">{{ $metodo->nombre }}</h6>
                                                    @if($metodo->descripcion)
                                                        <small class="text-muted">{{ Str::limit($metodo->descripcion, 50) }}</small>
                                                    @endif
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            @php
                                                $badgeClass = match($metodo->tipo_pago) {
                                                    'efectivo' => 'bg-success',
                                                    'transferencia' => 'bg-info',
                                                    'deposito' => 'bg-warning',
                                                    default => 'bg-secondary'
                                                };
                                            @endphp
                                            <span class="badge {{ $badgeClass }}">
                                                {{ ucfirst($metodo->tipo_pago) }}
                                            </span>
                                        </td>
                                        <td>
                                            @if($metodo->requiere_comprobante)
                                                <span class="badge bg-primary">Sí</span>
                                            @else
                                                <span class="badge bg-secondary">No</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="form-check form-switch">
                                                <input class="form-check-input estado-switch" 
                                                       type="checkbox" 
                                                       data-id="{{ $metodo->id }}"
                                                       {{ $metodo->activo ? 'checked' : '' }}>
                                            </div>
                                        </td>
                                        <td>{{ $metodo->created_at->format('d/m/Y H:i') }}</td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <a href="{{ route('admin.metodos-pago.show', $metodo) }}" 
                                                   class="btn btn-sm btn-outline-info" title="Ver">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <a href="{{ route('admin.metodos-pago.edit', $metodo) }}" 
                                                   class="btn btn-sm btn-outline-primary" title="Editar">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <button type="button" 
                                                        class="btn btn-sm btn-outline-danger btn-eliminar" 
                                                        data-id="{{ $metodo->id }}"
                                                        data-nombre="{{ $metodo->nombre }}"
                                                        title="Eliminar">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center py-4">
                                            <div class="d-flex flex-column align-items-center">
                                                <i class="fas fa-credit-card fa-3x text-muted mb-3"></i>
                                                <h5 class="text-muted">No hay métodos de pago registrados</h5>
                                                <p class="text-muted">Comienza agregando tu primer método de pago</p>
                                                <a href="{{ route('admin.metodos-pago.create') }}" class="btn btn-primary">
                                                    <i class="fas fa-plus me-1"></i> Agregar Método de Pago
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Paginación -->
                    @if($metodosPago->hasPages())
                        <div class="d-flex justify-content-center mt-3">
                            {{ $metodosPago->appends(request()->query())->links() }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de confirmación para eliminar -->
<div class="modal fade" id="modalEliminar" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirmar Eliminación</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>¿Estás seguro de que deseas eliminar el método de pago <strong id="nombreMetodo"></strong>?</p>
                <p class="text-danger"><small>Esta acción no se puede deshacer.</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-danger" id="btnConfirmarEliminar">Eliminar</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // Cambiar estado activo/inactivo
    $('.estado-switch').on('change', function() {
        const metodoPagoId = $(this).data('id');
        const isChecked = $(this).is(':checked');
        
        $.ajax({
            url: `/admin/metodos-pago/${metodoPagoId}/cambiar-estado`,
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.success) {
                    toastr.success(response.message);
                } else {
                    toastr.error(response.message);
                    // Revertir el switch si hay error
                    $(this).prop('checked', !isChecked);
                }
            },
            error: function() {
                toastr.error('Error al cambiar el estado');
                // Revertir el switch si hay error
                $(this).prop('checked', !isChecked);
            }
        });
    });

    // Eliminar método de pago
    let metodoPagoIdEliminar = null;
    
    $('.btn-eliminar').on('click', function() {
        metodoPagoIdEliminar = $(this).data('id');
        const nombreMetodo = $(this).data('nombre');
        
        $('#nombreMetodo').text(nombreMetodo);
        $('#modalEliminar').modal('show');
    });

    $('#btnConfirmarEliminar').on('click', function() {
        if (metodoPagoIdEliminar) {
            $.ajax({
                url: `/admin/metodos-pago/${metodoPagoIdEliminar}`,
                type: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        toastr.success(response.message);
                        location.reload();
                    } else {
                        toastr.error(response.message);
                    }
                },
                error: function() {
                    toastr.error('Error al eliminar el método de pago');
                },
                complete: function() {
                    $('#modalEliminar').modal('hide');
                    metodoPagoIdEliminar = null;
                }
            });
        }
    });
});
</script>
@endsection