{{-- 
    Reusable field input partial for trdmns add/edit views.
    Variables: $header, $primary, $generateid, $dmenu, $mode ('add'|'edit'), $list (only for edit)
--}}
@php
    $fieldValue = ($mode === 'edit' && isset($list)) ? $list->{$header->field} : (old($header->field) ? old($header->field) : $header->default);
    $isEdit = ($mode === 'edit');
@endphp

{{-- display label alias on type field not hidden --}}
@if ($header->type != 'hidden')
    <label for="example-text-input" class="form-control-label"
        @if(!$isEdit)
            {{ $primary ? ($generateid ? ' style=display:none;' : '') : '' }}
        @endif
    >{{ $header->alias }}</label>
@endif

{{-- field type char and string --}}
@if ($header->type == 'char' || $header->type == 'string')
    @if ($isEdit && $primary)
        <br>
        <span style="margin: 10px;" class="form-control-label">{{ $fieldValue }}</span>
    @endif
    <input class="form-control {{ $header->class }}"
        @if($isEdit)
            {{ $primary ? ' key=true type=hidden' : ' type=text' }}
        @else
            {{ $primary ? ($generateid ? ' key=true type=hidden' : ' type=text') : ' type=text' }}
        @endif
        value="{{ $fieldValue }}"
        name="{{ $header->field }}"
        maxlength="{{ $header->length }}">
    @if ($header->note != '')
        <p class='text-secondary text-xs pt-1 px-1'>{{ '*) ' . $header->note }}</p>
    @endif

{{-- field type email --}}
@elseif ($header->type == 'email')
    @if ($isEdit && $primary)
        <br>
        <span style="margin: 10px;" class="form-control-label">{{ $fieldValue }}</span>
    @endif
    <input class="form-control {{ $header->class }}"
        @if($isEdit)
            {{ $primary ? ' key=true type=hidden' : ' type=email' }}
        @else
            {{ $primary ? ($generateid ? ' key=true type=hidden' : ' type=email') : ' type=email' }}
        @endif
        value="{{ $fieldValue }}"
        name="{{ $header->field }}"
        maxlength="{{ $header->length }}">
    @if ($header->note != '')
        <p class='text-secondary text-xs pt-1 px-1'>{{ '*) ' . $header->note }}</p>
    @endif

{{-- field type richeditor --}}
@elseif ($header->type == 'richeditor')
    <div id="quill-editor-{{ $header->field }}" style="height: auto;"></div>
    <textarea name="{{ $header->field }}" id="quill-editor-area-{{ $header->field }}" class="d-none">@if($isEdit && isset($list)){!! $list->{$header->field} !!}@else{{ old($header->field) }}@endif</textarea>

    @if($header->note != '')
        <p class="text-secondary text-xs pt-1 px-1">{{ '*)' . $header->note }}</p>
    @endif

    <script>
        // Ensure CSRF token is only declared once
        if (!window.csrfToken) {
            window.csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        }

        // Image upload handler
        function imageHandler(quill, textareaId) {
            const input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('accept', 'image/*');

            input.addEventListener('change', async function() {
                if (input.files && input.files[0]) {
                    const file = input.files[0];
                    const formData = new FormData();
                    formData.append('image', file);

                    try {
                        const res = await fetch('/msjcareer/upload-image', {
                            method: 'POST',
                            headers: { 'X-CSRF-TOKEN': window.csrfToken },
                            body: formData
                        });

                        if (!res.ok) throw new Error('Upload failed');

                        const data = await res.json();
                        const range = quill.getSelection(true);
                        quill.insertEmbed(range.index, 'image', data.url);
                        quill.setSelection(range.index + 1);
                    } catch (error) {
                        console.error('Error uploading image:', error);
                        alert('Failed to upload image. Please try again.');
                    }
                }
            });

            input.click();
        }

        // Initialize Quill editor
        (function() {
            const editorId = 'quill-editor-{{ $header->field }}';
            const textareaId = 'quill-editor-area-{{ $header->field }}';
            const quill = new Quill(`#${editorId}`, {
                theme: 'snow',
                modules: {
                    toolbar: {
                        container: [
                            [{ 'align': [] }],
                            ['bold', 'italic', 'underline', 'strike'],
                            ['blockquote', 'code-block'],
                            [{ 'header': [1, 2, 3, false] }],
                            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                            ['link', 'image'],
                            ['clean']
                        ],
                        handlers: {
                            image: function() {
                                imageHandler(quill, textareaId);
                            }
                        }
                    }
                }
            });

            window.quillEditors = window.quillEditors || {};
            window.quillEditors['{{ $header->field }}'] = quill;

            @if($isEdit && isset($list))
                // Load existing content for edit mode
                quill.root.innerHTML = document.getElementById(textareaId).value;
            @endif

            // Update textarea on content change
            quill.on('text-change', function() {
                document.getElementById(textareaId).value = quill.root.innerHTML;
            });
        })();
    </script>

{{-- field type text --}}
@elseif ($header->type == 'text')
    <textarea class="form-control {{ $header->class }}" name="{{ $header->field }}"
        maxlength="{{ $header->length }}">{{ $fieldValue }}</textarea>
    @if ($header->note != '')
        <p class='text-secondary text-xs pt-1 px-1'>{{ '*) ' . $header->note }}</p>
    @endif

{{-- field type number --}}
@elseif ($header->type == 'number')
    <input class="form-control {{ $header->class }}"
        @if($isEdit)
            {{ $primary ? ' key=true type=hidden' : ' type=number' }}
        @else
            {{ $primary ? ($generateid ? ' key=true type=hidden' : ' type=number') : ' type=number' }}
        @endif
        value="{{ $fieldValue }}"
        name="{{ $header->field }}" max="{{ $header->length }}">
    @if ($header->note != '')
        <p class='text-secondary text-xs pt-1 px-1'>{{ '*) ' . $header->note }}</p>
    @endif

{{-- field type currency --}}
@elseif ($header->type == 'currency')
    <input class="form-control {{ $header->class }}"
        @if($isEdit)
            {{ $primary ? ' key=true type=hidden' : ' type=number' }}
        @else
            {{ $primary ? ($generateid ? ' key=true type=hidden' : ' type=number') : ' type=number' }}
        @endif
        value="{{ $fieldValue }}"
        name="{{ $header->field }}" max="{{ $header->length }}">
    @if ($header->note != '')
        <p class='text-secondary text-xs pt-1 px-1'>{{ '*) ' . $header->note }}</p>
    @endif

{{-- field type file --}}
@elseif ($header->type == 'file')
    @if ($isEdit && isset($list) && $list->{$header->field})
        <div class="mb-2">
            <a target="_blank" class="btn btn-sm btn-outline-success mb-0 py-1 px-2"
                href="{{ asset('/storage/' . $list->{$header->field}) }}">
                <i class="fas fa-file-lines text-lg"></i> File saat ini
            </a>
        </div>
    @endif
    <input class="form-control {{ $header->class }}" type="file"
        value="{{ old($header->field) }}" name="{{ $header->field }}">
    <p class='text-primary text-xs pt-3 mb-0'>Maksimal Size : <b>{{ $header->length }} KB</b></p>
    @if ($header->note != '')
        <p class='text-primary text-xs pt-1'>{{ $header->note }}</p>
    @else
        <p class='text-primary text-xs pt-1'>Format File : <b>jpg,png</b></p>
    @endif

{{-- field type search --}}
@elseif ($header->type == 'search')
    <div class="flex flex-col mb-2 input-group">
        <input
            @if($isEdit)
                {{ $primary ? ' key=true type=hidden' : ' type=text' }}
            @else
                {{ $primary ? ($generateid ? ' key=true type=hidden' : ' type=text') : ' type=text' }}
            @endif
            name="{{ $header->field }}"
            class="form-control {{ $header->class }}"
            value="{{ $fieldValue }}">
        <span class="input-group-text bg-primary text-light"
            data-bs-toggle="modal"
            data-bs-target="#searchModal{{ $header->field }}"
            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{{ $header->field }}" 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 ($header->query != '')
                    @php $table_result = DB::select($header->query); @endphp
                @endif
                <div class="modal-body table-responsive">
                    <table class="table display" id="list_{{ $dmenu }}_{{ $header->field }}">
                        @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>
                            <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"
                                                onclick="select_modal{{ $header->field }}('{{ $modal_d->{$field[0]} }}')">
                                                <i class="bi bi-check-circle me-1"></i> Select
                                            </span>
                                        </td>
                                        @foreach ($field as $header_field)
                                            @php $string = $header_field; @endphp
                                            <td class="text-sm font-weight-normal">{{ $modal_d->$string }}</td>
                                        @endforeach
                                    </tr>
                                @endforeach
                            </tbody>
                        @endif
                    </table>
                </div>
            </div>
        </div>
    </div>
    @if ($header->note != '')
        <p class='text-secondary text-xs pt-1 px-1'>{{ '*) ' . $header->note }}</p>
    @endif
    <script>
        $('document').ready(function() {
            $('#list_{{ @$dmenu }}_{{ $header->field }}').DataTable();
        })
        function select_modal{{ $header->field }}(id, name) {
            $('input[name="{{ $header->field }}"]').val(id);
            $('#searchModal{{ $header->field }}').modal('hide');
        }
    </script>

{{-- field type image --}}
@elseif ($header->type == 'image')
    <div class="col-sm-auto">
        <div class="position-relative">
            <div>
                <label for="file-input" style="left: -5px !important;"
                    id="{{ $header->field }}edit"
                    class="btn btn-xxl btn-icon-only bg-gradient-primary position-absolute bottom-0 mb-n2">
                    <i class="fa fa-pen top-0" data-bs-toggle="tooltip" data-bs-placement="top"
                        aria-hidden="true" data-bs-original-title="Edit Image" aria-label="Edit Image"></i>
                    <span class="sr-only">Edit Image</span>
                </label>
                <span class="h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                    @if ($isEdit && isset($list) && $list->{$header->field})
                        <img src="{{ asset('/storage/' . $list->{$header->field}) }}"
                            id="{{ $header->field }}preview" alt="image"
                            class="w-30 border-radius-lg shadow-sm">
                    @else
                        <img src="{{ asset('/storage/noimage.png') }}"
                            id="{{ $header->field }}preview" alt="image"
                            class="w-30 border-radius-lg shadow-sm">
                    @endif
                </span>
            </div>
        </div>
    </div>
    <input class="form-control {{ $header->class }}" type="file"
        value="{{ old($header->field) }}" id="{{ $header->field }}"
        name="{{ $header->field }}" style="display: none;">
    <p class='text-primary text-xs pt-3 mb-0'>Maksimal Size : <b>{{ $header->length }} KB</b></p>
    @if ($header->note != '')
        <p class='text-primary text-xs pt-1'>{{ $header->note }}</p>
    @else
        <p class='text-primary text-xs pt-1'>Format Image : <b>PNG,JPG,JPEG</b></p>
    @endif
    <script>
        {{ $header->field }}.onchange = evt => {
            const [file] = {{ $header->field }}.files
            if (file) {
                {{ $header->field . 'preview' }}.src = URL.createObjectURL(file)
            }
        }
        $('#{{ $header->field }}edit').click(function() {
            $('input[name="{{ $header->field }}"]').click();
        });
    </script>

{{-- field type multifoto --}}
@elseif ($header->type == 'multifoto')
    @if ($isEdit)
        @include('components.multifoto-edit', [
            'field' => $header->field,
            'existingPhotos' => isset($list) && $list->{$header->field} ? json_decode($list->{$header->field}, true) : []
        ])
    @else
        @include('components.multifoto-upload', ['field' => $header->field])
    @endif
    @if ($header->note != '')
        <p class='text-secondary text-xs pt-1 px-1'>{{ '*) ' . $header->note }}</p>
    @endif

{{-- field type video --}}
@elseif ($header->type == 'video')
    @if ($isEdit)
        @include('components.video-edit', [
            'field' => $header->field,
            'existingVideo' => isset($list) ? $list->{$header->field} : null,
            'maxSize' => $header->length / 1024
        ])
    @else
        @include('components.video-upload', [
            'field' => $header->field,
            'maxSize' => $header->length / 1024
        ])
    @endif
    @if ($header->note != '')
        <p class='text-secondary text-xs pt-1 px-1'>{{ '*) ' . $header->note }}</p>
    @endif

{{-- field type password --}}
@elseif ($header->type == 'password')
    @if ($isEdit)
        <input class="form-control {{ $header->class }}" type="password"
            value="" name="{{ $header->field }}" max="{{ $header->length }}"
            placeholder="Kosongkan jika tidak ingin mengubah password">
    @else
        <input class="form-control {{ $header->class }}" type="hidden"
            value="{{ $header->default }}" name="{{ $header->field }}" max="{{ $header->length }}">
        <p class='text-primary text-xs pt-1'>Default Password : <b>{{ $header->default }}</b></p>
    @endif

{{-- field type date --}}
@elseif ($header->type == 'date')
    <input class="form-control {{ $header->class }}"
        @if($isEdit)
            {{ $primary ? ' key=true type=hidden' : ' type=date' }}
        @else
            {{ $primary ? ($generateid ? ' key=true type=hidden' : ' type=date') : ' type=date' }}
        @endif
        value="{{ $isEdit && isset($list) ? $list->{$header->field} : old($header->field) }}"
        name="{{ $header->field }}">
    @if ($header->note != '')
        <p class='text-secondary text-xs pt-1 px-1'>{{ '*) ' . $header->note }}</p>
    @endif

{{-- field type hidden --}}
@elseif ($header->type == 'hidden')
    <input class="form-control {{ $header->class }}" type="hidden"
        value="{{ $isEdit && isset($list) ? $list->{$header->field} : $header->default }}"
        name="{{ $header->field }}" max="{{ $header->length }}">

{{-- field type enum --}}
@elseif ($header->type == 'enum')
    <select class="form-select {{ $header->class }}"
        name="{{ $header->field }}{{ Str::contains($header->class, 'select-multiple') ? '[]' : '' }}">
        <option value=""></option>
        @if ($header->query != '')
            @php $data_query = DB::select($header->query); @endphp
            @foreach ($data_query as $q)
                @php $sAsArray = array_values((array) $q); @endphp
                <option value="{{ $sAsArray[0] }}"
                    where="{{ $header->sub != '' ? $sAsArray[2] : '' }}"
                    @if($isEdit && isset($list))
                        @if(Str::contains($header->class, 'select-multiple'))
                            {{ in_array($sAsArray[0], array_map('trim', explode(',', $list->{$header->field} ?? ''))) ? 'selected' : '' }}
                        @else
                            {{ $list->{$header->field} == $sAsArray[0] ? 'selected' : '' }}
                        @endif
                    @endif
                >
                    {{ $sAsArray[0] }} - {{ $sAsArray[1] }}
                </option>
            @endforeach
        @endif
    </select>
    @if ($header->sub != '')
        <script>
            $('select[name="{{ $header->field }}"] option').hide();
            $('select[name="{{ $header->field }}"] option[where="' + $('select[name="{{ $header->sub }}"]').val() + '"]').show();
            $('select[name="{{ $header->sub }}"]').change(function() {
                $('select[name="{{ $header->field }}"] option').hide();
                $('select[name="{{ $header->field }}"] option[where="' + $(this).val() + '"]').show();
            });
        </script>
    @endif
    @if ($header->note != '')
        <p class='text-secondary text-xs pt-1 px-1'>{{ '*) ' . $header->note }}</p>
    @endif
@endif

@error($header->field)
    <p class='text-danger text-xs pt-1'> {{ $message }} </p>
@enderror