@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 Documents For</h3>
                  </div>
                </div>
                <div class="card-body card">
                  <form role="form" enctype="multipart/form-data" method="POST" action="{{ route('admin.service.after-check-docs-submit', ['id' => $id]) }}" autocomplete="off">
                      @csrf
                      <input type="hidden" name="deleted_ids" id="deleted_ids" value="">                      
                      <div id="more_field">
                          @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));
                                        if($val['after_checkout_docs'] == null){
                                          $add_ids = explode(',', $val['document_ids']);
                                          $add_ids = array_values(array_filter($add_ids));
                                        }else{
                                          $add_ids = explode(',', $val['after_checkout_docs']);
                                          $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">
                                                    <label class="d-block">Service Select Documents</label>
                                                    <select class="js-example-basic-multiple select2-doc editAdditionalSelect w-100" name="edit_doc_add_id[]" disabled multiple="multiple" data-seleted="{{ 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">
                                                    <input type="hidden" value="{{$val['document_ids']}}" id="shift_reorder" name="shift_reorder" />
                                                    <label class="d-block">After Checkout Documents</label> 
                                                    <select id="select_docs" class="js-example-basic-multiple select2-doc editSelect w-100" name="edit_doc_id[]" multiple="multiple" data-selected="{{ 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));
                                        if($val['after_checkout_docs'] == null){
                                          $add_ids = explode(',', $val['document_ids']);
                                          $add_ids = array_values(array_filter($add_ids));
                                        }else{
                                          $add_ids = explode(',', $val['after_checkout_docs']);
                                          $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">
                                                    <label class="d-block">Service Select Documents</label>
                                                    <select class="js-example-basic-multiple select2-doc editAdditionalSelect w-100" name="edit_doc_add_id[]" disabled multiple="multiple" data-seleted="{{ 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">
                                                    <input type="hidden" value="{{$val['document_ids']}}" id="shift_reorder" name="shift_reorder" />
                                                    <label class="d-block">After Checkout Documents</label> 
                                                    <select id="select_docs" class="js-example-basic-multiple select2-doc editSelect w-100" name="edit_doc_id[]" multiple="multiple" data-selected="{{ 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 class="row">
                                          <div class="col-md-6">
                                            <div class="form-group">
                                              <label class="d-block">Signature(On Blank WHite Paper)</label> 
                                              <input type="checkbox" name="sign[]" id="926" value="926" @if(in_array("430", $ids)) checked @endif onChange="addSign()">
                                            </div>
                                          </div>
                                          <div class="col-md-6">
                                            <div class="form-group">
                                              <label class="d-block">Passport Size Photo</label> 
                                              <input type="checkbox" name="photo" id="922" value="922" @if(in_array("186", $ids)) checked @endif onChange="addPhoto()">
                                            </div>
                                          </div>
                                        </div>
                                    </div>
                                    
                                @endforeach
                            @endif
                          @endif
                      </div>
                      <div class="box-footer">
                          <button type="submit" class="btn btn-primary">Submit</button>
                      </div>
                  </form>
                </div>
            </div>
            <!-- /.box -->
        </div>
    </div>
@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');
        });
    });
    function addPhoto() {
      $('#' + 186).select2({
          placeholder: "Select documents",
          width: 'resolve'
      });
    }
    function addSign() {
      $('#' + 430).select2({
          placeholder: "Select documents",
          width: 'resolve'
      });
    }
</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>

@stop