@extends("admin.layout.layout")
@section("styles")
    @php
        $titulo = "Componentes por asignatura y nivel";
        $modulo = "Plan de estudios";
        $vista="Listado de componentes por asignatura y nivel";
    @endphp
    <title>{{getenv("APP_NAME")}} | {{$titulo}}</title>
@endsection

@section("contenido")
    <div class="row">
        <div class="col-md-12 mb-2">
            <div class="card px-5">
                <h2 class="py-5 ">Componentes por asignatura y ciclo </h2>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card px-5">
                <h4 class="my-3 text-center">Listado de componentes</h4>
                <table class="table table-sm table-hover" id="tabla">
                    <tr>
                        <th class="text-center"><b>Componente</b></th>
                        <th class="text-center"><b>Acciones</b></th>
                    </tr>
                    @foreach($tiposComponentes as $tipoComponente)
                        <tr>
                            <td class="text-left">{{$tipoComponente->tipo_componente}}</td>
                            <td class="text-center">
                                <span data-id="{{$tipoComponente->id}}" title="Agregar componente" type="button" class="badge badge-success agregarComponente"> <i class="ki-solid ki-arrow-right text-white"></i> </span>
                            </td>

                    @endforeach
                </table>

            </div>
        </div>
        <div class="col-md-8">
            <div class="card px-5">
                <h4 class="my-3 text-center">Materia <span class="badge badge-primary"></span></h4>
                <div class="row">
                    <div class="col-md-6">
                        <label for="asignatura_id" class="form-label">Asignatura</label>
                        <select name="asignatura_id" id="asignatura_id" class="form-select form-select-sm">
                            <option value="">Seleccione una asignatura</option>
                            @foreach($asignaturas as $asignatura)
                                <option value="{{$asignatura->id}}">{{$asignatura->asignatura}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="asignatura_id" class="form-label">Ciclo</label>
                        <select name="ciclo_id" id="ciclo_id" class="form-select form-select-sm">
                            <option value="">Seleccione un ciclo</option>
                            @foreach($ciclos as $ciclo)
                                <option value="{{$ciclo->id}}">{{$ciclo->ciclo}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <table class="table table-sm table-hover" id="componentes_materias">
                    <thead>
                    <tr>
                        <th><b>Componente</b></th>
                        <th><b>Porcentaje</b></th>
                        <th><b>Acción</b></th>
                    </tr>
                    </thead>
                    <tbody id="tbody_componentes"></tbody>
                    <tfoot>
                    <tr>
                        <td class="text-end"><b>Total</b></td>
                        <td colspan="2">
                            <span id="total_porcentaje" class="badge bg-primary">0%</span>
                        </td>
                    </tr>
                    </tfoot>
                </table>

            </div>
        </div>
    </div>
@endsection

@section("scripts")
    <script>
        const Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 1800,
            timerProgressBar: true,
        });

        $('#asignatura_id, #ciclo_id').on('change', function () {
            cargarComponentesPorAsignaturaYCiclo();
        });

        $(document).on('click', '.agregarComponente', function () {
            let tipo_componente_id = $(this).data('id');
            let asignatura_id = $('#asignatura_id').val();
            let ciclo_id = $('#ciclo_id').val();

            if (!asignatura_id || !ciclo_id) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Seleccione Asignatura y Ciclo',
                    text: 'Debe seleccionar ambos antes de agregar un componente.'
                });
                return;
            }

            $.ajax({
                url: '{{ route("admin::componente.agregar") }}',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    asignatura_id: asignatura_id,
                    ciclo_id: ciclo_id,
                    tipo_componente_id: tipo_componente_id
                },
                success: function (response) {
                    if(response.status !== 'success') {
                        Swal.fire('Error', response.msg, 'error');
                    }
                    renderComponentesTable(response);

                },
                error: function () {
                    Swal.fire('Error', 'No se pudo procesar la solicitud', 'error');
                }
            });
        });

        function renderComponentesTable(response) {
            if (response.componentes && Array.isArray(response.componentes)) {
                let html = '';
                let total = 0;

                response.componentes.forEach(function (c) {
                    total += parseFloat(c.porcentaje || 0);

                    html += `
                <tr>
                    <td>${c.componente.tipo_componente}</td>
                    <td>
                        <input type="number" class="form-control form-control-sm porcentajeComponente"
                               data-id="${c.id}" value="${c.porcentaje}" min="0" max="100"
                               style="width: 80px; display: inline-block;">
                    </td>
                    <td>
                        <button class="btn btn-danger btn-sm eliminarComponente"
                                data-id="${c.id}"
                                title="Eliminar componente">
                            <i class="fa fa-trash"></i>
                        </button>
                    </td>
                </tr>
            `;
                });

                $('#tbody_componentes').html(html);
                $('#total_porcentaje').text(total.toFixed(2) + '%');
            }
        }


        function cargarComponentesPorAsignaturaYCiclo() {
            const asignatura_id = $('#asignatura_id').val();
            const ciclo_id = $('#ciclo_id').val();

            if (asignatura_id && ciclo_id) {
                $.ajax({
                    url: '{{ route("admin::componentes.listar") }}',
                    method: 'GET',
                    data: {
                        asignatura_id: asignatura_id,
                        ciclo_id: ciclo_id
                    },
                    success: function (response) {
                        renderComponentesTable(response);
                    },
                    error: function () {
                        Swal.fire('Error', 'No se pudo cargar la lista de componentes.', 'error');
                    }
                });
            }
        }

        $(document).on('change', '.porcentajeComponente', function () {
            const input = $(this);
            const id = input.data('id');
            const nuevoValor = parseFloat(input.val());

            if (isNaN(nuevoValor) || nuevoValor < 0 || nuevoValor > 100) {
                Swal.fire('Error', 'El porcentaje debe estar entre 0 y 100.', 'error');
                input.val(0);
                return;
            }

            // Calcular total actual sin este input
            let total = 0;
            $('.porcentajeComponente').each(function () {
                const actual = parseFloat($(this).val()) || 0;
                if ($(this).data('id') != id) {
                    total += actual;
                }
            });

            // Sumar el nuevo valor del input editado
            total += nuevoValor;

            if (total > 100) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Límite excedido',
                    text: 'La suma total de los porcentajes no puede superar el 100%.'
                });
                input.val(0); // O puedes restaurar el valor anterior si lo llevas como atributo
                return;
            }

            // Enviar al servidor
            $.ajax({
                url: '{{ route("admin::componente.actualizarPorcentaje") }}',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    id: id,
                    porcentaje: nuevoValor
                },
                success: function (response) {
                    if (response.status === 'success') {
                        Toast.fire({
                            icon: 'success',
                            title: response.msg
                        });
                        cargarComponentesPorAsignaturaYCiclo(); // Para actualizar el total
                    }
                },
                error: function () {
                    Swal.fire('Error', 'No se pudo actualizar el porcentaje.', 'error');
                }
            });
        });

        $(document).on('click', '.eliminarComponente', function () {
            const id = $(this).data('id');

            Swal.fire({
                title: '¿Eliminar componente?',
                text: 'Esta acción no se puede deshacer.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '{{ route("admin::componente.eliminar",":id") }}'.replace(':id', id),
                        type: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function (response) {
                            if (response.status === 'success') {
                                Toast.fire({icon: 'success', title: response.msg});
                                cargarComponentesPorAsignaturaYCiclo(response);
                            }
                        },
                        error: function () {
                            Swal.fire('Error', 'No se pudo eliminar el componente.', 'error');
                        }
                    });
                }
            });
        });



    </script>


@endsection