@extends('adminlte::page')

@section('title', 'Reason Add')

@section('content')
  <style>
    .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #007bff;border: 1px solid #007bff;}
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:#fff !important;}
  </style>
    <div class="row">
        <!-- left column -->
        <div class="col-md-12">
            <!-- general form elements -->
            
            <div class="box box-primary">
                <div class="content-header">
                  <div class="box-header with-border">
                    <h3 class="box-title">Add {{$type}}</h3>
                  </div>
                </div>
                <div class="card-body card">
                  <form role="form" enctype="multipart/form-data" method="POST" action="{{ route('save.reasons.process.document', ['id' => $id, 'type'=>$type]) }}" autocomplete="off">
                      @csrf
                      <input type="hidden" name="type" value="{{$type}}" required>
                      <input type="hidden" name="deleted_ids" id="deleted_ids" value="">
                      @php
                          $groupedData = $reasonData->groupBy('type');
                      @endphp
                      @if($d_id != null)
												@if($groupedData->has('document'))
														@foreach($groupedData['document'] as $key => $val)
																@php
																		$ids = explode(',', $val['document_ids']);
																		$ids = array_values(array_filter($ids));
																		$add_ids = explode(',', $val['additional_ids']);
																		$add_ids = array_values(array_filter($add_ids));
																@endphp
																<input type="hidden" name="edit_id" value="{{ $val['id'] }}">
																<input type="hidden" name="edit_document_section" value="1">
																<div class="form-group">
																		<label class="d-block">Type</label>
																		<select class="form-control doc-type-select" name="type">
																			<option	value="doc_cat" >Category Documents</option>
																			<option	value="document" @if($val['type'] == 'document') selected @endif>Direct Documents</option>
																		</select>
																</div>
																<div class="row" data-id="{{ $val['id'] }}">
																	<div class="col-md-12">
																				<div class="box-body">
																						<div class="form-group">
																							<label class="d-block">Document Type</label>
																							<select class="form-control doc-type-select" name="edit_doc_type_id">
																								<option value="">select</option>
																									@foreach($doc_types as $doc_t)
																											<option
																													value="{{ $doc_t->id }}"
																													data-sub="{!! e(json_encode($doc_t->subcategories->map(fn($s) => ['id' => $s->id, 'category_name' => $s->category_name]))) !!}"
																													{{ $doc_t->id == $val['doc_type_id'] ? 'selected' : '' }}
																											>
																													{{ $doc_t->category_name }}
																											</option>

																									@endforeach
																							</select>
																					</div>

																					<div class="form-group mt-2 subcategory-wrapper" style="display: none;"></div>

																				</div>
																		</div>
																		<div class="col-md-12">
																				<div class="box-body">
																						<div class="form-group">
																								<input type="hidden" value="{{$val['document_ids']}}" id="shift_reordernew" name="shift_reordernew" />
																								<label class="d-block">Documents</label>
																								<select id="select_docsnew" class="js-example-basic-multiple select2-doc editSelect w-100" name="edit_doc_id[]" multiple="multiple" data-selected="{{ json_encode($ids) }}">
																									@foreach($reasonDocuments as $doc)
																											<option value="{{$doc->id}}">{{$doc->name}}{{ !empty($doc->description) ? ' (' . $doc->description . ')' : '' }}</option>
																										@endforeach
																								</select>
																						</div>
																				</div>
																		</div>
																		<div class="col-md-12">
																				<div class="box-body">
																						<div class="form-group">
																								<label class="d-block">Additional Documents</label>
																								<select class="js-example-basic-multiple select2-doc editAdditionalSelect w-100" name="edit_doc_add_id[]" multiple="multiple" data-seleted="{{ json_encode($add_ids) }}">
																									@foreach($reasonDocuments as $doc)
																											<option value="{{$doc->id}}">{{$doc->name}}{{ !empty($doc->description) ? ' (' . $doc->description . ')' : '' }}</option>
																									@endforeach
																								</select>
																						</div>
																				</div>
																		</div>
																</div>
																
														@endforeach
												@endif
												@if($groupedData->has('doc_cat'))
														@foreach($groupedData['doc_cat'] as $key => $val)
																@php
																		$ids = explode(',', $val['document_ids']);
																		$ids = array_values(array_filter($ids));
																		$add_ids = explode(',', $val['additional_ids']);
																		$add_ids = array_values(array_filter($add_ids));
																@endphp
																<input type="hidden" name="edit_id" value="{{ $val['id'] }}">
																<input type="hidden" name="edit_document_section" value="1">
																<div class="form-group">
																		<label class="d-block">Type</label>
																		<select class="form-control doc-type-select" name="type">
																			<option	value="doc_cat" >Category Documents</option>
																			<option	value="document" @if($val['type'] == 'document') selected @endif>Direct Documents</option>
																		</select>
																</div>
																<div class="row" data-id="{{ $val['id'] }}">
																	<div class="col-md-12">
																				<div class="box-body">
																						<div class="form-group">
																							<label class="d-block">Document Type</label>
																							<select class="form-control doc-type-select" name="edit_doc_type_id">
																								<option value="">select</option>
																									@foreach($doc_types as $doc_t)
																											<option
																													value="{{ $doc_t->id }}"
																													data-sub="{!! e(json_encode($doc_t->subcategories->map(fn($s) => ['id' => $s->id, 'category_name' => $s->category_name]))) !!}"
																													{{ $doc_t->id == $val['doc_type_id'] ? 'selected' : '' }}
																											>
																													{{ $doc_t->category_name }}
																											</option>

																									@endforeach
																							</select>
																					</div>

																					<div class="form-group mt-2 subcategory-wrapper" style="display: none;"></div>

																				</div>
																		</div>

																		<div class="col-md-12">
																				<div class="box-body">
																						<div class="form-group">
                                                <input type="hidden" value="{{$val['document_ids']}}" id="shift_reorder" name="shift_reorder" />
																								<label class="d-block">Documents</label> @php //echo "<pre>"; print_r($reasonDocuments); exit; @endphp
																								<select id="select_docs" class="js-example-basic-multiple select2-doc editSelect w-100" name="edit_doc_id[]" multiple="multiple" data-selected="{{ json_encode($ids) }}">
																									@foreach($reasonDocuments as $doc)
																											<option value="{{$doc->id}}">{{$doc->name}}{{ !empty($doc->description) ? ' (' . $doc->description . ')' : '' }}</option>
																										@endforeach
																								</select>
																						</div>
																				</div>
																		</div>
																		<div class="col-md-12">
																				<div class="box-body">
																						<div class="form-group">
																								<label class="d-block">Additional Documents</label>
																								<select class="js-example-basic-multiple select2-doc editAdditionalSelect w-100" name="edit_doc_add_id[]" multiple="multiple" data-seleted="{{ json_encode($add_ids) }}">
																									@foreach($reasonDocuments as $doc)
																											<option value="{{$doc->id}}">{{$doc->name}}{{ !empty($doc->description) ? ' (' . $doc->description . ')' : '' }}</option>
																									@endforeach
																								</select>
																						</div>
																				</div>
																		</div>
																</div>
																
														@endforeach
												@endif
                      @endif
                      @if($groupedData->has('process'))
                          <h6>Processes</h6>
                          @foreach($groupedData['process'] as $key => $val)
                              @php
                                  $ids = explode(',', $val['document_ids']);
                                  $ids = array_values(array_filter($ids));
                              @endphp
                              <div class="row" data-id="{{ $val['id'] }}">
                                  
                                  <div class="col-md-3">
                                      <div class="box-body">
                                          <div class="form-group">
                                              <label>Name</label>
                                              <input type="text" class="form-control" name="name_edit[{{ $val['id'] }}]" placeholder="Name"
                                                  value="{{ $val['title'] }}" required>
                                          </div>
                                      </div>
                                  </div>
                                  <div class="col-md-3">
                                      <div class="box-body">
                                          <div class="form-group">
                                              <label>Description</label>
                                              <input type="text" class="form-control" name="description_edit[{{ $val['id'] }}]" placeholder="Description"
                                                  value="{{ $val['description'] }}">
                                          </div>
                                      </div>
                                  </div>
                                  <div class="col-1 text-right">
                                      <button type="button" class="btn btn-danger removeButton2">
                                          <i class="fa fa-minus"></i>
                                      </button>
                                  </div>
                              </div>
                          @endforeach
                      @endif
                      
                      <div id="more_field">
                          @if($d_id == null)
                              <div class="row">
                                @if($type == "document")
																<div class="form-group">
																		<label class="d-block">Type</label>
																		<select class="form-control doc-type-select" name="type">
																			<option	value="doc_cat">Category Documents</option>
																			<option	value="document">Direct Documents</option>
																		</select>
																</div>
																<div class="col-md-12">
																		<div class="box-body">
																				<div class="form-group">
																					<label class="d-block">Document Type</label>
																					<select class="form-control doc-type-select" name="doc_type_id">
																						<option value="">select</option>
																							@foreach($doc_types as $doc_t)
																									<option
																											value="{{ $doc_t->id }}"
																											data-sub="{!! e(json_encode($doc_t->subcategories->map(fn($s) => ['id' => $s->id, 'category_name' => $s->category_name]))) !!}"
																									>
																											{{ $doc_t->category_name }}
																									</option>
																							@endforeach
																					</select>
																			</div>

																			<div class="form-group subcategory-wrapper" style="display: none;"></div>
																		</div>
																</div>
																<div class="col-md-12">
																		<div class="box-body">
																				<div class="form-group">
																						<label class="d-block">Select Documents From</label>
																						<select id="select_docs_from" class="js-example-basic-multiple select2-doc w-100 selected_ids_from" name="edit_doc_id[]">
																							@foreach($allReasons as $allReason)
																									<option value="{{$allReason->document_ids}}"> @if(!empty($allReason->reason)){{$allReason->reason->name}} @endif @if(!empty($allReason->doc_type)) ({{$allReason->doc_type->category_name}} )@endif</option>
																								@endforeach
																						</select>
																				</div>
																		</div>
																</div>
                                <input type="hidden" name="add_document_section" value="1">
                                <div class="col-md-5">
                                    <div class="box-body">
                                        <div class="form-group">
                                            <label for="category" class="d-block">Required Documents</label>
                                            <select class="js-example-basic-multiple w-100" name="doc_id[]" multiple="multiple">
                                                @foreach($reasonDocuments as $key => $doc)
                                                <option value="{{$doc->id}}">
                                                    {{$doc->name}}{{ !empty($doc->description) ? ' (' . $doc->description . ')' : '' }}
                                                </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <div class="box-body">
                                        <div class="form-group">
                                            <label for="category" class="d-block">Additional Documents</label>
                                            <select class="js-example-basic-multiple w-100" name="add_doc_id[]" multiple="multiple">
                                                @foreach($reasonDocuments as $key => $doc)
                                                <option value="{{$doc->id}}">
                                                    {{$doc->name}}{{ !empty($doc->description) ? ' (' . $doc->description . ')' : '' }}
                                                </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                @else
                                  <div class="col-md-6">
                                      <div class="box-body">
                                          <div class="form-group">
                                              <label>Name</label>
                                              <input type="text" class="form-control" name="name[0]" placeholder="Name"
                                                  value="{{ old('visament_fee') }}" >
                                          </div>
                                      </div>
                                  </div>
                                  <div class="col-md-6">
                                      <div class="box-body">
                                          <div class="form-group">
                                              <label>Description</label>
                                              <input type="text" class="form-control" name="description[0]" placeholder="Description"
                                                  value="{{ old('government_fee') }}">
                                          </div>
                                      </div>
                                  </div>
                                @endif
                              </div>
                          @endif
                      </div>
                      @if($type != "document")
                        <div class="form-group">
                            <div class="col-xs-1 ">
                                <button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button>
                            </div>
                        </div>
                     @endif
                      <div class="box-footer">
                          <button type="submit" class="btn btn-primary">Submit</button>
                      </div>
                  </form>
                </div>
            </div>
            <!-- /.box -->
        </div>
    </div>
@stop
@section('css')

@stop
@section('js')
<script>
    $(document).ready(function () {

        $('#select_docs_from').on('change', function () {
            let docIds = $(this).val();
            
            if (!docIds) return;

            if (typeof docIds === 'string') {
                docIds = docIds.split(',');
            }
            $("select[name='doc_id[]']").val(null).trigger('change');

            $("select[name='doc_id[]'] option").each(function () {
                if (docIds.includes($(this).val())) {
                    $(this).prop('selected', true);
                } else {
                    $(this).prop('selected', false);
                }
            });

            $("select[name='doc_id[]']").trigger('change');
        });
    });
</script>

<script>
    var reasonDocuments = @json($reasonDocuments);
    // console.log('reasonDocuments', reasonDocuments);
    $(document).ready(function (){
        let count = 1;
        let options = '';
        reasonDocuments.forEach(doc => {
            options += `<option value="${doc.id}">${doc.name}</option>`;
        });
        $('.addButton').on('click' , function() {
            $('#more_field').append(`
                <div class="row added-field">
                    <div class="col-md-5">
                        <div class="box-body">
                            <div class="form-group">
                                <label>Name</label>
                                <input type="text" class="form-control" name="  name[${count}]" placeholder="Name"
                                    value="{{ old('visament_fee') }}" step="0.01" required>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="box-body">
                            <div class="form-group">
                                <label>Description</label>
                                <input type="text" class="form-control" name="description[${count}]" placeholder="Description"
                                    value="{{ old('government_fee') }}" step="0.01">
                            </div>
                        </div>
                    </div>
                    <div class="col-1 text-right">
                        <label class="d-block">&nbsp;</label>
                        <button type="button" class="btn btn-danger removeButton">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>`);
                count++;
                $('.new-select').select2();
        });

        $(document).on('click','.removeButton', function() {
            $(this).closest('.added-field').remove();
        });
        $('.new-select').select2();

        //edit code for showing auto selected 

        $('.editSelect').each(function() { //required document
            let selectedValues = $(this).data('selected');
            if (selectedValues) {
                selectedValues = Array.isArray(selectedValues) ? selectedValues : [selectedValues];
                $(this).val(selectedValues).trigger('change');
            }
        });

        $('.editSelect').select2({
            placeholder: "Select documents",
            allowClear: true
        });

        $('.editAdditionalSelect').each(function() {//additional document
            let selectedValues = $(this).data('seleted');
            console.log('selectedValuesAdditional', selectedValues);
            if (selectedValues) {
                selectedValues = Array.isArray(selectedValues) ? selectedValues : [selectedValues];
                $(this).val(selectedValues).trigger('change');
            }
        });

        $('.editAdditionalSelect').select2({
            placeholder: "Select additional documents",
            allowClear: true
        });
        
        

        $(document).on('click', '.removeButton2', function() {
            var row = $(this).closest('.row');
            var id = row.data('id');
            var deletedIds = $('#deleted_ids').val();
            if (deletedIds) {
                deletedIds += ',' + id; 
            } else {
                deletedIds = id;
            }
            $('#deleted_ids').val(deletedIds);
            row.remove();
        });
    });
</script>
<script>
	var isEditMode = {{ isset($d_id) && $d_id ? 'true' : 'false' }};
$(document).ready(function () {
    $('.doc-type-select').on('change', function () {
        let selectedOption = $(this).find('option:selected');
        let rawData = selectedOption.attr('data-sub');

        let subcategories = [];

        try {
            subcategories = JSON.parse(rawData);
        } catch (e) {
            console.error("Failed to parse subcategory data:", e);
        }

        const wrapper = $(this).closest('.form-group').next('.subcategory-wrapper');
        wrapper.empty();

        if (Array.isArray(subcategories) && subcategories.length > 0) {
            // Set name based on mode
            const selectName = isEditMode ? 'edit_doc_type_id' : 'doc_type_id';
            const select = $(`<select class="form-control mt-2" name="${selectName}"></select>`);
            $.each(subcategories, function (i, sub) {
                select.append(`<option value="${sub.id}">${sub.category_name}</option>`);
            });
            wrapper.append(`<label class="d-block">Subcategory</label>`).append(select).show();
        } else {
            wrapper.hide();
        }
    });

    $('.doc-type-select').trigger('change');
});



</script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<style>
    .sortable-ghost {
  opacity: 0.4;
  background: #cce5ff;
}
</style>
<<script>
$(document).ready(function () {

   function initSelect2Sortable(selectId, hiddenInputId) {
    // Initialize Select2
    $('#' + selectId).select2({
        placeholder: "Select documents",
        width: 'resolve'
    });

    // Function to update hidden input
    function updateHiddenInput() {
        let reorderedTitles = [];

        // Get reordered text labels
        $('#' + selectId).next('.select2').find('li.select2-selection__choice').each(function () {
            const title = $(this).attr('title');
            if (title) reorderedTitles.push(title.trim());
        });

        let orderedValues = [];
        $('#' + selectId + ' option:selected').each(function () {
            const text = $(this).text().trim();
            const value = $(this).val();
            if (reorderedTitles.includes(text)) {
                orderedValues.push({ text, value });
            }
        });

        const valuesOnly = reorderedTitles.map(title => {
            const match = orderedValues.find(item => item.text === title);
            return match ? match.value : null;
        }).filter(Boolean);

        $('#' + hiddenInputId).val(valuesOnly.join(','));
    }

    // Wait for Select2 to render
    setTimeout(function () {
        const rendered = document.querySelector('#' + selectId + ' + .select2 .select2-selection__rendered');
        if (rendered) {
            Sortable.create(rendered, {
                animation: 150,
                ghostClass: 'sortable-ghost',
                onEnd: updateHiddenInput
            });
        }

        // Also update on change (add/remove)
        $('#' + selectId).on('change', updateHiddenInput);
    }, 300);
}

    // Initialize both select elements
    initSelect2Sortable('select_docs', 'shift_reorder');
    initSelect2Sortable('select_docsnew', 'shift_reordernew');
});
</script>
{{--
	 function initSelect2Sortable(selectId, hiddenInputId) {
        // Initialize Select2
        $('#' + selectId).select2({
            placeholder: "Select documents",
            width: 'resolve'
        });

        // Wait for Select2 to render
        setTimeout(function () {
            const rendered = document.querySelector('#' + selectId + ' + .select2 .select2-selection__rendered');
            if (rendered) {
                Sortable.create(rendered, {
                    animation: 150,
                    ghostClass: 'sortable-ghost',
                    onEnd: function () {
                        let reorderedTitles = [];

                        // Get reordered text labels
                        $('#' + selectId).next('.select2').find('li.select2-selection__choice').each(function () {
                            const title = $(this).attr('title');
                            if (title) reorderedTitles.push(title.trim());
                        });

                        let orderedValues = [];
                        $('#' + selectId + ' option:selected').each(function () {
                            const text = $(this).text().trim();
                            const value = $(this).val();
                            if (reorderedTitles.includes(text)) {
                                orderedValues.push({ text, value });
                            }
                        });

                        // Match values according to the reordered titles
                        const valuesOnly = reorderedTitles.map(title => {
                            const match = orderedValues.find(item => item.text === title);
                            return match ? match.value : null;
                        }).filter(Boolean);

                        // Set hidden input with the final order
                        $('#' + hiddenInputId).val(valuesOnly.join(','));
                    }
                });
            }
        }, 300);
    }--}}

@stop