@extends('layouts.vertical', ["page_title"=> "Add & Edit Products"])

@section('css')
<!-- third party css -->
<link href="{{asset('assets/libs/select2/select2.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/libs/multiselect/multiselect.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{ URL::asset('assets/libs/dropify/dropify.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/libs/flatpickr/flatpickr.min.css')}}" rel="stylesheet" type="text/css" />
<!-- third party css end -->
@endsection

@section('content')
<!-- Start Content-->
<div class="container-fluid">   
    <!-- end page title -->
@if(session()->has('message'))
    <div class="alert alert-success mt-3">
        {{ session()->get('message') }}
    </div>
@endif
@if(session()->has('error'))
    <div class="alert alert-danger mt-3">
        {{ session()->get('error') }}
    </div>
@endif
    <div class="row mt-3">
        <div class="col-xl-12">
            <div class="card">
                <form method="post" action="" id="form-availiblity" enctype="multipart/form-data">
                @csrf
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <h4 class="page-title">Add / Edit {{$title}}</h4>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="float-end">
                                <a href="{{$base_url}}s" class="btn btn-dark waves-effect waves-light">Back</a>
                                <button type="submit" class="btn btn-success waves-effect waves-light">Submit</button>
                            </div>
                        </div>
                        @foreach($fields as $field => $props)
                            @if($props['type'] != 'hidden')
                            <div class="col-md-{{isset($props['fullwidth'])?'12':'6'}} mb-3">
                            <label for="field-{{$field}}" class="form-label">{{$props['title']}} {!!isset($props['required'])&&$props['required'] ? '<span class="text-danger">*</span>':''!!} </label>
                            @endif
                            @switch($props['type'])
                                @case('hidden')
                                    <input type="{{$props['type']}}" id="field-{{$field}}" name="{{$field}}" value="{{$mode=='edit'?$item->{$field}:''}}">
                                    @break
                                @case('text')
                                @case('email')
                                @case('tel')
                                    <input type="{{$props['type']}}" id="field-{{$field}}" name="{{$field}}" class="form-control" placeholder="Enter {{$props['title']}}" value="{{$mode=='edit'&&isset($item->{$field})?$item->{$field}:''}}" {{isset($props['required'])&&$props['required']?'required':'' }}>
                                    @break
                                @case('number')
                                    @php
                                        $__numVal = '';
                                        if ($mode == 'edit' && isset($item->{$field})) {
                                            $__numVal = $item->{$field};
                                        } elseif (isset($item->{$field})) {
                                            $__numVal = $item->{$field};
                                        } elseif (isset($props['default'])) {
                                            $__numVal = $props['default'];
                                        }
                                    @endphp
                                    <input type="number" id="field-{{$field}}" name="{{$field}}" class="form-control" placeholder="Enter {{$props['title']}}" value="{{ $__numVal }}" {{isset($props['required'])&&$props['required']?'required':'' }}>
                                    @break
                                @case('date')
                                    <input type="text" id="field-{{$field}}" name="{{$field}}" class="form-control" placeholder="Enter {{$props['title']}}" value="{{$mode=='edit'&&isset($item->{$field})?$item->{$field}:''}}" data-provide="datepicker" data-date-format="mm-dd-yyyy" data-date-autoclose="true" {{isset($props['required'])&&$props['required']?'required':'' }}>
                                    @break
                                @case('datetime')
                                    <input type="text" id="field-{{$field}}" name="{{$field}}" class="form-control datetime" placeholder="Enter {{$props['title']}}" value="{{$mode=='edit'&&isset($item->{$field})?$item->{$field}:''}}" {{isset($props['required'])&&$props['required']?'required':'' }}>
                                    @break
                                @case('textarea')
                                    <textarea id="field-{{$field}}" name="{{$field}}" class="form-control" placeholder="Enter {{$props['title']}}" {{isset($props['required'])&&$props['required']?'required':'' }}>{{$mode=='edit'&&isset($item->{$field})?$item->{$field}:''}}</textarea>
                                    @break
                                @case('select')
                                    <select class="form-control {{ in_array($field, ['mapped_metric', 'count_metric']) ? 'metric-select' : '' }}" id="field-{{$field}}" name="{{$field}}" {{isset($props['required'])&&$props['required']?'required':'' }}>
                                        <option value=""> -- Select {{$props['title']}} -- </option>
                                        @foreach($props['values'] as $k => $v)
                                        <option value="{{$k}}" {{$mode=='edit' && isset($item->{$field}) && $item->{$field} == $k ? 'selected="selected"':''}}>{{$v}}</option>
                                        @endforeach
                                    </select>
                                    @break
                                @case('checkbox')
                                    @foreach($props['values'] as $k => $v)
                                        <div class="form-check mb-2 form-check-blue">
                                            <input class="form-check-input" type="checkbox" name="{{$field}}[]" value="{{$k}}" id="field-{{$field}}-{{$k}}" {{$mode=='edit' && isset($item->{$field}) && in_array($k, $item->{$field}) ? 'checked':''}}>
                                            <label class="form-check-label" for="field-{{$field}}-{{$k}}">{{$v}}</label>
                                        </div>
                                    @endforeach
                                    @break
                                @case('multiselect')
                                    <select class="form-control select2-multiple" data-toggle="select2" data-width="100%" multiple="multiple" data-placeholder="Choose {{$props['title']}}" id="field-{{$field}}" name="{{$field}}[]" {{isset($props['required'])&&$props['required']?'required':'' }}>
                                        <option value=""> -- Select {{$props['title']}} -- </option>
                                        @foreach($props['values'] as $k => $v)
                                        <option value="{{$k}}" {{$mode=='edit' && isset($item->{$field}) && in_array($k, $item->{$field}) ? 'selected="selected"':''}}>{{$v}}</option>
                                        @endforeach
                                    </select>
                                    @break
                                @case('bigmultiselect')
                                    <select multiple="multiple" class="bigmultiselect multi-select" id="field-{{$field}}" name="{{$field}}[]" {{isset($props['required'])&&$props['required']?'required':'' }}>
                                        @foreach($props['values'] as $k => $v)
                                        <option value="{{$k}}" {{$mode=='edit' && in_array($k, $item->{$field}) ? 'selected="selected"':''}}>{{$v}}</option>
                                        @endforeach
                                    </select>
                                    @break
                                @case('multitextbox')
                                    <div class="row">
                                        @foreach($props['values'] as $k => $v)
                                        <div class="col-3">{{$v}}</div>
                                        <div class="col-3 mb-1">
                                            <input type="text" id="field-{{$k}}" name="{{$field}}[{{$k}}]" class="form-control" value="{{isset($option->val)?$option->val:''}}" {{isset($props['required'])&&$props['required']?'required':'' }}>
                                        </div>
                                        @endforeach
                                    </div>
                                    @break
                                @case('yesno')
                                    @php
                                        $__yn = null;
                                        if (isset($item->{$field})) {
                                            $__yn = $item->{$field};
                                        } elseif (isset($props['default'])) {
                                            $__yn = $props['default'];
                                        }
                                    @endphp
                                    <div>
                                        <div class="form-check mb-2 form-check-success form-check-inline">
                                            <input class="form-check-input" type="radio" name="{{$field}}" id="field-{{$field}}-yes" value="yes" {{$__yn === 'yes' ? 'checked' : ''}} {{isset($props['required'])&&$props['required']?'required':'' }}>
                                            <label class="form-check-label" for="field-{{$field}}-yes">Yes</label>
                                        </div>
                                        <div class="form-check mb-2 form-check-danger form-check-inline">
                                            <input class="form-check-input" type="radio" name="{{$field}}" id="field-{{$field}}-no" value="no" {{$__yn === 'no' ? 'checked' : ''}}>
                                            <label class="form-check-label" for="field-{{$field}}-no">No</label>
                                        </div>
                                    </div>                                    
                                    @break
                                @case('datalist')
                                    @php
                                        $__dlVal = '';
                                        if (isset($item->{$field})) {
                                            $__dlVal = $item->{$field};
                                        } elseif (isset($props['default'])) {
                                            $__dlVal = $props['default'];
                                        }
                                    @endphp
                                    <input type="text" id="field-{{$field}}" name="{{$field}}" class="form-control" list="datalist-{{$field}}" placeholder="{{ $props['placeholder'] ?? 'Pick existing or type a new value' }}" value="{{ $__dlVal }}" {{isset($props['required'])&&$props['required']?'required':'' }}>
                                    <datalist id="datalist-{{$field}}">
                                        @foreach(($props['values'] ?? []) as $k => $v)
                                        <option value="{{ $k }}">{{ $v !== $k ? $v : '' }}</option>
                                        @endforeach
                                    </datalist>
                                    @break
                                @case('image')
                                    <div class="mt-3" id="file_wrapper">
                                        <input type="file" name="{{$field}}" class="dropify" data-default-file="{{$mode=='edit'&&isset($item->{$field})?$item->{$field}:''}}" data-allowed-file-extensions="png jpg jpeg gif" />
                                        <p class="text-muted text-center mt-2 mb-0">500MB Max File size</p>
                                    </div>
                                    @break
                                @case('multiimage')
                                    <div class="mt-3" id="file_wrapper">
                                        <input type="file" name="{{$field}}[]" multiple class="dropify" data-allowed-file-extensions="png jpg jpeg gif" />
                                        <p class="text-muted text-center mt-2 mb-0">500MB Max File size</p>
                                    </div>
                                    @break
                                @case('file')
                                    <div class="mt-3" id="file_wrapper">
                                        <input type="file" name="{{$field}}" class="dropify" data-default-file="{{$mode=='edit'?$item->{$field}:''}}" data-allowed-file-extensions="png jpg jpeg gif mp4 pdf mp3 zip csv" />
                                        <p class="text-muted text-center mt-2 mb-0">1GB Max File size</p>
                                    </div>
                                    @break
                                
                            @endswitch
                            @if($props['type'] != 'hidden')
                            </div>
                            @endif
                        @endforeach
                        
                        <div class="col-md-12 mb-3">
                            <div class="float-end">
                                <a href="{{$base_url}}s" class="btn btn-dark waves-effect waves-light">Back</a>
                                <button type="submit" class="btn btn-success waves-effect waves-light">Submit</button>
                            </div>
                        </div>
                    </div>
                </div> <!-- end card-body -->
                </form>
            </div> <!-- end card-->
        </div> <!-- end col -->
    </div>
</div>
<style type="text/css">
    .ms-container {max-width: 100%}
</style>
@endsection

@section('script')
<script src="{{asset('assets/libs/select2/select2.min.js')}}"></script>
<script src="{{asset('assets/libs/multiselect/multiselect.min.js')}}"></script>
<script src="{{asset('assets/libs/multiselect/jquery.quicksearch.js')}}"></script>
<script src="{{ URL::asset('assets/libs/dropify/dropify.min.js')}}"></script>
<script src="{{asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.js')}}"></script>
<script src="{{asset('assets/libs/flatpickr/flatpickr.min.js')}}"></script>

<script type="text/javascript">
    function initMetricSelect2($context) {
        ($context || $(document)).find('select.metric-select').each(function() {
            let $select = $(this);

            if ($select.hasClass('select2-hidden-accessible')) {
                $select.select2('destroy');
            }

            $select.select2({
                width: '100%',
                placeholder: $select.find('option:first').text() || '-- Select Metric --',
                allowClear: true
            });
        });
    }

    $(document).ready(function(){
        $('[data-toggle="select2"]').select2();
        initMetricSelect2();
        $('.dropify').dropify({
            messages: {
                'default': 'Drag and drop a file here or click',
                'replace': 'Drag and drop or click to replace',
                'remove': 'Remove',
                'error': 'Ooops, something wrong appended.'
            },
            error: {
                'fileSize': 'The file size is too big (500MB max).'
            }
        });

        $('.datetime').flatpickr({
            enableTime: true,
            dateFormat: "Y-m-d H:i"
        });

        $('.bigmultiselect').multiSelect({
          selectableHeader: "<div class='custom-header'><strong>Selectable</strong></div><input type='text' class='form-control' autocomplete='off' placeholder='Search Selectable'>",
          selectionHeader: "<div class='custom-header'><strong>Selected</strong></div><input type='text' class='form-control' autocomplete='off' placeholder='Search Selected'>",
          afterInit: function(ms){
            var that = this,
                $selectableSearch = that.$selectableUl.prev(),
                $selectionSearch = that.$selectionUl.prev(), 
                selectableSearchString = '#'+that.$container.attr('id')+' .ms-elem-selectable:not(.ms-selected)',
                selectionSearchString = '#'+that.$container.attr('id')+' .ms-elem-selection.ms-selected';

            that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
            .on('keydown', function(e){
              if (e.which === 40){
                that.$selectableUl.focus();
                return false;
              }
            });

            that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
            .on('keydown', function(e){
              if (e.which == 40){
                that.$selectionUl.focus();
                return false;
              }
            });
          },
          afterSelect: function(){
            this.qs1.cache();
            this.qs2.cache();
          },
          afterDeselect: function(){
            this.qs1.cache();
            this.qs2.cache();
          }
        });
    });
</script>
@endsection