@extends('layouts.vertical')

@php 
$is_update = false;
if(isset($room) && !empty($room)){
    $is_update = true;
}
@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">{{ $is_update ? 'Edit' : 'Add' }} room</h4>
    </div>
</div>
@endsection

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

@section('content')
<div class="row">
    <div class="col-md-12">
        <form action="{{ $is_update ? route('room.update') : route('room.store') }}" method="post" class="add-room-form">
            @csrf
            @if($is_update)
            <input type="hidden" name="id" value="{{ $room->_id }}">
            @endif
            <div class="card">
                <div class="card-body">
                    <h5 class="font-size-18 pb-3">Basic info</h5>
                    <div class="row mb-2">
                        <div class="col-xl-8">
                            <div class="form-group row">
                                <label class="col-xl-3 col-form-label">Name of room</label>
                                <div class="col-xl-6">
                                    <input type="text" class="form-control @if($errors->has('name')) is-invalid @endif" name="name" value="{{ $is_update ? $room->name : old('name') }}">
                                    @if($errors->has('name'))
                                    <label id="name-error" class="invalid-feedback" for="name">{{ $errors->first('name') }}</label>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-8">
                            <div class="form-group row">
                                <label class="col-xl-3 col-form-label">Short description</label>
                                <div class="col-xl-8">
                                    <textarea rows="3" class="form-control @if($errors->has('description')) is-invalid @endif" name="description" placeholder="">{{ $is_update ? $room->description : old('description') }}</textarea>
                                    @if($errors->has('description'))
                                    <label id="description-error" class="invalid-feedback" for="description">{{ $errors->first('description') }}</label>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-8">
                            <div class="form-group row">
                                <label class="col-xl-3 col-form-label">Add capacity</label>
                                <div class="col-xl-6">
                                    <input type="text" class="form-control @if($errors->has('capacity')) is-invalid @endif" name="capacity" value="{{ $is_update && isset($room->capacity) ? $room->capacity : old('capacity') }}" placeholder="children" data-per-price="true">
                                    @if($errors->has('capacity'))
                                    <label id="capacity-error" class="invalid-feedback" for="capacity">{{ $errors->first('capacity') }}</label>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row border-bottom my-5 mx-n5"></div>
                    <h5 class="font-size-18">Room ratio</h5>
                    <p class="mb-0">Linking specific times to ratios is optional and is only relevant if you have different ratios at different times of the day.</p>
                    <p class=" pb-3">If times do not apply, select “Ratio (Without time period)”</p>
                    <div class="">
                        <div class="custom-control-inline">
                            <div class="custom-control custom-radio mb-2 mr-3">
                                <input type="radio" id="customRadio1" name="ratioByTimeEnabled" class="custom-control-input add-type" data-error="radio-error" value="1" {{$is_update && isset($room->ratioByTimeEnabled) && $room->ratioByTimeEnabled == true ? 'checked' : ''}}>
                                <label class="custom-control-label" for="customRadio1">Ratio by time</label>
                            </div>
                            <div class="custom-control custom-radio mb-2 mr-3">
                                <input type="radio" id="customRadio2" name="ratioByTimeEnabled" class="custom-control-input add-type" data-error="radio-error" value="0" {{ ($is_update && isset($room->ratioByTimeEnabled) && $room->ratioByTimeEnabled === false) || (!$is_update) ? 'checked' : ''}}>
                                <label class="custom-control-label" for="customRadio2">Ratio (Without time period)</label>
                            </div>
                        </div>
                        <div class="radio-error"></div>
                    </div>
                    <div class="mt-3 mb-2 ratio-with-time" style="display: {{ $is_update && isset($room->ratioByTimeEnabled) && $room->ratioByTimeEnabled == true ? 'block' : 'none'}}">
                        <div class="section-repeater" data-startingIndex="1">
                            @if($is_update && isset($room->ratioByTimeEnabled) && $room->ratioByTimeEnabled == true && isset($room->ratioByTime) && !empty($room->ratioByTime))
                            @foreach($room->ratioByTime as $key => $ratio)
                            @php
                                $fromTime =  $toTime = "";
                                if(isset($ratio->fromTime)){
                                    $fromTime = \Carbon\Carbon::createMidnightDate(date('Y-m-d'))->addMinutes($ratio->fromTime)->format('h:i A');
                                }
                                if(isset($ratio->toTime)){
                                    $toTime = \Carbon\Carbon::createMidnightDate(date('Y-m-d'))->addMinutes($ratio->toTime)->format('h:i A');
                                }
                            @endphp
                            <div class="r-group row">
                                <div class="col-lg-1 col-auto ml-auto order-lg-3 order-1 input-group-append align-items-start justify-content-end" style="visibility:hidden;">
                                    <span class="input-group-btn mt-lg-3">
                                        <a href="javascript:void(0);" class="text-danger r-btnRemove mt-1"><i class="uil uil-multiply"></i></a>
                                    </span>
                                </div>
                                <div class="col-lg order-lg-1 order-2">
                                    <div class="form-group row">
                                        <label class="col-lg-3 col-form-label font-weight-regular">Select time</label>
                                        <div class="col-lg-9">
                                            <div class="row">
                                                <div class="col">
                                                    <span class="flatpickr-arrow"></span>
                                                    <input type="text" class="form-control flatpickr flatpickr-time fromTime" name="ratioByTime[{{$key}}][fromTime]" value="{{$fromTime}}" placeholder="" data-pattern="ratioByTime[++][fromTime]">
                                                </div>
                                                <span class="text-nowrap col-auto px-0 pt-3">To</span>
                                                <div class="col">
                                                    <span class="flatpickr-arrow"></span>
                                                    <input type="text" class="form-control flatpickr flatpickr-time toTime" name="ratioByTime[{{$key}}][toTime]" value="{{$toTime}}" placeholder="" data-pattern="ratioByTime[++][toTime]">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg order-lg-2 order-3">
                                    <div class="row mb-2">
                                        <div class="col-sm-6">
                                            <div class="form-group row d-xl-flex">
                                                <label class="col col-form-label">No of teachers</label>
                                                <div class="col-xl-5">
                                                    <input type="number" class="form-control text-xl-center numbers teachers" min="1" name="ratioByTime[{{$key}}][teachers]" value="{{$ratio->teachers}}" placeholder="" data-pattern="ratioByTime[++][teachers]">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group row d-xl-flex">
                                                <label class="col col-form-label">No of children</label>
                                                <div class="col-xl-5">
                                                    <input type="number" class="form-control text-xl-center numbers childs" min="1" name="ratioByTime[{{$key}}][childs]" value="{{$ratio->childs}}" placeholder="" data-pattern="ratioByTime[++][childs]">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                            @else
                            <div class="r-group row">
                                <div class="col-lg-1 col-auto ml-auto order-lg-3 order-1 input-group-append align-items-start justify-content-end" style="visibility:hidden;">
                                    <span class="input-group-btn mt-lg-3">
                                        <a href="javascript:void(0);" class="text-danger r-btnRemove mt-1"><i class="uil uil-multiply"></i></a>
                                    </span>
                                </div>
                                <div class="col-lg order-lg-1 order-2">
                                    <div class="form-group row">
                                        <label class="col-lg-3 col-form-label font-weight-regular">Select time</label>
                                        <div class="col-lg-9">
                                            <div class="row">
                                                <div class="col">
                                                    <span class="flatpickr-arrow"></span>
                                                    <input type="text" class="form-control flatpickr flatpickr-time fromTime" name="ratioByTime[0][fromTime]" value="" placeholder="" data-pattern="ratioByTime[++][fromTime]">
                                                </div>
                                                <span class="text-nowrap col-auto px-0 pt-3">To</span>
                                                <div class="col">
                                                    <span class="flatpickr-arrow"></span>
                                                    <input type="text" class="form-control flatpickr flatpickr-time toTime" name="ratioByTime[0][toTime]" value="" placeholder="" data-pattern="ratioByTime[++][toTime]">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg order-lg-2 order-3">
                                    <div class="row mb-2">
                                        <div class="col-sm-6">
                                            <div class="form-group row d-xl-flex">
                                                <label class="col col-form-label">No of teachers</label>
                                                <div class="col-xl-5">
                                                    <input type="number" class="form-control text-xl-center numbers teachers" min="1" name="ratioByTime[0][teachers]" value="" placeholder="" data-pattern="ratioByTime[++][teachers]">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group row d-xl-flex">
                                                <label class="col col-form-label">No of children</label>
                                                <div class="col-xl-5">
                                                    <input type="number" class="form-control text-xl-center numbers childs" min="1" name="ratioByTime[0][childs]" value="" placeholder="" data-pattern="ratioByTime[++][childs]">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endif
                            <div class="btn-div">
                                <button type="button" class="btn btn-success r-btnAdd">Add</button>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-2 ratio-without-time" style="display: {{ ($is_update && isset($room->ratioByTimeEnabled) && $room->ratioByTimeEnabled === false) || (!$is_update) ? 'block' : 'none'}}">
                        <div class="col-xl-6">
                            <div class="row mb-2">
                                <div class="col-sm-6">
                                    <div class="form-group row d-xl-flex">
                                        <label class="col col-form-label">No of teachers</label>
                                        <div class="col-xl-5">
                                            <input type="number" class="form-control text-xl-center numbers @if($errors->has('teachers')) is-invalid @endif" min="1" value="{{ $is_update ? $room->teachers : old('teachers') }}" name="teachers" placeholder="">
                                            @if($errors->has('teachers'))
                                            <label id="teachers-error" class="invalid-feedback" for="teachers">{{ $errors->first('teachers') }}</label>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group row d-xl-flex">
                                        <label class="col col-form-label">No of children</label>
                                        <div class="col-xl-5">
                                            <input type="number" class="form-control text-xl-center numbers @if($errors->has('childs')) is-invalid @endif" min="1" value="{{ $is_update ? $room->childs : old('childs') }}" name="childs" placeholder="">
                                            @if($errors->has('childs'))
                                            <label id="childs-error" class="invalid-feedback" for="childs">{{ $errors->first('childs') }}</label>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="my-5">
                <button type="submit" class="btn btn-success btn-min-width mr-2">{{ $is_update ? 'Save changes' : 'Add room' }}</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/moment/moment.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/room-add.js') }}" type="text/javascript"></script>
@endsection