@props(['documents'])
<div class="tw-flex rt-mb-32 lg:tw-mt-0 tw-items-center tw-justify-between">
    <h3 class="f-size-18 tw-flex-shrink-0 lh-1 m-0">Documents</h3>
    <div class="resume-item add-resume" id="addDocument" onclick="documentAddModal()">
        <div class="resume-icon">
            <x-svg.plus-icon />
        </div>
        <div>
            <h4 class="resume-title">Add Document</h4>
            <h6 class="resume-size">{{ __('browse_file_here_only') }} - pdf</h6>
        </div>
    </div>
</div>
<div class="db-job-card-table -tw-mx-2 tw-pb-16">
    <table class="tw-px-2">
        <thead>
            <tr>
                <th class="!tw-text-base !tw-font-medium">Document Type</th>
                <th class="!tw-text-base !tw-font-medium">Document</th>
                <th class="!tw-text-base !tw-font-medium tw-text-right">{{ __('action') }}</th>
            </tr>
        </thead>
        <tbody>
            @forelse ($documents as $document)
                <tr>
                    <td>{{ $document->doc_type }}</td>
                    <td>{{ $document->file_path }}</td>
                    <td>
                        <div class="d-flex justify-content-end">
                            <button type="button" class="btn btn-icon" id="dropdownMenuButton5"
                                data-bs-toggle="dropdown" aria-expanded="false">
                                <svg width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M12 13.125C12.6213 13.125 13.125 12.6213 13.125 12C13.125 11.3787 12.6213 10.875 12 10.875C11.3787 10.875 10.875 11.3787 10.875 12C10.875 12.6213 11.3787 13.125 12 13.125Z"
                                        fill="#767F8C" stroke="#767F8C" />
                                    <path
                                        d="M12 6.65039C12.6213 6.65039 13.125 6.14671 13.125 5.52539C13.125 4.90407 12.6213 4.40039 12 4.40039C11.3787 4.40039 10.875 4.90407 10.875 5.52539C10.875 6.14671 11.3787 6.65039 12 6.65039Z"
                                        fill="#767F8C" stroke="#767F8C" />
                                    <path
                                        d="M12 19.6094C12.6213 19.6094 13.125 19.1057 13.125 18.4844C13.125 17.8631 12.6213 17.3594 12 17.3594C11.3787 17.3594 10.875 17.8631 10.875 18.4844C10.875 19.1057 11.3787 19.6094 12 19.6094Z"
                                        fill="#767F8C" stroke="#767F8C" />
                                </svg>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end company-dashboard-dropdown"
                                aria-labelledby="dropdownMenuButton5">
                                <li>
                                    <a href="javascript:void(0)" class="dropdown-item" onclick="">
                                        <x-svg.edit-icon/>
                                        {{ __('edit') }}
                                    </a>
                                </li>
                                <li>
                                    <form method="POST" action="">
                                        @csrf
                                        @method('Delete')
                                        <button type="submit" class="dropdown-item" onclick="return confirm('{{ __('are_you_sure_you_want_to_delete_this_item') }}');">
                                            <x-svg.trash-icon/>
                                            {{ __('delete') }}
                                        </button>
                                    </form>
                                </li>
                            </ul>
                        </div>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="4" class="text-center">
                        <x-svg.not-found-icon />
                        <p class="mt-4">{{ __('no_data_found') }}</p>
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

{{-- Document add modal --}}
<div class="modal fade" id="addDocumentModal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('contact_details') }}</h5>
                <button type="button" class="close" onclick="closeAddResumeModal()" data-bs-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>{{ __('full_name') }}</label>
                    <input class="form-control" id="contact-modal-name" readonly>
                </div>
                <div class="form-group">
                    <label>{{ __('email') }}</label>
                    <input type="text" class="form-control" id="contact-modal-email" readonly>
                </div>
                <div class="form-group">
                    <label>{{ __('subject') }}</label>
                    <input type="text" class="form-control" id="contact-modal-subject" readonly>
                </div>
                <div class="form-group">
                    <label>{{ __('message') }}</label>
                    <textarea class="form-control" rows="3" id="contact-modal-message" readonly></textarea>
                </div>
            </div>
        </div>
    </div>
</div>

@push('frontend_links')
    <link rel="stylesheet" href="{{ asset('frontend') }}/assets/css/bootstrap-datepicker.min.css">
    <style>
        #addDocumentModal .modal-dialog,
        #addDocumentModal .modal-dialog {
            z-index: 999999 !important;
            max-width: 950px !important;
            padding: 20px;
        }
    </style>
@endpush

@push('script')
    <script src="{{ asset('backend/js/bootstrap.bundle.min.js') }}"></script>
    <script>

        function closeAddResumeModal() {
            $('#addDocumentModal').find('form')[0].reset();
            $('#addDocumentModal').modal('hide')
        }

        function closeEditResumeModal() {
            $('#addDocumentModal').find('form')[0].reset();
            $('#addDocumentModal').modal('hide')
        }

        function documentAddModal() {
            $("#addDocumentModal").modal("show");
        }
    </script>
@endpush
