@extends('layouts.vertical')

@section('css')
<link href="{{ Helper::assets('assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/flatpickr/flatpickr.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@php
$steacher = "";
if(app('request')->input('teacher')){
    $steacher = app('request')->input('teacher');
}
$relations = config('constant.relation');
@endphp

@section('breadcrumb')
<div class="row page-title align-items-center">
    <div class="col-sm-6 col-xl-6">
        <h4 class="mb-1 mt-0 font-weight-medium">Training or Meeting Log</h4>
    </div>
</div>
@endsection


@section('content')
<div class="row">
    <div class="col-md-12">
        <form action="{{ route('training.store') }}" method="post" class="add-training-form" enctype="multipart/form-data" multiple>
            @csrf
            <input type="hidden" name="backurl" value="{{ $steacher ? 'teacher' : 'training' }}">
            <div class="card">
                <div class="card-body">
                    <div class="add-to-room">
                        <h5 class="font-size-18 pb-3">General details</h5>
                        <div class="row mb-1">
                            <div class="col-lg-8 order-lg-1 order-2">
                                <div class="form-group row">
                                    <label class="col-xl-3 col-form-label">Date</label>
                                    <div class="col-xl-8">
                                        <span class="flatpickr-arrow"></span>
                                        <input type="text" class="form-control flatpickr flatpickr-input" id="trainingDate" name="trainingDate" value="{{ old('trainingDate') }}" placeholder="MM/DD/YYYY">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-xl-3 col-form-label">Title</label>
                                    <div class="col-xl-8">
                                        <input type="text" class="form-control" name="title" value="{{ old('title') }}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-xl-3 col-form-label">Comments</label>
                                    <div class="col-xl-8">
                                        <textarea class="form-control " id="comment" name="comment" rows="3"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 order-lg-2 order-1">
                                <div class="form-group row align-items-center justify-content-center ">
                                    <label class="col-lg-12 col-form-label font-weight-bold">Associated Documentation</label>
                                    <div class="col-lg-10 pl-lg-1">
                                        <div class="upload-multiple-file-training-log">
                                            <div class="upload-item-training-log">
                                                <div class="upload-file-training-log">
                                                    <i class="icon-cross-training-log"></i>
                                                    <i class="icon-plus-training-log"></i>
                                                    <i class="icon-pdf-training-log"></i>
                                                    <img src="" class="icon-image-training-log" />
                                                    <input type="file" name="trainingLogItems[]" class="file" data-error="uploadfile-error">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="uploadfile-error"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row border-bottom my-5 mx-n5"></div>
                        <h5 class="font-size-18 pb-3">Associated Staff</h5>
                                <div class="childs row">
                                        @if(isset($teachers) && !empty($teachers))
                                        @foreach ($teachers as $teacher)
                                        <div class="col text-center child-item mb-sm-3 mb-2" style="">
                                            <label>
                                                <input type="checkbox" class="checkbox-child" data-error="child-error" name="userTeacher[]" value="{{$teacher->_id}}">
                                                <div class="child-image position-relative ">
                                                    <i class="uil uil-check icon-check-training"></i>
                                                    <img src="{{ isset($teacher->profileImage) ? $teacher->profileImage : '' }}" class="img-child medium" alt="Child">
                                                    <h5 class="mt-2 mb-0 font-size-18">{{$teacher->firstName}} {{$teacher->lastName}}</h5>
                                                </div>
                                            </label>
                                        </div>
                                        @endforeach
                                        @endif

                                    </div>

                        <div class="row border-bottom my-5 mx-n5"></div>
                        <h5 class="font-size-18 pb-3">Training or Meeting Duration</h5>
                        <div class="section-repeater" data-startingIndex="1" data-first-item-remove="false">
                            <div class="r-group">
                                <div class="row">
                                    <div class="col-md order-2 order-md-1">
                                        <div class="row">
                                            <div class="col-xl-6">
                                                <div class="form-group row">
                                                    <label class="col-xl-4 col-md-2 col-auto col-form-label">Duration Mode</label>
                                                    <div class="col-xl-8 col-lg-10">
                                                        <div class="row">
                                                            <div class="col-md-12 mb-3 mb-md-0">
                                                                <select class="form-control wide add-Mode" data-plugin="customselect" id="durationMode" name="durationMode" data-placeholder="Select Duration Mode">
                                                                    <option value="0" {{ old('name') == "0" ? 'selected' : '' }}>Fixed</option>
                                                                    <option value="1" {{ old('name') == "1" ? 'selected' : '' }}>On-going</option>
                                                                </select>
                                                            </div>

                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-xl-6">
                                                <div class="form-group row">
                                                    <label class="col-xl-4 col-md-2 col-auto col-form-label">Duration</label>
                                                    <div class="col-xl-8 col-lg-10">
                                                        <div class="row">
                                                            <div class="col-md-12 mb-3 mb-md-0">
                                                                <input type="text" class="form-control" id="duration" name="duration" placeholder="" value="">
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xl-6">
                                                <div class="form-group row">
                                                    <div class="col-xl-12 col-lg-10">
                                                        <select class="form-control wide" data-plugin="customselect" id="durationType" name="durationType" data-placeholder="Select Duration Type">
                                                            <option value="0" {{ old('name') == "0" ? 'selected' : '' }}>Minutes</option>
                                                            <option value="1" {{ old('name') == "1" ? 'selected' : '' }}>Hours</option>
                                                            <option value="2" {{ old('name') == "2" ? 'selected' : '' }}>Days</option>
                                                            <option value="3" {{ old('name') == "3" ? 'selected' : '' }}>Months</option>
                                                            <option value="4" {{ old('name') == "4" ? 'selected' : '' }}>Years</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group row">
                                                    <label class="col-lg-2 col-auto col-form-label">Expiry</label>
                                                    <div class="col-lg-10">
                                                        <span class="flatpickr-arrow"></span>
                                        <input type="text" class="form-control flatpickr flatpickr-input" id="trainingExpiryDate" name="trainingExpiryDate" value="{{ old('trainingExpiryDate') }}" placeholder="MM/DD/YYYY">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="my-5">
                <button type="submit" class="btn btn-success btn-min-width mr-2">Add Log</button>
            </div>
        </form>
    </div>
</div>
@endsection


@section('script-bottom')
<script defer src="{{ Helper::assets('assets/libs/validation/validate.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/select2/select2.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/flatpickr/flatpickr.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/js/pages/training-add.js') }}" type="text/javascript"></script>
<script>

</script>
@endsection