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

@section('css')
    <!-- third party css -->
    <link href="{{asset('assets/libs/quill/quill.min.css')}}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('assets/libs/dropify/dropify.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
        <div class="row mt-3">
            <div class="col-xl-12">
                <div class="card">
                    <form method="post" 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('number')
                                        @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' : '' }}
                                                {!! isset($props['attributes']) ? $props['attributes'] : '' !!}>
                                        @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('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" 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' && $item->{$field} == $k ? 'selected="selected"' : '' }}>
                                                        {{ $v }}</option>
                                                @endforeach
                                            </select>
                                        @break

                                        @case('radio')
                                            <div class="row ps-2">
                                                @foreach ($props['values'] as $k => $v)
                                                    <div class="form-check col-auto form-check-blue mb-2">
                                                        <input class="form-check-input" type="radio" name="{{ $field }}"
                                                            value="{{ $k }}"
                                                            id="field-{{ $field }}-{{ $k }}"
                                                            {{ $mode == 'edit' && isset($item->{$field}) && $k == $item->{$field} ? 'checked' : '' }}>
                                                        <label class="form-check-label"
                                                            for="field-{{ $field }}-{{ $k }}">{{ $v }}</label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @break

                                        @case('checkbox')
                                            <div class="row ps-2">
                                                @foreach ($props['values'] as $k => $v)
                                                    <div class="form-check col-auto form-check-blue mb-2">
                                                        <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
                                            </div>
                                        @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('yesno')
                                            <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"
                                                        {{ $mode == 'edit' && $item->{$field} == '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"
                                                        {{ $mode == 'edit' && $item->{$field} == 'no' ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="field-{{ $field }}-no">No</label>
                                                </div>
                                            </div>
                                        @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" />
                                                <p class="text-muted text-center mt-2 mb-0">1GB Max File size</p>
                                            </div>
                                        @break

                                        @case('mapping')
                                            <div class="col-md-12 mb-2">
                                                <button type="button" class="btn btn-info btn-xs float-end me-2 btn-add-content" ctype="youtube">Add Youtube Video</button>
                                                <button type="button" class="btn btn-info btn-xs float-end me-2 btn-add-content" ctype="pdf">Add PDF</button>
                                                <button type="button" class="btn btn-info btn-xs float-end me-2 btn-add-content" ctype="video">Add Video</button>
                                                <button type="button" class="btn btn-info btn-xs float-end me-2 btn-add-content" ctype="image">Add Image</button>
                                                <button type="button" class="btn btn-info btn-xs float-end me-2 btn-add-content" ctype="text">Add Text Content</button>
                                                <div class="clearfix"></div>
                                            </div>
                                            <div id="approver-wrapper" class="row">
                                                <!-- <div class="col-md-12 mb-2">
                                                    <div class="row">
                                                        <div class="col-md-3">
                                                            <label>Type</label>
                                                        </div>
                                                        <div class="col-md-5">
                                                            <label>Content</label>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <label>Order</label>
                                                        </div>
                                                        <div class="col-2">

                                                        </div>
                                                    </div>
                                                </div> -->

                                                @php
                                                $contentCount = 0;
                                                @endphp
                                                @if ($mode == 'edit')
                                                    
                                                    @foreach ($item->contents as $content)
                                                        @if($content->type == 'text')
                                                            <div class="col-md-12 mb-2">
                                                                <div class="row">
                                                                    <div class="col-10">
                                                                        <label>Text Content</label>
                                                                        <div id="snow-editor-{{$contentCount}}" contentCount="{{$contentCount}}" class="snow-editor" style="height: 300px;">{!!$content->content!!}</div>
                                                                    </div>
                                                                    <div class="col-2">
                                                                        <label>Sort Order</label>
                                                                        <input type="number" class="form-control" name="sortorder[{{$contentCount}}]" value="{{$content->order}}" required>
                                                                        <button type="button" class="btn btn-danger waves-effect waves-light btn-remove mt-2"><i class="mdi mdi-close"></i></button>
                                                                    </div>
                                                                    <input type="hidden" id="content-{{$contentCount}}" name="content[{{$contentCount}}]" value="">
                                                                    <input type="hidden" name="type[{{$contentCount}}]" value="text">
                                                                </div>
                                                            </div>
                                                        @elseif($content->type == 'image' || $content->type == 'video' || $content->type == 'pdf')
                                                            <div class="col-md-12 mb-2">
                                                                <div class="row">
                                                                    <div class="col-10">
                                                                        <label>Upload {{$content->type}}</label>
                                                                        <div class="mt-3" id="file_wrapper">
                                                                            <input type="file" id="dropify-{{$contentCount}}" name="content[{{$contentCount}}]" class="dropify" data-default-file="{{$content->content}}" data-allowed-file-extensions="png jpg jpeg gif pdf mp4" />
                                                                            <p class="text-muted text-center mt-2 mb-0">500MB Max File size</p>
                                                                            <input type="hidden" id="old-content-{{$contentCount}}" name="old-content[{{$contentCount}}]" value="{{$content->content}}">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-2">
                                                                        <label>Sort Order</label>
                                                                        <input type="number" class="form-control" name="sortorder[{{$contentCount}}]" value="{{$content->order}}" required>
                                                                        <button type="button" class="btn btn-danger waves-effect waves-light btn-remove mt-2"><i class="mdi mdi-close"></i></button>
                                                                    </div>
                                                                    <input type="hidden" name="type[{{$contentCount}}]" value="{{$content->type}}">
                                                                </div>
                                                            </div>
                                                        @elseif($content->type == 'youtube')
                                                            <div class="col-md-12 mb-2">
                                                                <div class="row">
                                                                    <div class="col-10">
                                                                        <label>Youtube URL</label>
                                                                        <input type="text" name="content[{{$contentCount}}]" value="{{$content->content}}" class="form-control" />
                                                                    </div>
                                                                    <div class="col-2">
                                                                        <label>Sort Order</label>
                                                                        <input type="number" class="form-control" name="sortorder[{{$contentCount}}]" value="{{$content->order}}" required>
                                                                        <button type="button" class="btn btn-danger waves-effect waves-light btn-remove mt-2"><i class="mdi mdi-close"></i></button>
                                                                    </div>
                                                                    <input type="hidden" name="type[{{$contentCount}}]" value="youtube">
                                                                </div>
                                                            </div>

                                                        @endif
                                                        @php
                                                        $contentCount++;
                                                        @endphp
                                                    @endforeach
                                                @endif

                                            </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="{{ URL::asset('assets/libs/dropify/dropify.min.js') }}"></script>
    <script src="{{asset('assets/libs/quill/quill.min.js')}}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            let contentCount = {{$contentCount}};
            let editors = []
            let quillmodules = {
                'toolbar': [[{ 'font': [] }, { 'size': [] }], ['bold', 'italic', 'underline', 'strike'], [{ 'color': [] }, { 'background': [] }], [{ 'script': 'super' }, { 'script': 'sub' }], [{ 'header': [false, 1, 2, 3, 4, 5, 6] }, 'blockquote', 'code-block'], [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }], ['direction', { 'align': [] }] ]}


            $('.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).'
                }
            });
            $('.snow-editor').each((index, element) => {
                let quill = new Quill('#'+$(element).attr('id'), {theme: 'snow', modules: quillmodules});
                let hiddenField = $('#content-'+ $(element).attr('contentCount') )
                hiddenField.val( quill.root.innerHTML );
                quill.on('text-change', function(delta, oldDelta, source) {
                    hiddenField.val( quill.root.innerHTML );
                });
            });


            $('.btn-remove').click(function() {
                $(this).parent().parent().remove();
            });
            $('.btn-add-content').click(function() {
                switch($(this).attr('ctype')) {
                    case 'text':
                        $('#approver-wrapper').append(`
                            <div class="col-md-12 mb-2">
                                <div class="row">
                                    <div class="col-10">
                                        <label>Text Content</label>
                                        <div id="snow-editor-${contentCount}" class="snow-editor" style="height: 300px;"></div>
                                    </div>
                                    <div class="col-2">
                                        <label>Sort Order</label>
                                        <input type="number" class="form-control" name="sortorder[${contentCount}]" value="" required>
                                        <button type="button" class="btn btn-danger waves-effect waves-light btn-remove mt-2"><i class="mdi mdi-close"></i></button>
                                    </div>
                                    <input type="hidden" id="content-${contentCount}" name="content[${contentCount}]" value="">
                                    <input type="hidden" name="type[${contentCount}]" value="text">
                                </div>
                            </div>
                        `);
                        let quill = new Quill('#snow-editor-'+contentCount, {theme: 'snow', modules: quillmodules});
                        let hiddenField = $('#content-'+contentCount)
                        quill.on('text-change', function(delta, oldDelta, source) {
                            hiddenField.val( quill.root.innerHTML );
                        });

                    break;
                    case 'image':
                    case 'pdf':
                    case 'video':
                        $('#approver-wrapper').append(`
                            <div class="col-md-12 mb-2">
                                <div class="row">
                                    <div class="col-10">
                                        <label>Upload ${$(this).attr('ctype')}</label>
                                        <div class="mt-3" id="file_wrapper">
                                            <input type="file" id="dropify-${contentCount}" name="content[${contentCount}]" class="dropify" data-allowed-file-extensions="png jpg jpeg gif pdf mp4" />
                                            <p class="text-muted text-center mt-2 mb-0">500MB Max File size</p>
                                        </div>
                                    </div>
                                    <div class="col-2">
                                        <label>Sort Order</label>
                                        <input type="number" class="form-control" name="sortorder[${contentCount}]" value="" required>
                                        <button type="button" class="btn btn-danger waves-effect waves-light btn-remove mt-2"><i class="mdi mdi-close"></i></button>
                                    </div>
                                    <input type="hidden" name="type[${contentCount}]" value="${$(this).attr('ctype')}">
                                </div>
                            </div>
                        `);
                        $('#dropify-'+contentCount).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).'
                            }
                        });
                    break;
                    case 'youtube':
                        $('#approver-wrapper').append(`
                            <div class="col-md-12 mb-2">
                                <div class="row">
                                    <div class="col-10">
                                        <label>Youtube URL</label>
                                        <input type="text" name="content[${contentCount}]" class="form-control" />
                                    </div>
                                    <div class="col-2">
                                        <label>Sort Order</label>
                                        <input type="number" class="form-control" name="sortorder[${contentCount}]" value="" required>
                                        <button type="button" class="btn btn-danger waves-effect waves-light btn-remove mt-2"><i class="mdi mdi-close"></i></button>
                                    </div>
                                    <input type="hidden" name="type[${contentCount}]" value="youtube">
                                </div>
                            </div>
                        `);
                    break;
                }
                contentCount = contentCount + 1;
            });
            



            $('#btn-add-approver').click(function() {
                $('#approver-wrapper').append(`
    <div class="col-md-12 mb-5">
      <div class="row">
        <div class="col-md-3">
          <select class="form-control contentType" name="contents[type][]" required>
            <option value="none">None</option>
            <option value="textbox">Textbox</option>
            <option value="image">Image</option>
            <option value="pdf">PDF</option>
            <option value="video">Video</option>
          </select>
        </div>
        <div class="col-md-5 contenttextbox" style="display: none;">
          <textarea name="contents[tempcontent][]" class="form-control" placeholder="Enter Content" ></textarea>
        </div>
        <div class="col-md-5 contentfile">
          <input type="file" class="form-control" name="contents[tempcontent][]" value="" >
        </div>
        <div class="col-md-2">
          <input type="text" class="form-control" name="contents[order][]" value="" required>
        </div>
        <div class="col-md-2">
          <button type="button" class="btn btn-danger waves-effect waves-light btn-remove">
            <i class="mdi mdi-close"></i>
          </button>
        </div>
      </div>
    </div>`);

                // Event listener for select element within the appended div
                $('.contentType').last().change(function() {
                    var selectedOption = $(this).val();
                    var contentTextbox = $(this).closest('.row').find('.contenttextbox');
                    var contentFile = $(this).closest('.row').find('.contentfile');

                    if (selectedOption === 'textbox') {
                        contentTextbox.show();
                        contentFile.hide();
                    } else {
                        contentTextbox.hide();
                        contentFile.show();
                    }
                });
            });

        });
    </script>
@endsection