@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
$sroom = "";
if(app('request')->input('room')){
    $sroom = app('request')->input('room');
}
$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-0 mt-0 font-weight-medium">Add child to waiting list</h4>
    </div>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <form action="{{ route('occupancy.waiting-list.save.child') }}" method="post" class="add-child-form" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="school" value="{{ $schoolId }}">
            <div class="card">
                <div class="card-body">
                    <div class="add-to-room">
                        <h5 class="font-size-18 pb-3">Child details</h5>
                        <div class="row mb-2">
                            <div class="col-lg-6 order-lg-1 order-2">
                                <div class="form-group row">
                                    <label class="col-xl-4 col-form-label">Name of child</label>
                                    <div class="col-xl-7">
                                        <input type="text" class="form-control" name="name" value="{{ old('name') }}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-xl-4 col-form-label">Date of birth</label>
                                    <div class="col-xl-7">
                                        <span class="flatpickr-arrow"></span>
                                        <input type="text" class="form-control flatpickr flatpickr-input" name="dob" value="{{ old('dob') }}" placeholder="">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-xl-4 col-form-label">Gender</label>
                                    <div class="col-xl-7">
                                        <select class="form-control wide" data-plugin="customselect" name="gender" data-placeholder="Select gender">
                                            <option value="">Select gender</option>
                                            <option value="0" {{ old('gender') == 0 ? 'selected' : '' }}>Male</option>
                                            <option value="1" {{ old('gender') == 1 ? 'selected' : '' }}>Female</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 order-lg-2 order-1">
                                <div class="form-group row align-items-center justify-content-center upload-image">
                                    <div class="col-xl-4 col-auto">
                                        <div class="d-inline-block school-logo-box mr-md-4 mr-2 mb-3 mb-md-2 p-0">
                                            <img src="{{ Helper::assets('assets/images/smily.png') }}" data-src="{{ Helper::assets('assets/images/smily.png') }}" class="img-fluid">
                                        </div>
                                    </div>
                                    <div class="col-xl-8 col-auto">
                                        <button type="button" class="btn btn-pink mr-2 mb-2 btn-upload">Upload new image</button>
                                        <input type="file" class=" input-validate" name="profileImage" id="profileImage">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-xl-4 col-form-label">Expected start date</label>
                                    <div class="col-xl-7">
                                        <span class="flatpickr-arrow"></span>
                                        <input type="text" class="form-control flatpickr flatpickr-input-1" name="expectedStartDate" value="{{ old('expectedStartDate') }}" placeholder="">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row border-bottom my-5 mx-n5"></div>
                        <h5 class="font-size-18 pb-3">Parent/guardian details</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">Name</label>
                                                    <div class="col-xl-8 col-lg-10">
                                                        <div class="row">
                                                            <div class="col-md-6 mb-3 mb-md-0">
                                                                <input type="text" class="form-control first-name" name="parents[0][firstName]" placeholder="First name" value="">
                                                            </div>
                                                            <div class="col-md-6">
                                                                <input type="text" class="form-control last-name" name="parents[0][lastName]" placeholder="Last name" value="">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xl-6">
                                                <div class="form-group row">
                                                    <label class="col-xl-4 col-md-2 pl-xl-4 col-auto col-form-label">Email</label>
                                                    <div class="col-xl-8 col-lg-10">
                                                        <input type="text" class="form-control parent-email" name="parents[0][email]" value="">
                                                    </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">Street address</label>
                                                    <div class="col-lg-10">
                                                        <input type="text" class="form-control parent-address" name="parents[0][address]" value="">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="form-group row">
                                                    <label class="col-lg-4 col-form-label">Relationship to child</label>
                                                    <div class="col-lg-8">
                                                        <select class="form-control parent-relation" data-plugin="customselect" name="parents[0][relation]">
                                                            <option value="">Select relationship</option>
                                                            @if(isset($relations) && !empty($relations))
                                                            @foreach ($relations as $relation)
                                                                <option value="{{ $relation }}" {{ isset($parent->relation) && $parent->relation == $relation ? 'selected' : '' }}>{{$relation}}</option>
                                                            @endforeach
                                                            @endif
                                                            <option value="-1">Other, please specify</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6 other-ralation" style="display:none">
                                                <div class="form-group row">
                                                    <label class="col-lg-4 col-form-label">Other relationship to child</label>
                                                    <div class="col-lg-8">
                                                        <input type="text" class="form-control parent-other-relation" name="parents[0][other_relation]" value="">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group row">
                                                    <label class="col-lg-4 pl-lg-4 col-auto col-form-label">Phone number</label>
                                                    <div class="col-lg-8">
                                                        <input type="number" min="0" class="form-control parent-phone" name="parents[0][phone]" value="">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-auto order-1 order-md-2 ml-auto input-group-append align-items-center" style="visibility:hidden;">
                                        <span class="input-group-btn mb-md-5">
                                            <a href="javascript:void(0);" class="text-danger r-btnRemove mt-1"><i class="uil uil-multiply"></i></a>
                                        </span>
                                    </div>
                                </div>
                                <div class="row border-bottom my-5 mx-n5"></div>
                            </div>
                            <div class="pt-5 btn-div">
                                <button type="button" class="btn btn-success btn-min-width r-btnAdd">Add another parent or guardian</button>
                            </div>
                        </div>
                        @if(isset($initial->timings) && !empty($initial->timings))
                        <div class="row border-bottom my-5 mx-n5"></div>
                        <h5 class="font-size-16 pb-3">Preferred attendance</h5>
                        <div class="row mb-4">
                            <label class="col-xl-2 col-md-3 col-form-label font-weight-regular">Child attends on</label>
                            <div class="col-xl-10 col-md-9">
                                <div class="row">
                                    @foreach($initial->timings as $day)
                                    @php $selectedDay = config('constant.collection_days')[$day->day]; @endphp
                                    <div class="col-sm-auto">
                                        <div class="checkbox big checkbox-pink mb-3">
                                            <input type="checkbox" class="input-validate open-day" name="days[]" id="day{{$day->day}}" value="{{$day->day}}" data-error="days-error">
                                            <label for="day{{$day->day}}" class="pt-2">
                                                {{$selectedDay}}
                                            </label>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                                <div class="days-error"></div>
                            </div>
                        </div>
                        <div class="row section-hidden" style="display: none">
                            @foreach($initial->timings as $day)
                            @php $selectedDay = config('constant.collection_days')[$day->day]; @endphp
                            <div class="col-lg-6 tab-panel" id="tab{{$day->day}}">
                                <div class="form-group row">
                                    <label class="col-xl-4 col-md-3 col-form-label font-weight-regular">{{$selectedDay}}</label>
                                    <div class="col-xl-7 col-md-9">
                                        <div class="row date-group">
                                            <div class="col-md-6 mb-3 mb-md-0">
                                                <span class="flatpickr-arrow"></span>
                                                <input type="text" class="form-control not-validate flatpickr flatpickr-time fromTime" name="timings[{{$day->day}}][periods][0][fromTime]" value="" placeholder="" data-pattern="timings[{{$day->day}}][periods][++][fromTime]">
                                            </div>
                                            <div class="col-md-6">
                                                <span class="flatpickr-arrow"></span>
                                                <input type="text" class="form-control not-validate flatpickr flatpickr-time toTime" name="timings[{{$day->day}}][periods][0][toTime]" value="" placeholder="" data-pattern="timings[{{$day->day}}][periods][++][toTime]">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        @endif
                        <div class="row border-bottom my-5 mx-n5"></div>
                        @if(isset($initial->wlQuestions) && !empty($initial->wlQuestions))
                        @foreach($initial->wlQuestions as $key => $question)
                        <h5 class="font-size-16 pb-2">{{$question->question}}</h5>
                        <div class="row form-group">
                            <div class="col-xl-11">
                                <input type="hidden" name="wlQuestions[{{$key}}][_id]" value="{{$question->_id}}">
                                <textarea rows="3" class="form-control question" name="wlQuestions[{{$key}}][answer]" placeholder="Type other information here…"></textarea>
                            </div>
                        </div>
                        @endforeach
                        @endif
                        <h5 class="font-size-16 pb-2">Additional Information</h5>
                        <div class="row form-group">
                            <div class="col-xl-11">
                                <textarea rows="3" class="form-control" name="additionalNote" placeholder="Type other information here…"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="my-5">
                <button type="submit" class="btn btn-success btn-min-width mr-2">Add child</button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('script-bottom')
<script defer src="{{ Helper::assets('assets/libs/moment/moment.min.js') }}" type="text/javascript"></script>
<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/add-child-waiting.js') }}" type="text/javascript"></script>
<script>
    
</script>
@endsection