@php
    $table_id = isset($table_id) ? $table_id : uniqid(); //rand(1,100);
    $surveys = $surveys ?? [];
    $dom = $dom ?? 't';
    $all = strpos($dom, 'f');
    $status_class = [
        'organize' => 'bg-secondary',
        'organized' => 'bg-primary',
        'completed' => 'bg-success',
    ];
@endphp

<table class="table table-bordered table-striped table-hover display responsive nowrap" width="100%" id="surveys_table_{{ $table_id }}">
    <thead>
        <tr>
            <th data-key="survey_number">Felmérésszám</th>
            <th data-key="status">Státusz</th>
            <th data-key="start_date">Kezdete</th>
            <th data-key="end_date">Vége</th>
            <th data-key="description">Leírás</th>
            <th data-key="action" data-priority="1"></th>
        </tr>
    </thead>
    <tbody>
        @foreach ($surveys as $_survey)
        <tr>
            <td>{{ $_survey->survey_number }}</td>
            <td>
                <span class="badge rounded-pill {{ $status_class[$_survey->status] }}">
                    {{ $_survey->status_lang }}
                </span>
            </td>
            <td>{{ $_survey->start_date }}</td>
            <td>{{ $_survey->end_date }}</td>
            <td>
                <div style="position:relative;cursor:pointer;" 
                    data-content="{{ $_survey->description }}" 
                    onmouseover="window.popoverClick($(this),true)" 
                    onmouseout="window.popoverClick($(this),false)">{{ mb_substr($_survey->description ?? '', 0, 10) }}...</div>
            </td>
            <td>
                @if($_survey->status == 'organized')
                    <button type="button" class="btn btn-primary btn-label mx-auto"
                        data-bs-toggle="modal" data-bs-target="#surveyUploadModal" data-id="{{ $_survey->id }}"
                        data-type="survey"
                        >
                        <i class="fas fa-file-upload"></i>
                    </button>
                @endif
            </td>
        </tr>
        @endforeach
    </tbody>
</table>

@push('scripts')
<script>
    var surveys_table_{{ $table_id }} = $('#surveys_table_{{ $table_id }}').DataTable({
        dom: '{{ $dom }}',
        autoWidth: false,
        {{ ( $all ? 'iDisplayLength: -1,' : '' ) }}
    });

    surveys_table_{{ $table_id }}.on( 'init.dt', function () {
        window.dt_col_resize('#surveys_table_{{ $table_id }}');
    });

    var surveyUploadModal = document.getElementById('surveyUploadModal')
        surveyUploadModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget

        // var id = button.getAttribute('data-id')
        // var modalId = surveyUploadModal.querySelector('[name="target_id"]');
        // modalId.value = id

        // var type = button.getAttribute('data-type')
        // var documentType = surveyUploadModal.querySelector('[name="type"]');
        // documentType.value = type

        var id = button.getAttribute('data-id')
        var modalId = surveyUploadModal.querySelector('[name="survey_id"]');
        modalId.value = id
    })
</script>
@endpush

{{-- <!-- Modal -->
<div class="modal fade" id="surveyUploadModal" tabindex="-1" aria-labelledby="surveyUploadModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="surveyUploadModalLabel">Felmérés eredményének feltöltése</h5>
        {{-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> - -}}

        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </div>
      <div class="modal-body">
        <form method="POST" id="surveyUpload" enctype="multipart/form-data"> @csrf
            <div class="form-group">
                <label for="description">{!! __('Leírás') !!}</label>
                <textarea class="form-control" id="description" name="description" rows="2"></textarea>
            </div>

            <div class="form-group">
                <label for="file">{!! __('Fájl') !!}</label>
                <input type="file" class="form-control" id="file" name="file" style="height: auto !important" />
            </div>

            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="1" name="send_email" id="send_email" disabled>
                <label class="form-check-label" for="send_email">
                    Kiküldés e-mailben
                </label>
            </div>

            <input type="hidden" name="type" value="survey">
            <input type="hidden" name="target_type" value="App\Models\Offer">
            <input type="hidden" name="target_id" value="{{ $offer->id }}">
            <input type="hidden" name="survey_id" value="">
            <input type="hidden" name="overwrite" value="false">
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Mégse</button>
        <button type="submit" class="btn btn-primary" form="surveyUpload" name="file_upload" value="true">Küld</button>
      </div>
    </div>
  </div>
</div> --}}