@extends('app')
@section('content')
    @if (Session::has('flash_message'))
        <div class="alert {{ Session::has('flash_message_status') ? 'alert-error' : 'alert-success' }}"
            style="text-align: center;">
            <button class="close" data-dismiss="alert"></button>
            {!! Session::get('flash_message') !!}
        </div>
    @endif


    <div class="row">
        <div class="col-sm-12">
            <div class="grid simple vertical">

                <div class="grid-body no-border overflow-auto">
                    <div class='row control' style="margin-bottom: 10px; margin-top: 10px;  background-color: #fff;">

                        <div class="col-md-12 " style="text-align: center;">
                            <span class="bold" style="font-size: 20px;">المشاركين</span>
                        </div>
                    </div>

                    <div class="row">
                        {{-- Hidden inputs --}}
                        <input type="hidden" name="gender" id="gender_input" value="{{ $filters['gender'] ?? '' }}">

                        {{-- Preload images --}}
                        <div class="hidden">
                            <img src="{{ asset('assets/img/daleel/filters/FilterFemaleSelected.png') }}">
                            <img src="{{ asset('assets/img/daleel/filters/FilterMaleSelected.png') }}">
                        </div>

                        <div class="row daleel-detail-icon-container align-items-center">
                            <div class="col-sm-6 text-left">
                                <div class="pull-right markaction" style="margin-left:15px;margin-top:10px">

                                    @if (Auth::user()->can('familyappregisteration-edit'))
                                        <a href="javascript:void(0)" class="btn btn-primary btn-wider bulkExport"
                                            id="bulkExportBtn">
                                            تنزيل ملف Excel
                                        </a>
                                    @endif
                                    @if (Auth::user()->can('survey-destroy'))
                                        <a id="del" href="javascript:void(0)" class="btn btn-wider btn-danger"
                                            data-msg="هل أنت متأكد من الحذف؟"
                                            data-url="{{ route('admin.survey.responseBulkdelete') }}">حذف</a>
                                    @endif
                                </div>

                            </div>
                            {{-- RIGHT SIDE → Filters --}}
                            <div class="col-sm-6 col-xs-12 text-right">
                                <div class=" align-items-center"
                                    style="display:flex;justify-content:right;gap:40px;margin-right:20px;">

                                    {{-- Female --}}
                                    <div class="daleel-icon-box " style="cursor:pointer">
                                        <div class="icon-round {{ ($filters['gender'] ?? '') === 'F' ? 'active' : '' }}"
                                            onclick="toggleDaleelGender($(this))" id="icon-female" data-filter="Female">
                                            <img
                                                src="{{ ($filters['gender'] ?? '') === 'F'
                                                    ? asset('assets/img/daleel/filters/FilterFemaleSelected.png')
                                                    : asset('assets/img/daleel/filters/FilterFemale.png') }}">
                                        </div>
                                    </div>

                                    {{-- Male --}}
                                    <div class="daleel-icon-box"style="cursor:pointer">
                                        <div class="icon-round {{ ($filters['gender'] ?? '') === 'M' ? 'active' : '' }}"
                                            onclick="toggleDaleelGender($(this))" id="icon-male" data-filter="Male">
                                            <img
                                                src="{{ ($filters['gender'] ?? '') === 'M'
                                                    ? asset('assets/img/daleel/filters/FilterMaleSelected.png')
                                                    : asset('assets/img/daleel/filters/FilterMale.png') }}">
                                        </div>
                                    </div>
                                    <div style="align-content: center;">
                                        <a href="javascript:void(0)" class="btn btn-info btn-cons"
                                            style="margin-left:15px; background-color:#6f7b8a; border-color:#6f7b8a;"
                                            id="clear_filters">
                                            مسح
                                        </a>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <!-- Search input above the table -->
                    <div class="row mb-3" style="margin-top:10px;">
                        <div class="col-sm-12 text-left">
                            <input type="text" id="datatable-search" class="form-control" placeholder="ابحث هنا..."
                                style="max-width: 190px; display: inline-block;">
                        </div>
                    </div>
                    <table class="table table-hover w-100 dataTable" id="datatable-example">
                        <thead>
                            <tr>
                                <th width="2%">
                                    <input type="checkbox" class="group-checkable" />
                                </th>
                                <th width="5%">هوية شخصية</th>
                                <th width="10%">الاسم 1</th>
                                <th width="10%">الاسم 2</th>
                                <th width="10%">الاسم 3</th>
                                <th width="10%">الاسم 4</th>
                                <th width="15%">البلد</th>
                                <th width="15%">المدينة</th>
                                <th width="15%">تاريخ الإرسال</th>
                                <th></th>
                            </tr>
                        </thead>

                        <tbody>
                            @forelse ($responses as $response)
                                <tr>
                                    <td>
                                        <input type="checkbox" class="checkboxes" value="{{ $response->id }}"
                                            data-survey-id="{{ $response->survey_id }}">
                                    </td>
                                    <td>
                                        <span class="nodeid-text active-color"
                                            onclick="showDaleelProfilePopup({{ $response?->users?->id ?? 'null' }})">
                                            {{ $response->users->nodeID ?? '' }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="{{ $response->users->gender == 0 ? 'male-color' : 'female-color' }}">
                                            {{ $response->users->name ?? '-' }}
                                        </span>
                                    </td>
                                    <td>{{ $response->users->parent->name ?? '-' }}</td>
                                    <td>{{ $response->users->parent->parent->name ?? '-' }}</td>
                                    <td>{{ $response->users->parent->parent->parent->name ?? '-' }}</td>
                                    <td>{{ $response->users->city ?? '-' }}</td>
                                    <td>{{ $response->users->country ?? '-' }}</td>

                                    <td>{{ $response->created_at->format('d/m/Y H:i') }}</td>
                                    <td>
                                        <ul class="nav quick-section">
                                            <li class="quicklinks actions">
                                                <a class="context_menu_btn poll_custom_menu dropdown-toggle pull-right"
                                                    href="#" data-toggle="dropdown">
                                                    <i class="fa fa-gear"></i>
                                                </a>
                                                <ul aria-labelledby="user-options" role="menu"
                                                    class="dropdown-menu custom-listing-menu pull-right">
                                                    <li>
                                                        <a href="javascript:void(0)" class="view-survey-answers"
                                                            data-survey-id="{{ $response->survey_id }}"
                                                            data-user-id="{{ $response->users->id }}"
                                                            data-user="{{ $response->users->full_name_w_i() }}">
                                                            عرض الإجابات
                                                        </a>
                                                    </li>
                                                    @if (Auth::user()->can('survey-destroy'))
                                                        <li>
                                                            <form method="POST"
                                                                action="{{ route('admin.survey.destroyResponse', $response->id) }}"
                                                                class="inline deleteaction">
                                                                @csrf
                                                                @method('POST')

                                                                <button type="submit">
                                                                    حذف
                                                                </button>
                                                            </form>
                                                        </li>
                                                    @endif
                                                </ul>
                                            </li>
                                        </ul>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="10" class="text-center">لا يوجد محتوى</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>


                </div>
            </div>
        </div>
    </div>
    <form method="POST" action="{{ route('admin.survey.bulkexport') }}" class="inline" id="bulkExportForm">
        @csrf
        <input type="hidden" name="ids_export" id="ids_export" value="">
        <input type="hidden" name="export_survey_id" id="export_survey_id" value="">
    </form>
    <form method="POST" class="inline" id="bulkaction">
        @csrf
        <input type="hidden" name="ids" id="ids" value="">
    </form>
@endsection

@include('admin.survey.responseModal')

@section('page_script')
    <script type="text/javascript" language="javascript" class="init">
        let exportSurvey_id = null;
        $(document).ready(function() {
            $("#datatable-search").on("keyup", function() {
                var value = $(this).val().toLowerCase();
                var visibleRows = 0;

                $("#datatable-example tbody tr").each(function() {
                    var isMatch = $(this).text().toLowerCase().indexOf(value) > -1;
                    $(this).toggle(isMatch);

                    if (isMatch) visibleRows++;
                });

                // Remove any previous "no content" row
                $("#datatable-example tbody .no-result-row").remove();

                // If no rows match, show the message
                if (visibleRows === 0) {
                    $("#datatable-example tbody").append(`
                <tr class="no-result-row">
                    <td colspan="10" class="text-center">لا يوجد محتوى</td>
                </tr>
            `);
                }
            });
        });

        $(document).ready(function() {
            // Get survey_id from the first checkbox (all are the same)
            const firstCheckbox = $('.checkboxes').first();
            if (firstCheckbox.length) {
                exportSurvey_id = firstCheckbox.data('survey-id');
            }

        });

        $(document).on('click', '.view-survey-answers', function() {
            let surveyId = $(this).data('survey-id');
            let userId = $(this).data('user-id');
            let user = $(this).data('user');
            $('#surveyAnswersModal').modal('show');
            $('#survey-answers-content').html('<p class="text-center">Loading...</p>');

            $.ajax({
                url: `/admin/survey/answers`,
                type: 'GET',
                data: {
                    survey_id: surveyId,
                    user_id: userId
                },
                success: function(res) {
                    if (!res.status || res.data.length === 0) {
                        $('#survey-answers-content').html('<p>No data found</p>');
                        return;
                    }
                    let html = '';
                    res.data.forEach(q => {
                        q.response.forEach(a => {
                            let answerContent = '';
                            if (a.answer_type === 'rating') {
                                // Ensure answer is numeric 0-5
                                const rating = Math.min(Math.max(parseInt(a.answer) ||
                                    0, 0), 5);
                                let stars = '';
                                for (let i = 1; i <= 5; i++) {
                                    stars += i <= rating ? '★' : '☆';
                                }
                                // Optional: wrap in a span for styling
                                answerContent =
                                    `<span style="color: gold; font-size: 18px;">${stars}</span>`;
                            } else {
                                // Text answer
                                answerContent = a.answer ?? '-';
                            }
                            html += `
                <div style="
                    border: 1px solid #ccc;
                    border-radius: 10px;
                    padding: 15px;
                    margin-bottom: 15px;
                    text-align: right;
                    background-color: #f9f9f9;
                ">
                    <div style="font-weight: bold; margin-bottom: 8px; font-size: 16px;">
                        ${a.question}
                    </div>
                    <div style="font-size: 15px; color: #333;">
                        ${answerContent}
                    </div>
                </div>
            `;
                        });
                    });

                    $('#survey-answers-content').html(html);
                    $('#userInfo').html(user);
                },
                error: function() {
                    $('#survey-answers-content').html('<p>Error loading data</p>');
                }
            });
        });
        let deleteId = '';

        $(".bulkExport").click(function() {

            var ids = $('#datatable-example tbody :checkbox:checked').map(function() {
                return this.value;
            }).get();
            $("#export_survey_id").val(exportSurvey_id);

            if (ids.length > 0) {
                $("#ids_export").val(ids);
                $('#bulkExportForm').submit(); // ✅ submit the form
            } else {
                $('#bulkExportForm').submit();
            }
        });

        // ✅ Handle select all checkbox in header
        $(document).on("change", ".group-checkable", function() {
            var checked = $(this).is(":checked");

            // Toggle only visible checkboxes (DataTables paginated rows)
            $('#datatable-example tbody input.checkboxes[type="checkbox"]').prop("checked", checked);
        });

        // ✅ Sync header checkbox if a row is unchecked/checked manually
        $(document).on("change", "#datatable-example tbody input.checkboxes[type='checkbox']", function() {
            var total = $('#datatable-example tbody input.checkboxes[type="checkbox"]').length;
            var checked = $('#datatable-example tbody input.checkboxes[type="checkbox"]:checked').length;

            $(".group-checkable").prop("checked", total > 0 && total === checked);
        });

        function toggleDaleelGender(element) {
            var id = element.attr('id');
            var genderInput = $('#gender_input');

            if (id == 'icon-male') {
                $('#icon-female').removeClass('active');
                if ($('#icon-male').hasClass('active')) {
                    // Deselect Male
                    $('#icon-male').removeClass('active');
                    genderInput.val('');
                } else {
                    // Select Male
                    $('#icon-male').addClass('active');
                    genderInput.val('M');
                }
                $('#icon-female').find('img').prop('src', "{{ asset('assets/img/daleel/filters/FilterFemale.png') }}");
                $('#icon-male').find('img').prop('src', "{{ asset('assets/img/daleel/filters/FilterMaleSelected.png') }}");
            } else if (id == 'icon-female') {
                $('#icon-male').removeClass('active');
                if ($('#icon-female').hasClass('active')) {
                    // Deselect Female
                    $('#icon-female').removeClass('active');
                    genderInput.val('');
                } else {
                    // Select Female
                    $('#icon-female').addClass('active');
                    genderInput.val('F');
                }
                $('#icon-male').find('img').prop('src', "{{ asset('assets/img/daleel/filters/FilterMale.png') }}");
                $('#icon-female').find('img').prop('src',
                    "{{ asset('assets/img/daleel/filters/FilterFemaleSelected.png') }}");
            }

            // Apply filter immediately
            filterTableByGender();
        }

        function filterTableByGender() {
            var gender = $('#gender_input').val(); // 'M', 'F', or ''

            $('#datatable-example tbody tr').each(function() {
                var rowGender = $(this).find('td').eq(2).find('span').hasClass('male-color') ? 'M' : 'F';

                if (!gender || gender === rowGender) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        }

        $('#clear_filters').on('click', function() {
            // Clear selection
            $('#gender_input').val('');
            $('#datatable-search').val('');
            $('#icon-male, #icon-female').removeClass('active');
            $('#icon-male').find('img').prop('src', "{{ asset('assets/img/daleel/filters/FilterMale.png') }}");
            $('#icon-female').find('img').prop('src', "{{ asset('assets/img/daleel/filters/FilterFemale.png') }}");
            $('#datatable-example tbody .no-result-row').remove();
            // Show all rows
            $('#datatable-example tbody tr').show();
        });
    </script>
@endsection