@extends('layouts.admin')

@php
    $is_update = false;
    if(isset($checklistData) && !empty($checklistData)){
        $is_update = true;
    }
    $type = 1;
    if(app('request')->input('type')){
        $type = app('request')->input('type');
    } 
@endphp

@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" />
<style>
    .select2-selection--multiple .select2-search__field{
        width:100%!important;
    }
</style>
@endsection

@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' : 'New' }} Checklist Template</h4>
    </div>
    <div class="col-sm-6 col-xl-6">
        <div class="form-inline float-sm-right mt-3 mt-sm-0">
            <a href="{{route('admin.checklist-templates')}}" class="btn btn-success btn-min-width">Back</a>
        </div>
    </div>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <form action="{{ $is_update ? route('admin.checklist-templates.update') : route('admin.checklist-templates.save') }}" method="post" class="add-checklist-form" enctype="multipart/form-data">
            @csrf
            @if($is_update)
            <input type="hidden" name="id" value="{{ $checklistData->_id }}">
            @endif
            <div class="card">
                <div class="card-body">
                    <div class="row mb-2">
                        <div class="col-lg-11 col-xl-6">
                            <div class="form-group row">
                                <label class="col-lg-4 col-xl-4 col-form-label">Title</label>
                                <div class="col-lg-8 col-xl-7">
                                    <input type="text" class="form-control" name="title" value="{{ $is_update ? $checklistData->title : old('title') }}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="add-to-custom">
                        <div class="section-repeater" data-startingIndex="1" data-first-item-remove="true">
                            @if($is_update)
                            @php $count = 0; @endphp
                            @foreach($checklistData->checklist as $checklist)
                            <div class="r-group">
                                <input type="hidden" class="form-control id" name="custom[{{$count}}][_id]" value="{{ $checklist->_id }}">
                                <div class="row mb-2">
                                    <div class="col-lg-11 col-xl-8 order-2 order-lg-1">
                                        <div class="form-group row">
                                            <label class="col-lg-4 col-xl-3 col-auto col-form-label pr-xl-0">Question</label>
                                            <div class="col-lg">
                                                <input type="text" class="form-control question-custom" name="custom[{{$count}}][question]" value="{{ isset($checklist->question) ? $checklist->question : '' }}" placeholder="Write question">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-lg-4 col-xl-3 col-auto col-form-label pr-xl-0">Answer Type</label>
                                            <div class="col-lg">
                                                <select class="form-control wide answer-type" data-plugin="customselect" name="custom[{{$count}}][answerType]" data-placeholder="Select type">
                                                    <option value="66" {{ (isset($checklist->answerType) && $checklist->answerType == '66') ? 'selected="selected"' : '' }}>Yes/No</option>
                                                    <option value="67" {{ (isset($checklist->answerType) && $checklist->answerType == '67') ? 'selected="selected"' : '' }}>Yes/No/Not Observed</option>
                                                    <option value="68" {{ (isset($checklist->answerType) && $checklist->answerType == '68') ? 'selected="selected"' : '' }}>Text Comment</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-1 col-xl-1 order-lg-2 order-1 input-group-append justify-content-end" style="visibility:hidden;">
                                        <span class="input-group-btn mt-lg-2 pt-lg-1">
                                            <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 mb-5 mt-4 mx-n5"></div>
                            </div>
                            @php $count++; @endphp
                            @endforeach
                            @else
                            <div class="r-group">
                                <div class="row mb-2">
                                    <div class="col-lg-11 col-xl-8 order-2 order-lg-1">
                                        <div class="form-group row">
                                            <label class="col-lg-4 col-xl-3 col-auto col-form-label pr-xl-0">Question</label>
                                            <div class="col-lg">
                                                <input type="text" class="form-control question-custom" name="custom[0][question]" value="" placeholder="Write question">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-lg-4 col-xl-3 col-auto col-form-label pr-xl-0">Answer Type</label>
                                            <div class="col-lg">
                                                <select class="form-control wide answer-type" data-plugin="customselect" name="custom[0][answerType]" data-placeholder="Select type">
                                                    <option value="66">Yes/No</option>
                                                    <option value="67">Yes/No/Not Observed</option>
                                                    <option value="68">Text Comment</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-1 col-xl-1 order-lg-2 order-1 input-group-append justify-content-end" style="visibility:hidden;">
                                        <span class="input-group-btn mt-lg-2 pt-lg-1">
                                            <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 mb-5 mt-4 mx-n5"></div>
                            </div>
                            @endif
                            <div class="pt-3 btn-div">
                                <button type="button" class="btn btn-success btn-min-width r-btnAdd">Add another</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="my-5">
                <button type="submit" class="btn btn-success btn-min-width mr-2">Save</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/checklist-template-add.js') }}" type="text/javascript"></script>
<script>
    
</script>
@endsection