@extends('layouts.master')

@section('title')
    Planes de pago
@endsection

@section('css')
<link href="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
<div class="row">
    <div class="col-12">
        <h4 class="mb-0 text-primary fw-semibold" style="color: #020f82 !important;">Planes de pago</h4>
            <hr class="my-3">

        {{-- Sección superior: Título y formulario de búsqueda --}}
        <div class="card">
            <div class="card-body">
                <p class="text-muted mb-4">
                    Usa el siguiente formulario para mostrar los planes de pago registrados en la aplicación.
                </p>

                {{-- Formulario de filtros --}}
                <div class="row align-items-end g-3">
                    <div class="col-md-4">
                        <label for="plan-pagos" class="form-label">Plan de pagos</label>
                        <input type="text" class="form-control" id="plan-pagos" name="plan_pagos" placeholder="">
                    </div>
                    <div class="col-md-4">
                        <label for="tipo-plan" class="form-label">Tipo de plan</label>
                        <select class="form-select" id="tipo-plan" name="tipo_plan">
                            <option value="">-- Todos --</option>
                            <option value="trimestral">Trimestral</option>
                            <option value="cuatrimestral">Cuatrimestral</option>
                            <option value="semestral">Semestral</option>
                            <option value="anual">Anual</option>
                            <option value="mensual">Mensual</option>
                            <option value="bimestral">Bimestral</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="estatus" class="form-label">Estatus</label>
                        <select class="form-select" id="estatus" name="estatus">
                            <option value="activos">Activos</option>
                            <option value="inactivos">Inactivos</option>
                            <option value="ambos" selected>Ambos</option>
                        </select>
                    </div>
                </div>

                <div class="row mt-2">
                    <div class="col-12 d-flex justify-content-end gap-2">
                        <button type="button" class="btn btn-primary btn-sm px-4 rounded" id="btn-buscar">
                            <i class="ri-search-line align-middle me-1"></i> Buscar
                        </button>
                        <button type="button" class="btn btn-warning text-white btn-sm px-4 rounded" id="btn-registrar" data-bs-toggle="modal" data-bs-target="#modalNuevoPlan">
                            <i class="ri-add-line align-middle me-1"></i> Registrar
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mt-3">
            <div class="card-body">
                <div id="planes-empty-state" class="text-center py-5">
                    <div class="avatar-xl mx-auto mb-2">
                        <div class="avatar-title bg-dark-subtle rounded-circle d-inline-flex align-items-center justify-content-center">
                            <i class="ri-information-line text-white fs-1"></i>
                        </div>
                    </div>
                    <p class="text-muted mb-0">Usa los filtros y da clic en Buscar para ver los planes registrados.</p>
                </div>
                <div id="planes-results" class="d-none table-responsive">
                    <table class="table table-hover table-striped align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Plan de pagos</th>
                                <th>Tipo</th>
                                <th>Inicios de periodo</th>
                                <th>Estatus</th>
                                <th>Observaciones</th>
                                <th class="text-end">Opciones</th>
                            </tr>
                        </thead>
                        <tbody id="tbody-planes"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Modal Nuevo plan de pago --}}
<div class="modal fade" id="modalNuevoPlan" tabindex="-1" aria-labelledby="modalNuevoPlanLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white border-0">
                <h5 class="modal-title fw-bold" id="modalNuevoPlanLabel">Planes de pago</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">
                <p class="text-dark mb-4" id="modal-plan-instruccion">Agrega la siguiente información y da clic en guardar.</p>

                <form id="formNuevoPlan">
                    <div class="row mb-3">
                        <div class="col-md-5">
                            <label for="plan_pagos_modal" class="form-label">* Plan de pagos</label>
                            <input type="text" class="form-control" id="plan_pagos_modal" name="plan_pagos" required>
                        </div>
                        <div class="col-md-4">
                            <label for="tipo_plan_modal" class="form-label">* Tipo de plan</label>
                            <select class="form-select" id="tipo_plan_modal" name="tipo_plan" required>
                                <option value="trimestral" selected>Trimestral</option>
                                <option value="cuatrimestral">Cuatrimestral</option>
                                <option value="semestral">Semestral</option>
                                <option value="anual">Anual</option>
                                <option value="mensual">Mensual</option>
                                <option value="bimestral">Bimestral</option>
                            </select>
                        </div>
                        <div class="col-md-3 d-flex align-items-end pb-1">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="plan_activo" name="plan_activo" checked>
                                <label class="form-check-label" for="plan_activo">Plan activo</label>
                            </div>
                        </div>
                    </div>

                    <div id="bloque-inicios-cuatrimestre" class="row mb-3 d-none">
                        <div class="col-12">
                            <label class="form-label">Inicios de periodo <span class="text-muted fw-normal">(cuatrimestral)</span></label>
                            <p class="text-muted small mb-2">Selecciona los meses en que puede iniciar el periodo.</p>
                            <div class="d-flex flex-wrap gap-3">
                                @foreach ([
                                    1 => 'Enero', 3 => 'Marzo', 4 => 'Abril', 5 => 'Mayo',
                                    7 => 'Julio', 8 => 'Agosto', 9 => 'Septiembre', 11 => 'Noviembre', 12 => 'Diciembre',
                                ] as $num => $etiqueta)
                                    <div class="form-check">
                                        <input class="form-check-input mes-inicio-cuatrimestre" type="checkbox" value="{{ $num }}" id="mes_cua_{{ $num }}">
                                        <label class="form-check-label" for="mes_cua_{{ $num }}">{{ $etiqueta }}</label>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <div id="bloque-inicios-semestral" class="row mb-3 d-none">
                        <div class="col-12">
                            <label class="form-label">Inicios de periodo <span class="text-muted fw-normal">(semestral)</span></label>
                            <p class="text-muted small mb-2">Selecciona los meses en que puede iniciar el periodo.</p>
                            <div class="d-flex flex-wrap gap-3">
                                @foreach ([1 => 'Enero', 6 => 'Junio', 10 => 'Octubre'] as $num => $etiqueta)
                                    <div class="form-check">
                                        <input class="form-check-input mes-inicio-semestral" type="checkbox" value="{{ $num }}" id="mes_sem_{{ $num }}">
                                        <label class="form-check-label" for="mes_sem_{{ $num }}">{{ $etiqueta }}</label>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <div id="bloque-inicios-anual" class="row mb-3 d-none">
                        <div class="col-12">
                            <label class="form-label">Inicios de periodo <span class="text-muted fw-normal">(anual)</span></label>
                            <p class="text-muted small mb-2">El periodo anual inicia en agosto.</p>
                            <div class="form-check">
                                <input class="form-check-input mes-inicio-anual" type="checkbox" value="8" id="mes_anual_agosto">
                                <label class="form-check-label" for="mes_anual_agosto">Agosto</label>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-12">
                            <label for="observaciones" class="form-label">Observaciones</label>
                            <textarea class="form-control" id="observaciones" name="observaciones" rows="4"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer justify-content-end border-top gap-2">
                <button type="button" class="btn btn-dark rounded" data-bs-dismiss="modal">Regresar</button>
                <button type="button" class="btn btn-success rounded" id="btn-guardar-plan">Guardar</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>
@endsection

@section('script-bottom')
<script>
(function() {
    var urlBuscar = @json(route('planes-de-pago.planes.buscar'));
    var urlStore = @json(route('planes-de-pago.planes.store'));
    var urlShowTpl = @json(route('planes-de-pago.planes.show', ['plan' => '__ID__']));
    var urlUpdateTpl = @json(route('planes-de-pago.planes.update', ['plan' => '__ID__']));
    var urlDeleteTpl = @json(route('planes-de-pago.planes.destroy', ['plan' => '__ID__']));
    var csrf = @json(csrf_token());

    var emptyState = document.getElementById('planes-empty-state');
    var resultsWrap = document.getElementById('planes-results');
    var tbody = document.getElementById('tbody-planes');
    var inputPlanFiltro = document.getElementById('plan-pagos');
    var selectTipoFiltro = document.getElementById('tipo-plan');
    var selectEstatusFiltro = document.getElementById('estatus');
    var modalEl = document.getElementById('modalNuevoPlan');
    var modalTitle = document.getElementById('modalNuevoPlanLabel');
    var modalInstruccion = document.getElementById('modal-plan-instruccion');
    var formPlan = document.getElementById('formNuevoPlan');
    var selectTipoModal = document.getElementById('tipo_plan_modal');
    var bloqueCua = document.getElementById('bloque-inicios-cuatrimestre');
    var bloqueSem = document.getElementById('bloque-inicios-semestral');
    var bloqueAnu = document.getElementById('bloque-inicios-anual');

    var editId = null;
    var tiposConMeses = ['cuatrimestral', 'semestral', 'anual'];

    var tipoLabels = {
        trimestral: 'Trimestral', cuatrimestral: 'Cuatrimestral', semestral: 'Semestral',
        anual: 'Anual', mensual: 'Mensual', bimestral: 'Bimestral'
    };
    var nombresMes = {
        1: 'Enero', 2: 'Febrero', 3: 'Marzo', 4: 'Abril', 5: 'Mayo', 6: 'Junio',
        7: 'Julio', 8: 'Agosto', 9: 'Septiembre', 10: 'Octubre', 11: 'Noviembre', 12: 'Diciembre'
    };

    function escapeHtml(s) {
        var d = document.createElement('div');
        d.textContent = s;
        return d.innerHTML;
    }

    function limpiarTodosLosMeses() {
        document.querySelectorAll('.mes-inicio-cuatrimestre, .mes-inicio-semestral, .mes-inicio-anual').forEach(function(ch) {
            ch.checked = false;
        });
    }

    function toggleIniciosPorTipo() {
        var tipo = selectTipoModal.value;
        bloqueCua.classList.toggle('d-none', tipo !== 'cuatrimestral');
        bloqueSem.classList.toggle('d-none', tipo !== 'semestral');
        bloqueAnu.classList.toggle('d-none', tipo !== 'anual');
        if (tipo !== 'cuatrimestral' && tipo !== 'semestral' && tipo !== 'anual') {
            limpiarTodosLosMeses();
        } else {
            if (tipo !== 'cuatrimestral') {
                document.querySelectorAll('.mes-inicio-cuatrimestre').forEach(function(ch) { ch.checked = false; });
            }
            if (tipo !== 'semestral') {
                document.querySelectorAll('.mes-inicio-semestral').forEach(function(ch) { ch.checked = false; });
            }
            if (tipo !== 'anual') {
                document.querySelectorAll('.mes-inicio-anual').forEach(function(ch) { ch.checked = false; });
            }
        }
    }

    selectTipoModal.addEventListener('change', toggleIniciosPorTipo);

    function prepararModalNuevo() {
        editId = null;
        formPlan.reset();
        document.getElementById('plan_activo').checked = true;
        modalTitle.textContent = 'Planes de pago';
        modalInstruccion.textContent = 'Agrega la siguiente información y da clic en guardar.';
        limpiarTodosLosMeses();
        toggleIniciosPorTipo();
    }

    document.getElementById('btn-registrar').addEventListener('click', function() {
        prepararModalNuevo();
    });

    modalEl.addEventListener('hidden.bs.modal', function() {
        prepararModalNuevo();
    });

    function mesesInicioTexto(arr) {
        if (!arr || !arr.length) return '—';
        return arr.map(function(m) { return nombresMes[m] || m; }).join(', ');
    }

    function mesesColumnaParaPlan(p) {
        if (tiposConMeses.indexOf(p.tipo_plan) === -1) return '—';
        return mesesInicioTexto(p.meses_inicio);
    }

    function colectarMesesSeleccionados(tipo) {
        var mesesInicio = [];
        if (tipo === 'cuatrimestral') {
            document.querySelectorAll('.mes-inicio-cuatrimestre:checked').forEach(function(ch) {
                mesesInicio.push(parseInt(ch.value, 10));
            });
        } else if (tipo === 'semestral') {
            document.querySelectorAll('.mes-inicio-semestral:checked').forEach(function(ch) {
                mesesInicio.push(parseInt(ch.value, 10));
            });
        } else if (tipo === 'anual') {
            document.querySelectorAll('.mes-inicio-anual:checked').forEach(function(ch) {
                mesesInicio.push(parseInt(ch.value, 10));
            });
        }
        return mesesInicio;
    }

    function aplicarMesesAlFormulario(tipo, meses) {
        limpiarTodosLosMeses();
        if (!meses || !meses.length) {
            toggleIniciosPorTipo();
            return;
        }
        meses.forEach(function(m) {
            var sel = '';
            if (tipo === 'cuatrimestral') sel = '#mes_cua_' + m;
            else if (tipo === 'semestral') sel = '#mes_sem_' + m;
            else if (tipo === 'anual' && m === 8) sel = '#mes_anual_agosto';
            if (sel) {
                var el = document.querySelector(sel);
                if (el) el.checked = true;
            }
        });
    }

    function renderTabla(planes) {
        tbody.innerHTML = '';
        planes.forEach(function(p) {
            var tr = document.createElement('tr');
            var estatus = p.activo
                ? '<span class="badge bg-success-subtle text-success">Activo</span>'
                : '<span class="badge bg-info-subtle text-info">Inactivo</span>';
            var obs = (p.observaciones || '').trim();
            if (obs.length > 80) obs = obs.slice(0, 77) + '…';
            var id = parseInt(p.id, 10);
            tr.innerHTML =
                '<td>' + escapeHtml(p.nombre || '') + '</td>' +
                '<td>' + escapeHtml(tipoLabels[p.tipo_plan] || p.tipo_plan) + '</td>' +
                '<td class="small">' + escapeHtml(mesesColumnaParaPlan(p)) + '</td>' +
                '<td>' + estatus + '</td>' +
                '<td class="small text-muted">' + escapeHtml(obs || '—') + '</td>' +
                '<td class="text-end text-nowrap">' +
                '<button type="button" class="btn btn-sm btn-outline-primary btn-editar-plan me-1" data-id="' + id + '" title="Editar"><i class="ri-pencil-line"></i></button>' +
                '<button type="button" class="btn btn-sm btn-outline-danger btn-eliminar-plan" data-id="' + id + '" title="Eliminar"><i class="ri-delete-bin-line"></i></button>' +
                '</td>';
            tbody.appendChild(tr);
        });
    }

    function mensajeError(res, fallback) {
        return res.json().then(function(body) {
            if (body.errors) {
                var msgs = [];
                Object.keys(body.errors).forEach(function(k) { msgs = msgs.concat(body.errors[k]); });
                return msgs.join('\n') || fallback;
            }
            return body.message || fallback;
        }).catch(function() { return fallback; });
    }

    document.getElementById('btn-buscar').addEventListener('click', function() {
        var params = new URLSearchParams();
        var nombre = (inputPlanFiltro.value || '').trim();
        var tipo = selectTipoFiltro.value || '';
        var est = selectEstatusFiltro.value || 'ambos';
        if (nombre) params.set('plan_pagos', nombre);
        if (tipo) params.set('tipo_plan', tipo);
        if (est) params.set('estatus', est);

        var u = urlBuscar + (params.toString() ? ('?' + params.toString()) : '');
        fetch(u, {
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
            credentials: 'same-origin'
        }).then(function(r) {
            if (!r.ok) throw new Error('No se pudo buscar.');
            return r.json();
        }).then(function(data) {
            var planes = data.planes || [];
            emptyState.classList.add('d-none');
            resultsWrap.classList.remove('d-none');
            if (planes.length === 0) {
                tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted py-4">No hay planes con los filtros seleccionados.</td></tr>';
                return;
            }
            renderTabla(planes);
        }).catch(function() {
            Swal.fire({ icon: 'error', title: 'Error', text: 'No se completó la búsqueda.' });
        });
    });

    function abrirModalEdicion(plan) {
        editId = plan.id;
        document.getElementById('plan_pagos_modal').value = plan.nombre || '';
        selectTipoModal.value = plan.tipo_plan || 'trimestral';
        document.getElementById('plan_activo').checked = !!plan.activo;
        document.getElementById('observaciones').value = plan.observaciones || '';
        modalTitle.textContent = 'Editar plan de pago';
        modalInstruccion.textContent = 'Modifica la información y da clic en guardar.';
        toggleIniciosPorTipo();
        aplicarMesesAlFormulario(plan.tipo_plan, plan.meses_inicio || []);
        var bs = bootstrap.Modal.getOrCreateInstance(modalEl);
        bs.show();
    }

    tbody.addEventListener('click', function(e) {
        var btnEd = e.target.closest('.btn-editar-plan');
        if (btnEd) {
            var id = parseInt(btnEd.getAttribute('data-id'), 10);
            var u = urlShowTpl.replace('__ID__', encodeURIComponent(id));
            fetch(u, {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                credentials: 'same-origin'
            }).then(function(r) {
                if (!r.ok) throw new Error('No se pudo cargar el plan.');
                return r.json();
            }).then(abrirModalEdicion).catch(function() {
                Swal.fire({ icon: 'error', title: 'Error', text: 'No se pudo cargar el plan para editar.' });
            });
            return;
        }
        var btnEl = e.target.closest('.btn-eliminar-plan');
        if (btnEl) {
            var idDel = parseInt(btnEl.getAttribute('data-id'), 10);
            Swal.fire({
                icon: 'warning',
                title: '¿Eliminar plan?',
                text: 'Esta acción no se puede deshacer.',
                showCancelButton: true,
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar',
                confirmButtonColor: '#d33'
            }).then(function(result) {
                if (!result.isConfirmed) return;
                var url = urlDeleteTpl.replace('__ID__', encodeURIComponent(idDel));
                fetch(url, {
                    method: 'DELETE',
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': csrf,
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    credentials: 'same-origin'
                }).then(function(r) {
                    if (r.ok) return r.json().then(function(body) {
                        Swal.fire({ icon: 'success', title: 'Listo', text: body.message || 'Eliminado.' });
                        document.getElementById('btn-buscar').click();
                    });
                    return mensajeError(r, 'No se pudo eliminar.').then(function(msg) {
                        Swal.fire({ icon: 'error', title: 'Error', text: msg });
                    });
                }).catch(function() {
                    Swal.fire({ icon: 'error', title: 'Error', text: 'Error de red.' });
                });
            });
        }
    });

    document.getElementById('btn-guardar-plan').addEventListener('click', function() {
        var nombre = (document.getElementById('plan_pagos_modal').value || '').trim();
        var tipo = selectTipoModal.value;
        var activo = document.getElementById('plan_activo').checked;
        var observaciones = (document.getElementById('observaciones').value || '').trim();

        if (!nombre) {
            document.getElementById('plan_pagos_modal').focus();
            Swal.fire({ icon: 'warning', title: 'Datos incompletos', text: 'Indica el nombre del plan de pagos.' });
            return;
        }

        var mesesInicio = colectarMesesSeleccionados(tipo);
        if (tiposConMeses.indexOf(tipo) !== -1 && mesesInicio.length === 0) {
            Swal.fire({ icon: 'warning', title: 'Datos incompletos', text: 'Selecciona al menos un inicio de periodo para este tipo de plan.' });
            return;
        }

        var payload = {
            nombre: nombre,
            tipo_plan: tipo,
            activo: activo,
            observaciones: observaciones || null,
            meses_inicio: tiposConMeses.indexOf(tipo) !== -1 ? mesesInicio : []
        };

        var btn = document.getElementById('btn-guardar-plan');
        btn.disabled = true;
        var esEdicion = editId !== null;
        var url = esEdicion ? urlUpdateTpl.replace('__ID__', encodeURIComponent(editId)) : urlStore;
        var method = esEdicion ? 'PUT' : 'POST';

        fetch(url, {
            method: method,
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': csrf,
                'X-Requested-With': 'XMLHttpRequest'
            },
            credentials: 'same-origin',
            body: JSON.stringify(payload)
        }).then(function(r) {
            if (r.ok) {
                return r.json().then(function(body) {
                    Swal.fire({ icon: 'success', title: 'Listo', text: body.message || 'Plan guardado.' });
                    var m = bootstrap.Modal.getInstance(modalEl);
                    if (m) m.hide();
                    document.getElementById('btn-buscar').click();
                });
            }
            return mensajeError(r, 'No se pudo guardar.').then(function(msg) {
                Swal.fire({ icon: 'error', title: 'Error', text: msg });
            });
        }).catch(function() {
            Swal.fire({ icon: 'error', title: 'Error', text: 'Error de red al guardar.' });
        }).finally(function() {
            btn.disabled = false;
        });
    });

    toggleIniciosPorTipo();
})();
</script>
@endsection