@extends('layout.master')
@section('content')

<section class="content pb-5">
    <div class="container-fluid">
        <div class="row pt-4">
            <div class="col-md-12">
                <div class="title-section">
                    <p>Training</p>
                </div>
            </div>
        </div>

        <div class="row pt-sm-4 pt-0">
            <div class="col-md-6">
                <div class="title-section">
                    <p>Register yourself for training</p>
                </div>
                <form method="post" action="/enroll-training" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="first_name">
                                    First Name <span class="text-danger">*</span>
                                </label>
                                <input class="form-control" type="text" name="first_name" value="" placeholder="First Name" > 
                            </div>
                            {!! $errors->first('first_name', '<label class="control-label" for="name" style="color:red;">:message</label>')!!}
                        </div>
                        <div class="col-md-4">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="last_name">
                                    Last Name <span class="text-danger">*</span>
                                </label>
                                <input class="form-control" type="text" name="last_name" value="" placeholder="" > 
                            </div>
                            {!! $errors->first('last_name', '<label class="control-label" for="name" style="color:red;">:message</label>')!!}
                        </div>
                        <div class="col-md-4">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="course_id">
                                    Choose Course <span class="text-danger">*</span>
                                </label>
                                <select class="form-control" name="course_id" id="course_id">
                                    <option value="">select</option>
                                    @foreach($courses as $course)
                                        <option value="{{$course->id}}">
                                            {{$course->name}}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            {!! $errors->first('course_id', '<label class="control-label" for="name" style="color:red;">:message</label>')!!}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="duration_id">Duration</label>
                                <input class="form-control" type="text" id="duration" name="duration_id" value="" readonly > 
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="training_timing_id">Timing</label>
                                <input class="form-control" type="text" id="training_timing" name="training_timing_id" value="" readonly > 
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="batch_strength_id">Batch Strength</label>
                                <input class="form-control" type="text" id="batch_strength" name="batch_strength_id" value="" readonly > 
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <button type="submit" class="btn btn-danger">ENROLL</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-md-6">
                <div class="title-section">
                    <p>Programs Availability</p>
                </div>
                <div class="row mb-3" style="max-height: 300px;overflow-y: scroll;">
                    @foreach($courses as $key => $course)
                        <div class="col-md-6 mb-2">
                            <div class="zone-box program">
                                <div class="row">
                                    <div class="col-md-8 col-8">
                                        <h4>
                                            {{$course->name}}
                                        </h4>
                                        <p>
                                            0-{{$course->duration ? $course->duration->duration : 0}} Months
                                        </p>
                                    </div>
                                    <div class="col-md-4 col-4">
                                        <span class="float-right"><img src="images/graduation-cap.png" alt=""></span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-5 col-5">
                                        <h5>
                                            {{$course->start_date ? date('M d, Y', strtotime($course->start_date)) : 'NA'}}
                                        </h5>
                                        <p> Start Date</p>
                                    </div>
                                    <div class="col-md-7 col-7">
                                        <h5>EMI Options</h5>
                                        <p> Starts @ Rs.6,907/mth</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="row align-items-end">
                    <div class="col-md-6"></div>
                    <div class="col-md-6 align-items-end">
                        <button type="button" class="btn btn-danger float-right" data-toggle="modal" data-target="#addeditCourseModal">
                            ADD NEW COURSE
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row pt-4 pt-sm-5">
            <div class="col-md-12">
                <div class="title-section">
                    <p>Training Employee</p>
                </div>
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th scope="col">Employee Name</th>
                                <th scope="col">Course</th>
                                <th scope="col">Duration</th>
                                <th scope="col">Training Timing</th>
                                <th scope="col">Batch Strength</th>
                                <th scope="col">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($trainings as $key => $training)
                                <tr>
                                    <td>
                                        {{$training->first_name}} {{$training->last_name}}
                                    </td>
                                    <td>
                                        {{$training->course ? $training->course->name : ''}}
                                    </td>
                                    <td>
                                        {{$training->course->duration ? $training->course->duration->duration : ''}}
                                    </td>
                                    <td>
                                        {{$training->course->trainingTiming ? $training->course->trainingTiming->timing : ''}}
                                    </td>
                                    <td>
                                        {{$training->course->batchStrength ? $training->course->batchStrength->strength : ''}}
                                    </td>
                                    <td>
                                        {{$training->status}}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                {{--  <div class="pagination_rounded">
                    <ul>
                        <li>
                            <a href="#" class="prev"> <i class="fa fa-chevron-left" aria-hidden="true"></i> </a>
                        </li>
                        <li><a href="#" class="active">1</a> </li>
                        <li class="hidden-xs"><a href="#">2</a> </li>
                        <li class="hidden-xs"><a href="#">3</a> </li>
                        <li class="hidden-xs"><a href="#">4</a> </li>
                        <li>
                            <a href="#" class="next"> <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
                        </li>
                    </ul>
                </div>  --}}
            </div>
        </div>
    </div>
    <!--First  Modal -->
    <div class="modal fade" id="addeditCourseModal" tabindex="-1" aria-labelledby="addeditCourseModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <form method="post" action="/submit-course" redirect="/trainings" role="post-data" enctype="multipart/form-data">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title mb-0" id="addeditCourseModalLabel">
                        <div class="title-section">
                            <p>Add/Edit Course</p>
                        </div>
                        </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">
                                <img src="{{asset('assets/images/close.png')}}" height="30px" alt="">
                            </span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group custom-form-group">
                                    <label class="form-label" for="name">
                                        Name <span class="text-danger">*</span>
                                    </label>
                                    <input class="form-control" type="text" name="name" placeholder="Enter course name" value="">
                                </div>
                                @error('name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <div class="form-group custom-form-group">
                                    <label class="form-label" for="duration_id">
                                        Duration <span class="text-danger">*</span>
                                    </label>
                                    <select class="form-control" name="duration_id" id="duration_id">
                                        <option value="">select</option>
                                        @foreach($durations as $key => $duration)
                                            <option value="{{$duration->id}}">
                                                {{$duration->duration}}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group custom-form-group">
                                    <label class="form-label" for="training_timing_id">
                                        Training Timing <span class="text-danger">*</span>
                                    </label>
                                    <select class="form-control" name="training_timing_id" id="training_timing_id">
                                        <option value="">select</option>
                                        @foreach($trainingTimings as $key => $trainingTiming)
                                            <option value="{{$trainingTiming->id}}">
                                                {{$trainingTiming->timing}}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                @error('training_timing_id')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <div class="form-group custom-form-group">
                                    <label class="form-label" for="batch_strength_id">
                                        Batch Strength <span class="text-danger">*</span>
                                    </label>
                                    <select class="form-control" name="batch_strength_id" id="batch_strength_id">
                                        <option value="">select</option>
                                        @foreach($batchStrength as $key => $bs)
                                            <option value="{{$bs->id}}">
                                                {{$bs->strength}}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                @error('batch_strength_id')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group custom-form-group">
                                    <label class="form-label" for="start_date">
                                        Start Date <span class="text-danger">*</span>
                                    </label>
                                    <input class="form-control" type="date" name="start_date" value="">
                                </div>
                                @error('start_date')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="float-right import-btns">
                            <button type="button" data-target="[role=post-data]" id="submit-course" class="btn btn-danger save-btn mr-3">Submit</button>
                            <a type="button" href="/training" class="btn btn-outline-dark next-btn">Cancel</a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- -------  -->
</section>

<script src="{{ asset('js/custom-script.js') }}"></script>
<script src="{{ asset('js/sweetalert.js') }}"></script>
<script type="text/javascript">
    $('#submit-course').on('click', function() {
        console.log('hi');
        $('.alert').remove();
        $(".has-error").removeClass('has-error');
        $('.help-block').remove();
        $base_url = 'http://localhost:8002';
        var $this = $(this);
        var $target = $this.data('target');
        var $data = new FormData($($target)[0]);
        var $url = '/submit-course';
        var $method = 'POST';
        var $redirect = '/training';

        $.ajax({
            url: $base_url + $url
            , data: $data
            , cache: false
            , type: $method
            , dataType: 'JSON'
            , contentType: false
            , processData: false
            , beforeSend: function() {
                $('#loading-image').show();
            }
            , success: function($response) {
                $('#loading-image').hide();
                $($target).trigger('reset');
                Swal.fire(
                    'Success', $response.message, 'success'
                )
                setTimeout(function() {
                    if ($redirect) {
                        window.location.href = $redirect;
                    } else {
                        location.reload();
                    }
                }, 2200);
            }
            , error: function($response) {
                $('#loading-image').hide();
                if ($response.status === 422) {
                    if (Object.size($response.responseJSON) > 0 && Object.size($response
                            .responseJSON.errors) > 0) {
                        show_validation_error($response.responseJSON.errors);
                    }
                } else {
                    Swal.fire(
                        'Error', $response.responseJSON.message, 'warning'
                    )
                    setTimeout(function() {}, 1200)
                }
            }
        });
    });
    $('#course_id').on('change', function() {
        console.log('hi');
        var courseId = $('#course_id').val();
        
        $.ajax({
            url: "/get-course-data", 
            type: "POST",
            data: {
                _token: "{{csrf_token()}}",
                course_id:courseId 
            },
            success: function($response) {
                console.log($response.data);
                if ($response.code === 200) {
                    $('#duration').val($response.data.duration.duration);
                    $('#training_timing').val($response.data.training_timing.timing);
                    $('#batch_strength').val($response.data.batch_strength.strength);
                }
                else{
                    $('#duration').val();
                    $('#training_timing').val();
                    $('#batch_strength').val();
                }
            }, 
            error: function($response) {
                if ($response.code === 202) {
                    if (Object.size($response.responseJSON) > 0 && Object.size($response
                            .responseJSON.errors) > 0) {
                        show_validation_error($response.responseJSON.errors);
                    }
                } else {
                    Swal.fire(
                        'Error', $response.responseJSON.message, 'warning'
                    )
                    setTimeout(function() {}, 1200)
                }
            }
        });
    });
    $('#enroll-training').on('click', function() {
        $('.alert').remove();
        $(".has-error").removeClass('has-error');
        $('.help-block').remove();
        $base_url = 'http://localhost:8002';
        var $this = $(this);
        var $target = $this.data('target');
        var $data = new FormData($($target)[0]);
        var $url = '/enroll-training';
        var $method = 'POST';
        var $redirect = '/training';

        $.ajax({
            url: $base_url + $url
            , data: $data
            , cache: false
            , type: $method
            , dataType: 'JSON'
            , contentType: false
            , processData: false
            , beforeSend: function() {
                $('#loading-image').show();
            }
            , success: function($response) {
                $('#loading-image').hide();
                $($target).trigger('reset');
                Swal.fire(
                    'Success', $response.message, 'success'
                )
                setTimeout(function() {
                    if ($redirect) {
                        window.location.href = $redirect;
                    } else {
                        location.reload();
                    }
                }, 2200);
            }
            , error: function($response) {
                $('#loading-image').hide();
                if ($response.status === 422) {
                    if (Object.size($response.responseJSON) > 0 && Object.size($response
                            .responseJSON.errors) > 0) {
                        show_validation_error($response.responseJSON.errors);
                    }
                } else {
                    Swal.fire(
                        'Error', $response.responseJSON.message, 'warning'
                    )
                    setTimeout(function() {}, 1200)
                }
            }
        });
    });
</script>
@endsection