@php
    $avatar = Util::linkFile('pas-photo', $summary->user->pas_photo);
@endphp

<style>
    table tr td {
        padding-bottom: 10px;
    }

    .img-preview {
        display: none;
        width: 200px;
        height: 120px;
        object-fit: cover;
        border: 1px solid #ccc;
        margin-bottom: 3px
    }
</style>

<div id="modal_summary" class="modal h-modal">
    <div class="modal-background"></div>
    <form id="form_summary">
        <input type="hidden" name="id" value="{{ $summary->id }}">
        <div class="modal-content">
            <div class="modal-card">
                <div class="modal-card-head">
                    <div class="fs-14 fw-700">Summary Return Worker: <strong>{{ $summary->user->name }}</strong></div>
                </div>
                <div class="modal-card-body">
                    <div class="inner-content mt-3">
                        <div class="placeholder-content has-text-centered">
                            <div class="h-avatar is-xl">
                                <img class="avatar" id="user_avatar" src="{{ $avatar }}">
                            </div>
                        </div>
                        <div class="columns is-multiline mt-5">
                            <div class="column is-12">
                                <table>
                                    <tr>
                                        <td style="width: 140px">Nama</td>
                                        <td style="padding-right:5px">:</td>
                                        <td>{{ $summary->user->name }}</td>
                                    </tr>
                                    <tr>
                                        <td>NIK/KITAS</td>
                                        <td style="padding-right:5px">:</td>
                                        <td>{{ $summary->user->nik }}</td>
                                    </tr>
                                    <tr>
                                        <td>Position</td>
                                        <td style="padding-right:5px">:</td>
                                        <td>{{ $summary->user->position }}</td>
                                    </tr>
                                    <tr>
                                        <td>Start Duty</td>
                                        <td style="padding-right:5px">:</td>
                                        <td>{{ date('d F Y H:i', strtotime($summary->historyDuty->start_duty)) }}</td>
                                    </tr>
                                    <tr>
                                        <td>Expected End Duty</td>
                                        <td style="padding-right:5px">:</td>
                                        <td>{{ date('d F Y H:i', strtotime($summary->historyDuty->end_duty)) }}</td>
                                    </tr>
                                    <tr>
                                        <td>Actual End Duty</td>
                                        <td style="padding-right:5px">:</td>
                                        <td>{{ date('d F Y H:i', strtotime($summary->historyDuty->actual_date)) }}</td>
                                    </tr>
                                    <tr>
                                        <td>Reason</td>
                                        <td style="padding-right:5px">:</td>
                                        <td>{{ $summary->reason->reason ?? $summary->other_reason }}</td>
                                    </tr>
                                    <tr>
                                        <td>Noted</td>
                                        <td style="padding-right:5px">:</td>
                                        <td>{{ $summary->additional_information ?? '-' }}</td>
                                    </tr>
                                    <tr>
                                        <td>Document</td>
                                        <td style="padding-right:5px">:</td>
                                    </tr>
                                </table>
                            </div>
                            @if (count($summary->document) > 0)
                                @foreach ($summary->document as $item)
                                    <div class="column is-12" data-file="{{ $item->file_name }}"
                                        style="display: flex; align-items: center;">
                                        <div class="s-card"
                                            style="height: 40px; display: flex; align-items: center; width: 100%;">
                                            <div class="pre-meta pt-1 mr-3">
                                                <img src="{{ asset('assets/img/icons/icon-pdf.png') }}"
                                                    style="height: 30px">
                                            </div>
                                            <div class="pre-meta pt-1" style="flex: 1;">{{ $item->file_name }}.pdf
                                            </div>
                                            @include('components.button.button-download-file', [
                                                'employee_id' => $summary->user_id,
                                                'file' => $item->file_hash_name,
                                                'sub_folder' => 'document-return-worker',
                                            ])
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                            @php
                                $canUpload =
                                    Auth::user()->hasRole('super_admin') ||
                                    (Auth::user()->hasRole('admin_contractor') && $summary->editable == 1);
                            @endphp

                            @if ($canUpload)
                                <div class="column is-12">
                                    <div class="file is-boxed document_return_worker">
                                        <label class="file-label">
                                            <input class="file-input" id="document_return_worker" type="file"
                                                name="document_return_worker[]" multiple>
                                            <span class="file-cta">
                                                <span class="file-icon" style="margin-top: 40px">
                                                    <i class="lnil lnil-32 lnil-cloud-upload"></i>
                                                </span>
                                                <span class="file-label">
                                                    Click here to upload document
                                                </span>
                                            </span>
                                        </label>
                                    </div>
                                    <div id="preview-document_return_worker" class="file-preview"></div>
                                    <div class="invalid-feedback help" id="error_field_required"></div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
                @php
                    $canEdit =
                        Auth::user()->hasRole('super_admin') ||
                        (Auth::user()->hasRole('admin_contractor') && $summary->editable == 1);
                    $canCloseOnly =
                        Auth::user()->hasRole(['doctor', 'contract_user']) ||
                        (Auth::user()->hasRole('admin_contractor') && $summary->editable==0);
                @endphp

                <div class="modal-card-foot is-centered" style="border: none !important">
                    <a class="button h-button h-modal-close">
                        {{ $canEdit ? __('app.cancel') : 'Close' }}
                    </a>

                    @if ($canEdit)
                        <button type="submit" form="form_summary" id="btn_submit_summary"
                            class="button h-button is-warning is-raised">
                            @lang('app.save')
                        </button>
                    @endif
                </div>
            </div>
        </div>
    </form>
</div>
<script>
    function submitSummary() {
        $('#btn_submit_summary').removeClass('is-loading')

        $.validator.addMethod(
            "fileSize",
            function(value, element, param) {
                const files = element.files;
                for (let i = 0; i < files.length; i++) {
                    const fileSize = files[i].size;
                    if (fileSize > param) {
                        return false;
                    }
                }
                return true;
            },
            "Each file size must not exceed 2MB."
        );

        $.validator.addMethod(
            "fileExtension",
            function(value, element, param) {
                const validExtensions = param.split(",");
                const files = element.files;
                for (let i = 0; i < files.length; i++) {
                    const fileName = files[i].name.toLowerCase();
                    const fileExtension = fileName.split(".").pop();
                    if (!validExtensions.includes(fileExtension)) {
                        return false;
                    }
                }
                return true;
            },
            "Please upload valid files (pdf)."
        );

        $("#form_summary").validate({
            rules: {
                "document_return_worker[]": {
                    required: {{ $summary->is_required_document == 1 ? 'true' : 'false' }},
                    fileExtension: 'pdf',
                    fileSize: 2097152
                },
            },
            messages: {
                "document_return_worker[]": {
                    required: "Document field is required.",
                    fileExtension: "Only PDF files are allowed.",
                    fileSize: "The document must be less than 2MB."
                },
            },
            errorClass: 'invalid-feedback help text-danger',
            errorElement: 'div',
            errorPlacement: function(error, element) {
                if (element.is("input[type='file']")) {
                    error.insertAfter(element.closest('.file.is-boxed'));
                } else {
                    error.insertAfter(element);
                }
            },
            highlight: function(element) {
                if ($(element).is("input[type='file']")) {
                    $(element).closest('.file.is-boxed').find('.file-cta').addClass('is-invalid');
                } else {
                    $(element).addClass('is-danger');
                }
            },
            unhighlight: function(element) {
                if ($(element).is("input[type='file']")) {
                    $(element).closest('.file.is-boxed').find('.file-cta').removeClass('is-invalid');
                } else {
                    $(element).removeClass('is-danger');
                }
            },
            submitHandler: function(form) {

                $('#btn_submit_summary').addClass('is-loading');

                let formData = new FormData(form);

                var documents = $('#document_return_worker')[0].files;

                $.each(documents, function(i, file) {
                    formData.append('document_return_worker[]', file);
                });

                $.ajax({
                    url: '{{ route('return-worker.upload-document') }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    beforeSend: function() {
                        $("#btn_submit_summary").prop('disabled', true);
                    },
                    success: function(res) {
                        $("#btn_submit_summary").prop('disabled', false).removeClass(
                            'is-loading');

                        if (res.status) {
                            form.reset();
                            $('#modal_summary').removeClass('is-active');
                            showNotification('primary', 'Success', res.message);
                            getDataReturnWorker()
                        } else {
                            showNotification('danger', 'Failed', res.message);
                        }
                    },
                    error: function(xhr) {
                        $("#btn_submit_summary").prop('disabled', false).removeClass(
                            'is-loading');

                        if (xhr.status === 422) {
                            $('.invalid-feedback').remove();
                            let errors = xhr.responseJSON.errors;

                            for (let field in errors) {
                                let errorMessage = errors[field][0];
                                let fieldElement = $(`[name="${field}"]`);
                                if (fieldElement.length) {
                                    fieldElement.after(
                                        `<span id="${field}-error" class="invalid-feedback help text-danger">${errorMessage}</span>`
                                    );
                                }
                            }
                        } else {
                            showNotification('danger', 'Failed',
                                'An unexpected error occurred. Please try again.');
                        }
                    }
                });
            }
        });
    }

    $('.download-document').each(function() {
        const url = $(this).data('url')
        console.log(url);

    })

    $(document).ready(function() {
        $('#modal_summary .modal-background').click(function(event) {
            event.stopPropagation();
        });

        $('.h-modal-close').click(function() {
            $('#modal_summary').removeClass('is-active');
            $("#btn_submit_summary")
                .removeClass('is-loading')
                .prop('disabled', false);
            $('.invalid-feedback').remove();
            $('input').removeClass('is-danger')
        });

        $('.file-input').each(function() {
            const id = $(this).attr('id');
            const previewId = `preview-${id}`;
            multipleUpload(id, previewId, true);
        });

        submitSummary();
    });
</script>