{{-- 
    Reusable field show/view partial for trdmns show view.
    Variables: $header, $primary, $generateid, $dmenu, $list
--}}
@php
    $fieldValue = isset($list) ? $list->{$header->field} : '';
@endphp

@if ($header->type != 'hidden')
    <label for="example-text-input" class="form-control-label">{{ $header->alias }}</label>
@endif

{{-- field type char and string --}}
@if ($header->type == 'char' || $header->type == 'string')
    <input class="form-control {{ $header->primary == '1' ? ' bg-dark text-light' : '' }} {{ $header->class }}"
        type="text" disabled {{ $primary ? ' key=true' : '' }}
        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">{!! $fieldValue !!}</textarea>

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

    <script>
        if (!window.csrfToken) {
            window.csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        }

        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();
        }

        (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);
                            }
                        }
                    }
                }
            });

            const textarea = document.getElementById(textareaId);
            if (textarea.value) {
                quill.root.innerHTML = textarea.value;
            }

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

{{-- field type email --}}
@elseif ($header->type == 'email')
    <input class="form-control {{ $header->primary == '1' ? ' bg-dark text-light' : '' }} {{ $header->class }}"
        type="email" disabled {{ $primary ? ' key=true' : '' }}
        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 text --}}
@elseif ($header->type == 'text')
    <textarea class="form-control {{ $header->primary == '1' ? ' bg-dark text-light' : '' }} {{ $header->class }}"
        disabled 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->primary == '1' ? ' bg-dark text-light' : '' }} {{ $header->class }}"
        type="number" disabled {{ $primary ? ' key=true' : '' }}
        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->primary == '1' ? ' bg-dark text-light' : '' }} {{ $header->class }}"
        type="number" disabled {{ $primary ? ' key=true' : '' }}
        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 ($fieldValue)
        <div class="mb-2">
            <a target="_blank" class="btn btn-sm btn-outline-success mb-0 py-1 px-2"
                href="{{ asset('/storage/' . $fieldValue) }}">
                <i class="fas fa-file-lines text-lg"></i> {{ $header->alias }}
            </a>
        </div>
    @else
        <p class="text-muted">Tidak ada file</p>
    @endif

{{-- field type search --}}
@elseif ($header->type == 'search')
    <div class="flex flex-col mb-2 input-group">
        <input name="{{ $header->field }}"
            class="form-control {{ $header->primary == '1' ? ' bg-dark text-light' : '' }} {{ $header->class }}"
            type="text" disabled {{ $primary ? ' key=true' : '' }}
            value="{{ $fieldValue }}">
        <span class="input-group-text bg-primary text-light icon-modal-search"
            data-bs-toggle="modal" data-bs-target="#searchModal{{ $header->field }}"
            style="border-color:#d2d6da;border-left:3px solid #d2d6da;cursor: pointer;display:none;">
            <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 disabled">
                    <i class="fa fa-pen top-0" data-bs-toggle="tooltip" disabled 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">
                    <img src="{{ asset('/storage/' . $fieldValue) }}"
                        id="{{ $header->field }}preview" alt="image"
                        data-bs-toggle="modal" data-bs-target="#imageModal{{ $header->field }}"
                        class="w-30 border-radius-lg shadow-sm">
                </span>
            </div>
        </div>
    </div>
    <input class="form-control {{ $header->class }}" type="file"
        value="{{ $fieldValue }}" 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
    <!-- Modal -->
    <div class="modal fade" id="imageModal{{ $header->field }}" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Preview Image</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <img src="{{ asset('/storage/' . $fieldValue) }}" alt="image" class="w-100 border-radius-lg shadow-sm">
                </div>
                <div class="modal-footer"></div>
            </div>
        </div>
    </div>
    <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')
    @php
        $photos = $fieldValue ? json_decode($fieldValue, true) : [];
    @endphp
    @if(!empty($photos))
        <div class="row g-2">
            @foreach($photos as $idx => $photo)
                <div class="col-6 col-md-3">
                    <img src="{{ asset('storage/' . $photo) }}" 
                         class="img-fluid rounded" 
                         style="height: 150px; width: 100%; object-fit: cover; cursor: pointer;"
                         data-bs-toggle="modal"
                         data-bs-target="#galleryModal{{ $header->field }}{{ $idx }}">
                </div>
                <div class="modal fade" id="galleryModal{{ $header->field }}{{ $idx }}" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">{{ $header->alias }} - Foto {{ $idx + 1 }}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body text-center">
                                <img src="{{ asset('storage/' . $photo) }}" class="img-fluid">
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @else
        <p class="text-muted">Tidak ada foto</p>
    @endif

{{-- field type video --}}
@elseif ($header->type == 'video')
    @if ($fieldValue)
        @php
            $isEmbed = Str::contains($fieldValue, ['youtube.com', 'youtu.be', 'vimeo.com', 'http']);
        @endphp
        @if ($isEmbed)
            <div class="ratio ratio-16x9 mb-2">
                <iframe src="{{ $fieldValue }}" allowfullscreen></iframe>
            </div>
            <small class="text-muted">{{ $fieldValue }}</small>
        @else
            <video controls class="w-100 rounded" style="max-height: 400px;">
                <source src="{{ asset('storage/' . $fieldValue) }}" type="video/mp4">
                Browser Anda tidak mendukung video.
            </video>
        @endif
    @else
        <p class="text-muted">Tidak ada video</p>
    @endif

{{-- field type password --}}
@elseif ($header->type == 'password')
    <div class="flex flex-col mb-2 input-group pass">
        <input class="form-control {{ $header->class }}" disabled
            {{ $primary ? ' key=true type=hidden' : ($header->filter == '1' ? ' type=password' : ' type=hidden') }}
            value="{{ $list ? '' : $header->default }}"
            name="{{ $header->field }}" max="{{ $header->length }}">
        <span class="input-group-text" id="button-addon" style="border-color:#d2d6da;">
            <i class="fas fa-eye showpass" style="cursor: pointer;"></i>
        </span>
    </div>
    <p class='text-primary text-xs pt-1'>Default Password : <b>{{ $header->default }}</b></p>

{{-- field type date --}}
@elseif ($header->type == 'date')
    <input class="form-control {{ $header->primary == '1' ? ' bg-dark text-light' : '' }} {{ $header->class }}"
        type="date" disabled {{ $primary ? ' key=true' : '' }}
        value="{{ $fieldValue }}" 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="{{ $fieldValue }}" name="{{ $header->field }}" max="{{ $header->length }}">

{{-- field type enum --}}
@elseif ($header->type == 'enum')
    <select class="form-select {{ $header->class }}" disabled
        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(Str::contains($header->class, 'select-multiple'))
                        {{ in_array($sAsArray[0], array_map('trim', explode(',', $fieldValue ?? ''))) ? 'selected' : '' }}
                    @else
                        {{ $fieldValue == $sAsArray[0] ? 'selected' : '' }}
                    @endif
                >
                    {{ $sAsArray[0] }} - {{ $sAsArray[1] }}
                </option>
            @endforeach
        @endif
    </select>
    @if ($header->note != '')
        <p class='text-secondary text-xs pt-1 px-1'>{{ '*) ' . $header->note }}</p>
    @endif
@endif