@props(['id', 'name', 'dmenu', 'query', 'required' => false, 'class' => '', 'primaryField', 'value1Field' => null, 'value2Field' => null, 'editValue' => null, 'nullValue' => null, 'formGotAnyError' => false])

@php
    $defaultValue = '';
    if (old($name)) {
        $defaultValue = old($name);
    }
    if (!(old($name)) && $editValue) {
        $defaultValue = $editValue;
    }
@endphp

<input type="hidden" name="{{ $name }}"
    value="{{ $defaultValue }}"
    @if($required) required @endif
>

<div class="flex flex-col mb-2 input-group">
    <input type="text"
        data-bs-toggle="modal"
        data-bs-target="#searchModal{{ $name }}"
        id={{ $id }}
        class="form-control magang-cursor-pointer {{ $class }}"
        readonly
        style="background-color: initial !important"
        @if($required) required @endif
    >
    <span class="input-group-text bg-primary text-light"
        data-bs-toggle="modal"
        data-bs-target="#searchModal{{ $name }}"
        style="border-color:#d2d6da;border-left:3px solid #d2d6da;cursor: pointer;">
        <i class="fas fa-search"></i>
    </span>
</div>
<!-- Modal -->
<div class="modal fade" id="searchModal{{ $name }}" tabindex="-1"
    role="dialog" aria-labelledby="searchModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg"
        role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="searchModalLabel">
                    List Data
                </h5>
                <button type="button" class="btn-close"
                    data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            @if ($query != '')
                @php
                    $table_result = DB::select($query);
                    // dd($table_result);
                @endphp
            @endif
            <div class="modal-body table-responsive">
                <table class="table display"
                    id="list_{{ $dmenu }}_{{ $name }}">
                    @if ($table_result)
                        <thead class="thead-light"
                            style="background-color: #00b7bd4f;">
                            <tr>
                                <th width="20px">Action</th>
                                @foreach ($table_result as $result)
                                    @php
                                        $sAsArray = array_keys(
                                            (array) $result,
                                        );
                                    @endphp
                                @endforeach
                                @foreach ($sAsArray as $modal_h)
                                    <th>{{ $modal_h }}</th>
                                @endforeach
                            </tr>
                        </thead>
                        @php
                            if ($nullValue && $primaryField) {
                                $table_result_user_data = array_filter($table_result, function($data) use ($primaryField, $nullValue) {
                                    return $data->{$primaryField} == $nullValue;
                                });

                                $table_result_rest_data = array_filter($table_result, function($data) use ($primaryField, $nullValue) {
                                    return $data->{$primaryField} != $nullValue;
                                });

                                $table_result = array_merge($table_result_user_data, $table_result_rest_data);
                            }
                        @endphp
                        <tbody>
                            @foreach ($table_result as $modal_d)
                                <tr>
                                    @foreach ($table_result as $result)
                                        @php
                                            $field = array_keys(
                                                (array) $result,
                                            );
                                        @endphp
                                    @endforeach
                                    <td width="20px">
                                        <span
                                            class="btn badge bg-primary badge-lg text-white"
                                            onclick="select_modal_{{ $name }}('{{ $modal_d->{$primaryField} }}')">
                                            <i class="fas fa-check me-1"></i>
                                            Select
                                        </span>
                                    </td>
                                    @foreach ($field as $filter_field)
                                        @php
                                            $string = $filter_field;
                                        @endphp
                                        <td
                                            class="text-sm font-weight-normal">
                                            {{ $modal_d->$string }}
                                        </td>
                                    @endforeach
                                </tr>
                            @endforeach
                        </tbody>
                    @endif
                </table>
            </div>
        </div>
    </div>
</div>

<script>
    $('document').ready(function() {
        $('#list_{{ @$dmenu }}_{{ $name }}').DataTable();
    })
    
    let select_modal_{{ $name }} = (id) => {};

    let defaultValue = @json($defaultValue);
    let searchListData = @json($table_result) ?? [];
    let primaryField = @json($primaryField);
    let value1Field = @json($value1Field);
    let value2Field = @json($value2Field);   
    let nullValue = @json($nullValue);   
    let formGotAnyError = @json($formGotAnyError);

    let selectedData = defaultValue ? searchListData.find(data => data[primaryField] == defaultValue) : null;

    let displayValue = defaultValue ? formatDisplayValue(selectedData) : null;

    // console.log(defaultValue, selectedData, displayValue)

    select_modal_{{ $name }} = function(id) {
        selectedData = searchListData.find(data => data[primaryField] == id);
        // console.log('selectedData', selectedData);
        displayValue = formatDisplayValue(selectedData);
        $('input[name="{{ $name }}"]').val(id);
        $('#searchModal{{ $name }}').modal('hide');
    }

    function formatDisplayValue(data) {
        let str = (value1Field == null && value2Field == null) ? data[primaryField] : ((value1Field != null && value2Field != null) ?
                                                                                                                                    (data[value1Field] + ' - ' +  data[value2Field]) : ((value1Field != null) ?
                                                                                                                                                                                                            data[value1Field] : ("")
                                                                                                                                                                                                        )
                                                                                                );
        $('#{{ @$id }}').val(str);
        return str;
    }

    // Untuk kondisi null value
    if (!selectedData && nullValue) {
        selectedData = searchListData.find(data => data[primaryField] == nullValue);
        displayValue = formatDisplayValue(selectedData);
        $('input[name="{{ $name }}"]').val(nullValue);
    }

    $('input[name="{{ $name }}"]').change(function() {
        if (!selectedData && nullValue) {
            selectedData = searchListData.find(data => data[primaryField] == nullValue);
            displayValue = formatDisplayValue(selectedData);
            $('input[name="{{ $name }}"]').val(nullValue);
        }
    });

    // ============ Mengatur perilaku form di halaman SHOW ======================================= Start
    let viewOnlyState = false;
    const formEditButton = document.getElementById("{{ $dmenu }}-edit");

    // formEditButton hanya ada di halaman SHOW
    if (formEditButton && !formGotAnyError) {
        // Saat pertama kali masuk ke halaman SHOW
        viewOnlyState = true;
        $('#{{ @$id }}').css('background-color', '');
        $('#{{ @$id }}').addClass('magang-element-disabled');
        $('#{{ @$id }}').next().addClass('magang-element-disabled');
        // Sekali, saat masuk ke mode edit
        formEditButton.addEventListener('click', function() {
            viewOnlyState = false;
            $('#{{ @$id }}').css('background-color', 'initial !important');                            
            $('#{{ @$id }}').removeAttr('disabled');
            $('#{{ @$id }}').removeClass('magang-element-disabled');
            $('#{{ @$id }}').next().removeClass('magang-element-disabled');
        });
    }
    // ============ Mengatur perilaku form di halaman SHOW ======================================= End


</script>