@extends('layout.layout')

@section('content')
<h1 class="text-warning text-center mt-3">Creeaza un test</h1>
<div class="container container-tests">
<div id="errors-test-add" style="width: 100%;"></div>
<form id="submit_form" style="margin-bottom: 5rem">
    @csrf
    <div class="form-group">
        <label for="exampleInputEmail1">Nume test</label>
        <input type="text" class="form-control" id="test" name="name" placeholder="Introduceti nume test" value="">
        <input type="text" class="form-control w-50 mt-2" id="test" name="min_questions" placeholder="Introduceti minimul de intrebari corecte" >
        <input type="text" class="form-control w-50 mt-2" id="test" name="questions" placeholder="Introduceti minim de intrebari afisate per test" >
    </div>
    <div class="form-check">
        <input type="checkbox" name="activ" checked class="form-check-input mb-1" id="valid" value="1">
        <label class="form-check-label mt-1" for="valid">Activ</label>
    </div>
    <button type="submit" class="add-course mt-2">Salveaza</button>
</form>

<div class="container" id="table_test_id">
    @if(count($tests) <= 0)
    <h1 class="text-danger">Nu este niciun test creat</h1>
    @else
    @if($errors->has('success'))
        @foreach ($errors->all() as $error)
           <div style="display:flex;justify-content:center;">
                <div class="alert alert-success text-center fw-bold text-dark w-50" role="alert">
                    {{ $error }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" style="float: right;font-size:16px;"></button>
                </div>
           </div>
        @endforeach
    @endif
    @if($errors->has('error'))
        @foreach ($errors->all() as $error)
           <div style="display:flex;justify-content:center;">
                <div class="alert alert-danger text-center fw-bold text-dark w-50" role="alert">
                    {{ $error }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" style="float: right;font-size:16px;"></button>
                </div>
           </div>
        @endforeach
    @endif
    <table class="table table-dark w-100 table-tests">
        <thead class="thead-tests">
        <tr class="text-center text-white tr-tests">
            <th class="th-tests" scope="col">Titlu</th>
            <th class="th-tests" scope="col">Puncte minime</th>
            <th class="th-tests" scope="col">Minim intrebari per/test minime</th>
            <th class="th-tests" scope="col">Status</th>
            <th class="th-tests" scope="col">Acțiuni</th>
        </tr>
        </thead>
        <tbody class="tbody-tests">
        @foreach ($tests as $test)
            <tr class="text-center tr-tests">
                <td class="td-tests">{{ $test->name }}</td>
                <td class="td-tests">{{ $test->min_questions }}</td>
                <td class="td-tests">{{ $test->questions }}</td>
                    @if($test->activ === 1)
                        <th scope="row" class="text-success th-tests">Activ</th>
                    @else
                        <th scope="row" class="text-danger th-tests">Inactiv</th>
                    @endif
                <td class="th-tests">
                    @if($test->activ === 0)
                    <button type="button" class="btn btn-success" data-id="{{$test->id}}" data-activare='1'
                        onclick="button_activare(this)">Activ</button>
                    @else
                    <button type="button" class="btn btn-warning text-white" data-id="{{$test->id}}" data-dezactivare='0'
                        onclick="button_dezactivare(this)">Inactiv</button>
                    @endif
                    <button type="button" class="btn btn-danger" data-bs-toggle="modal"
                    data-bs-target="#deleteModal{{ $test->id }}">Șterge</button>
                    <button type="button" class="btn btn-success" data-bs-toggle="modal"
                    data-bs-target="#editModal{{ $test->id }}">Editeaza</button>
                </td>
            </tr>
            <div class="modal fade" id="deleteModal{{ $test->id }}" tabindex="-1" role="dialog"
         aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Doriti sa stergeti
                        testul {{ $test->name }}</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                
                <div class="modal-body">
                    @if(count($test->questions()->get()) > 0)
                    <p class="text-danger fw-bold">Acest test contine intrebari si raspunsuri,stergea testului va sterge toate intrebarile si raspunsurile ce apartin acestui test</p>
                    @endif
                    <input type="hidden" value="{{ $test->id }}" id="id" name="id">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="sterge_btn_test">Close</button>
                    <button class="btn btn-danger" data-id="{{$test->id}}"
                            onclick="delete_test(this)">Sterge</button>
                </div>
            </div>
        </div>
    </div>
<div class="modal fade" id="editModal{{ $test->id }}" tabindex="-1" role="dialog"
         aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Editeaza test-tul cu  numele {{$test->name}}</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                
                    <div class="modal-body">
                        <input type="hidden" value="{{ $test->id }}" id="id" name="id">
                        <label for="">Introduceti nume nou(optional)</label>
                        <input type="text" class="form-control" id="test_name-{{ $test->id }}" name="name" placeholder="Nume nou" value="{{$test->name}}">
                        <label for="">Schimba numarul de puncte(optional)</label>
                        <input type="text" class="form-control" id="min_questions-{{ $test->id }}" name="min_questions" placeholder="Schimba numarul de puncte" value="{{$test->min_questions}}">
                        <label for="">Schimba numarul de intrebari afisate pe test(optional)</label>
                        <input type="text" class="form-control" id="questions-{{ $test->id }}" name="questions" placeholder="Schimba numarul de intrebari afisate" value="{{$test->questions}}">

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="edit_btn_test">inchide</button>
                        <button  class="btn btn-success" data-id="{{$test->id}}"
                            onclick="edit_test(this)">Editeaza</button>
                    </div>
            </div>
        </div>
    </div>
        @endforeach
        </tbody>
    </table>
    @endif
    {{ $tests->links() }}
</div>
</div>
@push('js')
    <script>

function delete_test(test) {
            let id = $(test).attr('data-id');
        $.ajax({
            url: '/test/delete',
            method: 'POST',
            data: {
                id,
                "_token": "{{ csrf_token() }}"
            }
            }).done(function (response) {
              $('#errors-test-add').html(response.success);
              $("#sterge_btn_test").trigger("click");
              $('body').removeClass('modal-open');
              $('.modal-backdrop').remove();
              $("#table_test_id").load(window.location + " #table_test_id");
            });
    }
        function edit_test(test) {
            let id = $(test).attr('data-id');
            let name = $("#test_name-" + id).val();
            let min_questions = $("#min_questions-" +id).val();
            let questions = $("#questions-" + id).val();
            $.ajax({
                url: '/editeaza-test',
                method: 'POST',
                data: {
                    id,
                    name,
                    min_questions,
                    questions,
                    "_token": "{{ csrf_token() }}"
                }
                }).done(function (response) {
                $('#errors-test-add').html(response.success);
                $("#edit_btn_test").trigger("click");
                $('body').removeClass('modal-open');
                $('.modal-backdrop').remove();
                $("#table_test_id").load(window.location + " #table_test_id");
                });
        }

        $(function () {
            $("#submit_form").on('submit', function (e) {
                e.preventDefault();
                $.ajax({
                    url: '/adauga-test',
                    method: 'POST',
                    data: new FormData(this),
                    processData: false,
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    contentType: false,
                    success: function (data) {
                                $('#submit_form')[0].reset();
                            $("#errors-test-add").html(data.mesaj);
                            $("#table_test_id").load(window.location + " #table_test_id");
                            // $('#table_test_id').ajax().reload();
                            $("#errors-test-add").fadeTo(6000, 500).slideUp(500);
                            $("#errors-test-add").slideUp(500);
                    },
                    error: function(error) {
                            $("#errors-test-add").html(error.responseJSON.fail);
                            $("#errors-test-add").fadeTo(4000, 2000).slideUp(2000);
                            $("#errors-test-add").slideUp(2000);
                    }

                });
            });
        });
        

        $(document).ready(function () {
            $('input[type="checkbox"]').click(function () {
                if ($(this).prop("checked") == true) {
                    this.value = (Number(1));
                } else if ($(this).prop("checked") == false) {
                    this.value = (Number(0));
                }
            });
        });

        function button_activare(test) {

            let button_activare = $(test).attr('data-activare');
            let id = $(test).attr('data-id');

            $.ajax({
                url: '/test/activare',
                method: 'POST',
                data: {
                    button_activare,
                    id,

                    "_token": "{{ csrf_token() }}"
                }
            }).done(function (response) {
                $("#errors").html(response.mesaj);
                $("#errors").fadeTo(2000, 500).slideUp(500);
                $("#errors").slideUp(500);
                $("#table_test_id").load(window.location + " #table_test_id");
            });

        }

        function button_dezactivare(test) {

            let button_dezactivare = $(test).attr('data-dezactivare');
            let id = $(test).attr('data-id');

            $.ajax({

                url: '/test/dezactivare',
                method: 'POST',
                data: {
                    button_dezactivare,
                    id,

                    "_token": "{{ csrf_token() }}"
                }
            }).done(function (response) {
                $("#errors").html(response.mesaj);
                $("#errors").fadeTo(2000, 500).slideUp(500);
                $("#errors").slideUp(500);
                    $("#table_test_id").load(window.location + " #table_test_id");
            });
        }
    </script>
@endpush
@endsection