@extends('layout.layout')
@section('content')
<style>
    .ripple {
  margin: auto;
  margin-top: 10rem;
  background-color: #fff;
  width: 1rem;
  height: 1rem;
  border-radius: 25%;
  animation: ripple 1s linear infinite;
}
@keyframes ripple {
  0% {
    box-shadow: 0 0 0 .7rem #fdbb2d,
                0 0 0 1.5rem #fdbb2d,
                0 0 0 5rem #fdbb2d;
  }
  100% {
    box-shadow: 0 0 0 1.5rem #fdbb2d,
                0 0 0 4rem #fdbb2d,
                0 0 0 8rem rgba(0,0,0, 0);
  }
}
</style>
<div class="container d-none" style="width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;">
<div class="ripple"></div>
    <h2 class="fw-bold" style="font-style: italic;color:palevioletred;">UNDER DEVELOPMENT</h2>
</div>

<div class="container course-container-add" style="margin-top: 5rem;">
<div id="errors_assign_course"></div>
    <form id="asign_to_user">
        @csrf
        <label for="select_user">Alege un user pentru a ii asigna un curs</label>
        <select name="select_user" id="select_user" class="form-control">
            <option value="" selected>Selecteaza user</option>
            @foreach ($users as $user)
                <option value="{{ $user->id }}">{{ $user->name }}</option>
            @endforeach
        </select>

        <label for="select_course" class="mt-3">Alege cursul dorit pentru asignare</label>
        <select name="select_course" id="select_course" class="form-control ">
            <option value="">Selecteaza curs</option>
            @foreach ($courses as $course)
                <option value="{{ $course->id }}">{{ $course->name }}</option>
            @endforeach
        </select>
        <h5 id="label_days"class=" mt-3 mb-1 text-dark fw-bold text-center"></h5>
        <input type="text" name="zile_curs" placeholder="Adauga zile in plus fata de cat are cursul valabil(OPTIONAL)" class="form-control">
        <input type="hidden" name="get_the_select_course_days" value="" id="get_the_select_course_days">
        <button class="add-course">Salveaza</button>
    </form>
</div>

@push('js')
<script>
    $(function () {
        $("#asign_to_user").on('submit', function (e) {
            e.preventDefault();
            $.ajax({
                method: 'POST',
                url: "/assign_course",
                data: new FormData(this),
                processData: false,
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                contentType: false,
                success: function (data) {
                        $('#asign_to_user')[0].reset();
                        $("#errors_assign_course").html(data.mesaj);
                        $("#errors_assign_course").fadeTo(2000, 500).slideUp(500);
                        $("#errors_assign_course").slideUp(500);
                },
                error: function(error) {
                        $("#errors_assign_course").html(error.responseJSON.fail);
                        $("#errors_assign_course").fadeTo(2000, 500).slideUp(500);
                        $("#errors_assign_course").slideUp(500);
                }
            });
        });
    });

    $(document).ready(function () {
        $('#select_course').on('change', function () {
            var course_id = this.value;
            $("#label_days").html('');
            $.ajax({
                url: "/get_days_course",
                type: "POST",
                data: {
                    course_id: course_id,
                    _token: '{{csrf_token()}}'
                },
                dataType: 'json',
                success: function (result) {
                    $.each(result.courses, function (key, value) {
                        $("#label_days").html('Cursul ales are ' + value.days + 'zile');
                        $("#get_the_select_course_days").val(value.days);
                    });
                },
                error: function (error){
                    $("#label_days").html(error.responseJSON.error);
                    $("#get_the_select_course_days").val(' ');
                }
            });
        });
    });
</script>
@endpush
@endsection