@extends('front.layoutwithout')

@section('title', 'Captura de materias')
@section('sub-title')
    {{-- {{ dd($errors->all()) }} --}}

@section('content')
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="1-tab" data-toggle="tab" href="#1" role="tab" aria-controls="1"
                aria-selected="true">Materias</a>
        </li>

    </ul>

    <div class="tab-content" id="myTabContent">

        <div class="tab-pane fade show active" id="1" role="tabpanel" aria-labelledby="1-tab">
            <form action="{{ route('subjects.store') }}" method="post" id="form">
                @csrf
                <div class="row">
                          <input type="hidden" name="semestre" value="1">
                    {{-- <div class="col-xl-2">
                        <div class="form-group">
                            <div class="checkbox checkbox-css">
                                <input type="hidden" name="semestre" value="1">  å
                                <input type="checkbox" name="semestre" value="0"
                                    {{ @old('semestre') == 0 ? 'checked' : '' }} id="cuatrimestre" />
                                <label for="cuatrimestre">Cuatrimestre</label>
                            </div>
                        </div>
                    </div> --}}
                </div>
                <div class="row">
                    <div class="col-xl-3 col-lg-3">
                        <div class="form-group">
                            <label>Plan</label>
                            <select id="plan" name="career_plan_id"
                                class="form-control @error('career_plan_id') no-valid @enderror">
                                <option value="0">-- Selecciona un plan --</option>
                                @foreach ($data['career_plans'] as $plan)
                                    <option value="{{ $plan->id }}"
                                        {{ @old('career_plan_id') == $plan->id ? 'selected' : '' }}>{{ $plan->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-6">
                        <div class="form-group">
                            <label>Carrera</label>
                            <select id="career" name="career_id"
                                class="form-control @error('career_id') no-valid @enderror">
                                <option value="0">-- Selecciona la carrera --</option>
                                @foreach ($data['careers'] as $especialization)
                                    <option value="{{ $especialization->id }}"
                                        {{ @old('career_id') == $especialization->id ? 'selected' : '' }}>
                                        {{ $especialization->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-3">
                        <div class="form-group">
                            <label>Especialización</label>
                            <select id="career_specialities" name="career_specialities_id"
                                class="form-control @error('career_specialities_id') no-valid @enderror">
                                <option value="0">-- Selecciona especialización --</option>
                                @foreach ($data['career_specialities'] as $especialization)
                                    <option value="{{ $especialization->id }}"
                                        {{ @old('career_specialities_id') == $especialization->id ? 'selected' : '' }}>
                                        {{ $especialization->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xl-6 col-lg-6">
                        <div class="form-group">
                            <label>Especializaciones</label>
                            <select id="specialities" name="specialities_id"
                                class="form-control @error('specialities_id') no-valid @enderror">
                                <option selected="" value="0" disabled="">-- Selecciona especializaciones --</option>
                                @foreach ($data['specialities'] as $speciality)
                                    <option value="{{ $speciality->id }}">{{ $speciality->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-lg-6" id="grade">

                        <div class="form-group">
                            <label>Área de formación</label>
                            <select id="grade_s" name="formation"
                                class="form-control @error('formation') no-valid @enderror">
                                <option value="0">-- Selecciona área de formación--</option>
                                <option {{ @old('formation') == 'Ninguna' ? 'selected' : '' }} value="Ninguna">Ninguna
                                </option>
                                <option {{ @old('formation') == 'Optativa' ? 'selected' : '' }} value="Optativa">Optativa
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-3" style="display: none;" id="quarter">
                        <div class="form-group">
                            <label>Área de Formación</label>
                            <select id="quarter_s" name="formation" class="form-control">
                                <option selected="" value="0" disabled="">Selecciona Área de Formación</option>
                                <option {{ @old('formation') == 'Ninguna' ? 'selected' : '' }} value="Ninguna">Ninguna
                                </option>
                                <option {{ @old('formation') == 'Área de formación básica' ? 'selected' : '' }}
                                    value="Área de formación básica">Área de formación básica</option>
                                <option {{ @old('formation') == 'Área de especialización' ? 'selected' : '' }}
                                    value="Área de especialización">Área de especialización</option>
                                <option {{ @old('formation') == 'Área de formación complementaria' ? 'selected' : '' }}
                                    value="Área de formación complementaria">Área de formación complementaria</option>
                                <option {{ @old('formation') == 'Optativa' ? 'selected' : '' }} value="Optativa">Optativa
                                </option>
                                <option {{ @old('formation') == 'Área formación profesionalizante' ? 'selected' : '' }}
                                    value="Área formación profesionalizante">Área formación profesionalizante</option>
                                <option {{ @old('formation') == 'Área de formación empresarial' ? 'selected' : '' }}
                                    value="Área de formación empresarial">Área de formación empresarial</option>
                                {{-- <option value="Todas">Todas</option> --}}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">

                    <div class="col-lg-12">

                        <table id="subjectsTable" class="table table-bordered">

                            <thead>
                                <tr>
                                    <th width="1em">Clave</th>
                                    <th>Nombre</th>
                                    <th style="width:5%;">Hrs</th>
                                    <th style="width:5%;">Ser 1</th>
                                    <th style="width:5%;">Ser 2</th>
                                    <th style="width:5%;">Ser 3</th>
                                    <th style="width:5%;">Ser 4</th>
                                    <th style="width:5%;">Ser 5</th>
                                    {{-- <th style="width:5em;">Op</th> --}}
                                    <th style="width:5%;">Cred.</th>
                                    <th style="width:3%;"></th>
                                    <th style="width:3%;"></th>
                                    {{-- <th style="width:5em;"></th> --}}
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>

                    </div>
                </div>
                <div class="row">
                    <div class="col-xl-3 col-lg-4">
                        <div class="form-group">
                            <label>Clave materia</label>
                            <input type="text" name="code" class="form-control @error('code') no-valid @enderror"
                                value="{{ old('code') }}">
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-4">
                        <div class="form-group">
                            <label>Nombre materia</label>
                            <input type="text" name="name" class="form-control @error('name') no-valid @enderror"
                                value="{{ old('name') }}">
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-4">
                        <div class="form-group">
                            <label>Hrs x Sem</label>
                            <input type="number" name="hours" min="1"
                                class="form-control @error('hours') no-valid @enderror" value="{{ old('hours') }}">
                        </div>
                    </div>
                </div>
                <div class="row">

                    <div class="col-xl-2 col-lg-4">
                        <div class="form-group">
                            <label>Seriación 1</label>
                            <input type="text" name="seriation_1"
                                class="form-control @error('seriation_1') no-valid @enderror"
                                value="{{ old('seriation_1') }}">
                        </div>
                    </div>

                    <div class="col-xl-2 col-lg-4">
                        <div class="form-group">
                            <label>Seriación 2</label>
                            <input type="text" name="seriation_2"
                                class="form-control @error('seriation_2') no-valid @enderror"
                                value="{{ old('seriation_2') }}">
                        </div>
                    </div>

                    <div class="col-xl-2 col-lg-4">
                        <div class="form-group">
                            <label>Seriación 3</label>
                            <input type="text" name="seriation_3"
                                class="form-control @error('seriation_3') no-valid @enderror"
                                value="{{ old('seriation_3') }}">
                        </div>
                    </div>

                    <div class="col-xl-2 col-lg-4">
                        <div class="form-group">
                            <label>Seriación 4</label>
                            <input type="text" name="seriation_4"
                                class="form-control @error('seriation_4') no-valid @enderror"
                                value="{{ old('seriation_4') }}">
                        </div>
                    </div>

                    <div class="col-xl-2 col-lg-4">
                        <div class="form-group">
                            <label>Seriación 5</label>
                            <input type="text" name="seriation_5"
                                class="form-control @error('seriation_5') no-valid @enderror"
                                value="{{ old('seriation_5') }}">
                        </div>
                    </div>


                </div>
                <div class="row">
                    <div class="col-xl-2 col-lg-4">
                        <div class="form-group">
                            <label id="label_quatri" style="display: none;">Cuatrimestre</label>
                            <label id="label_semester">Módulo</label>
                            <input type="number" name="grade" class="form-control" value="01" min="01" max="12">
                        </div>
                    </div>

  <div class="col-xl-2 col-lg-4">
                        <div class="form-group">
                            <label>Créditos</label>
                            <input type="number" min="1" name="credits"
                                class="form-control @error('credits') no-valid @enderror" value="{{ old('credits') }}">
                        </div>
                    </div>
                    <div class="col-lg-2">

                        <div class="form-group">
                            <div class="checkbox checkbox-css top-center">
                                <input type="hidden" name="departamental" value="0">
                                <input type="checkbox" name="departamental" value="1" id="departamental"
                                    @error('departamental_percentage') checked @enderror />
                                <label for="departamental">Departamental</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-4" id="departamental_percentage"
                        style="display:none;@error('departamental_percentage') display:block; @enderror">
                        <div class="form-group">
                            <label>Porcentaje</label>
                            <input type="number" min="0" max="100" name="departamental_percentage"
                                class="form-control @error('departamental_percentage') no-valid @enderror"
                                value="{{ old('departamental_percentage') }}" required>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xl-2 col-lg-4">
                        <button type="submit" id="save" class="btn disable btn-block" disabled>Guardar</button>
                    </div>
                </div>
            </form>
        </div>

    </div>

@endsection

@push('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.min.css">
@endpush
@push('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.all.min.js"></script>
    <script>
        $(document.body).on('click', '.editSubject', function() {
            tds = $(this).parent().siblings();
            console.log(tds);
            $('input[name="code"]').val(tds[0].getAttribute('data-code'));
            $('input[name="name"]').val(tds[1].getAttribute('data-name'));
            $('input[name="hours"]').val(tds[2].getAttribute('data-hours'));
            $('input[name="seriation_1"]').val(tds[3].getAttribute('data-s1') == "N/A" ? "" : tds[3].getAttribute(
                'data-s1'));
            $('input[name="seriation_2"]').val(tds[4].getAttribute('data-s2') == "N/A" ? "" : tds[4].getAttribute(
                'data-s2'));
            $('input[name="seriation_3"]').val(tds[5].getAttribute('data-s3') == "N/A" ? "" : tds[5].getAttribute(
                'data-s3'));
            $('input[name="seriation_4"]').val(tds[6].getAttribute('data-s4') == "N/A" ? "" : tds[6].getAttribute(
                'data-s4'));
            $('input[name="seriation_5"]').val(tds[7].getAttribute('data-s5') == "N/A" ? "" : tds[7].getAttribute(
                'data-s5'));
            $('input[name="credits"]').val(tds[8].getAttribute('data-credits'));
            $('input[name="grade"]').val(tds[8].getAttribute('data-grade'));
            $('input[name="departamental"]').checked(tds[8].getAttribute('data-departamental_percentage') == "" ?
                false : true);
            $('input[name="departamental_percentage"]').val(tds[8].getAttribute('data-departamental_percentage'));
        });
        //Message delete
        function swalRemove(id, name) {

            Swal.fire({
                title: 'Eliminar materia',
                text: "Estás seguro que quieres eliminar la" + ' ' + 'Materia ' + name,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#DC0000',
                cancelButtonColor: 'transparent',
                confirmButtonText: 'Eliminar'
            }).then((result) => {
                console.log($('#delete_form_' + id));
                $('#delete_form_' + id).submit(function(eventObj) {
                    console.log(eventObj);
                    $("<input />").attr("type", "hidden")
                        .attr("name", "_method")
                        .attr("value", "DELETE")
                        .appendTo(this);
                    return true;
                });
                $('#delete_form_' + id).submit();

            });
        }
        $(document).ready(function() {

            var percentage = $('#departamental_percentage');

            $('#departamental').on('change', function() {
                if ($(this).is(':checked')) {
                    percentage.show();
                    percentage.prop('required', true);
                } else {
                    percentage.hide();
                    percentage.prop('required', false);
                }
            });

            $('#cuatrimestre').change(function() {
                if ($(this).is(':checked')) {
                    $('#grade').hide();
                    $('#quarter').show();
                    $('#label_semester').hide();
                    $('#label_quatri').show();
                    document.getElementById("grade_s").disabled = true;
                    document.getElementById("quarter").disabled = false;
                } else {
                    $('#quarter').hide();
                    $('#grade').show();
                    $('#label_semester').show();
                    $('#label_quatri').hide();
                    document.getElementById("grade_s").disabled = false;
                    document.getElementById("quarter").disabled = true;
                }
                $('#subjectsTable').find("tr:gt(0)").remove();
                searchSubjects();
            });

            var searchSubjects = function() {
                if ($('#plan :selected').val() != 0) {
                    if ($('#career :selected').val() != 0) {
                        if ($('#career_specialities :selected').val() != 0) {
                            if (($('#grade_s :selected').val() != 0 && $('#grade_s').is(':enabled')) || ($(
                                    '#quarter_s :selected').val() != 0 && $('#quarter_s').is(':enabled'))) {

                                var plan_id = $('#plan :selected').val();
                                var career_id = $('#career :selected').val();
                                var career_specialities = $('#career_specialities :selected').val();
                                var specialities = $('#specialities :selected').val();
                                var semester = $('#cuatrimestre').is(':checked') == false ? 1 : 0;


                                var subjects = @json($data['subjects']->toArray());
                                var filteredSubjects = subjects.filter(e => e.career_plan_id == plan_id)
                                    .filter(e => e.career_id == career_id)
                                    .filter(e => e.career_specialities_id == career_specialities)
                                    .filter(e => e.semestre == semester);

                                if (specialities != 0) {
                                    filteredSubjects = filteredSubjects.filter(e => e.specialities_id == specialities);
                                }

                                if ($('#grade_s :selected').val() != 0 && $('#grade_s').is(':enabled')) {
                                    formation = $('#grade_s :selected').val();
                                } else {
                                    formation = $('#quarter_s :selected').val();
                                }
                                filteredSubjects = filteredSubjects.filter(e => e.formation == formation);
                                $('#subjectsTable').find("tr:gt(0)").remove();
                                for (var i = 0; i < filteredSubjects.length; i++) {
                                    $('#subjectsTable').append('<tr>' +
                                        '<td data-code=' + filteredSubjects[i].code + '>' +
                                        filteredSubjects[i].code + '</td>' +
                                        '<td data-name=' + filteredSubjects[i].name + '>' +
                                        filteredSubjects[i].name + '</td>' +
                                        '<td data-hours=' + filteredSubjects[i].hours + '>' +
                                        filteredSubjects[i].hours + '</td>' +
                                        '<td data-s1=' + filteredSubjects[i].s1 + '>' + filteredSubjects[i]
                                        .s1 + '</td>' +
                                        '<td data-s2=' + filteredSubjects[i].s2 + '>' + filteredSubjects[i]
                                        .s2 + '</td>' +
                                        '<td data-s3=' + filteredSubjects[i].s3 + '>' + filteredSubjects[i]
                                        .s3 + '</td>' +
                                        '<td data-s4=' + filteredSubjects[i].s4 + '>' + filteredSubjects[i]
                                        .s4 + '</td>' +
                                        '<td data-s5=' + filteredSubjects[i].s5 + '>' + filteredSubjects[i]
                                        .s5 + '</td>' +
                                        // '<td>'+ filteredSubjects[i].formation +'</td>'+
                                        '<td data-credits=' + filteredSubjects[i].credits + ' data-grade=' +
                                        filteredSubjects[i].grade + ' data-departamental_percentage=' +
                                        filteredSubjects[i].departamental_percentage + '>' +
                                        filteredSubjects[i].credits + '</td>' +
                                        '<td style="text-align: center;">' +
                                        '<a data-name="' + filteredSubjects[i].name +
                                        '" class="swalRemove" onclick="swalRemove(\'' + filteredSubjects[i]
                                        .id + '\', \'' + filteredSubjects[i].name + '\');">' +
                                        '<i class="fas fa-trash-alt"></i>' +
                                        '</a>' +
                                        '</td>' +
                                        '<form id="delete_form_' + filteredSubjects[i].id +
                                        '" style="display: none;" action="{{ route('subjects.index') }}/' +
                                        filteredSubjects[i].id + '" method="DELETE">' +
                                        '</form>' +
                                        '<td style="text-align: center;">' +
                                        '<a class="editSubject">' +
                                        '<i class="fas fa-pencil-alt"></i>' +
                                        '</a>' +
                                        '</td>' +
                                        '</tr>');
                                }
                            }

                        }
                    }
                }
            };
            searchSubjects();

            $('#plan').change(function() {
                searchSubjects();

            });
            $('#career').change(function() {
                searchSubjects();
            });

            $('#career_specialities').change(function() {
                searchSubjects();
            });

            $('#specialities').change(function() {
                searchSubjects();
            });

            $('#grade_s').change(function() {
                searchSubjects();
            });

            $('#quarter_s').change(function() {
                searchSubjects();
            });

            $('.swalSpecialization').click(function(e) {
                e.preventDefault();
                //Obtenemos id
                var id = $(this).data('id');
                var name = $(this).data('name');

                Swal.fire({
                    title: 'Eliminar materia',
                    text: "Estás seguro que quieres eliminar la" + ' ' + 'Especialización ' + name,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#DC0000',
                    cancelButtonColor: 'transparent',
                    confirmButtonText: 'Eliminar'
                }).then((result) => {});
            });

            //Send form to POST
            $('#save').on('click', function(e) {
                e.preventDefault();
                $('#form').submit();
            });

            //Detect click and change select
            $('input').on('keyup', function() {
                var save = $('#save');
                save.removeClass('disabled');
                save.addClass('btn-green');
                save.removeAttr('disabled');
            });

            $('select').on('change', function() {
                var save = $('#save');
                save.removeClass('disabled');
                save.addClass('btn-green');
                save.removeAttr('disabled');
            });

            $('input').on('change', function() {
                var save = $('#save');
                save.removeClass('disabled');
                save.addClass('btn-green');
                save.removeAttr('disabled');
            });


            //Send form to POST
            $('#save2').on('click', function(e) {
                e.preventDefault();
                $('#form2').submit();
            });

            //Detect click and change select
            $('input').on('keyup', function() {
                var save = $('#save2');
                save.removeClass('disabled');
                save.addClass('btn-green');
                save.removeAttr('disabled');
            });

            $('select').on('change', function() {
                var save = $('#save2');
                save.removeClass('disabled');
                save.addClass('btn-green');
                save.removeAttr('disabled');
            });

            $('input').on('change', function() {
                var save = $('#save2');
                save.removeClass('disabled');
                save.addClass('btn-green');
                save.removeAttr('disabled');
            });

        });
    </script>
@endpush