@if(isset($filterType) && $filterType == 'A5')
    <div class="card-header d-flex justify-content-between align-items-center" id="cardHeaderSection">
        <a href="javascript:void(0);" id="downloadSurvey" class="btn btn-light btn-sm">Download Survey Excel</a>
        {{-- <form class="d-flex ms-auto" method="GET"
            action="{{ route('admin.rnrprojectsurvey.index', ['projectId' => encrypt($project->id)]) }}">
            <input type="text" name="pap_name" class="form-control me-2" placeholder="Occupant Name"
                value="{{ request()->query('pap_name') }}">

            <input type="hidden" name="filter_type" value="A5">
            <button type="submit" class="btn btn-light btn-sm">Search</button>
          <a href="{{ route('admin.rnrprojectsurvey.index', ['projectId' => encrypt($project->id)]) }}" class="btn btn-link">Reset</a>

        </form> --}}
    </div>
@endif

<div style="overflow-x: auto; width: 100%;">
    <h4 class="header-title mb-0 text-end float-end">
        Basic data of those working in commercial establishment
    </h4>
    <table id="basic-datatable" class="table table-striped dt-responsive nowrap w-100">
        <thead>
            <tr>
                <th>Sl. No.</th>
                <th>Map No.</th>
                <th>Identification No.</th>
                <th>Map Location</th>
                <th>Name of Employee's/Owner</th>
                <th>Age</th>
                <th>Literacy Status</th>
                <th>Class Attended</th>
                <th>Travel time from residence</th>
                <th>Monthly Turnover (In Rs.)</th>
                <th>Nature of Work</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>


            @foreach ($surveys as $key => $survey)

                @foreach ($survey->commercialEmployees as $employee)
                    <tr>
                        <td>{{ $key+1 }}</td>
                        <td>{{ $survey->map_id ?? 'N/A' }}</td>
                        <td>{{ $survey->structure_id ?? 'N/A' }}</td>
                        <td>{{ $survey->map_location ?? 'N/A' }}</td>

                        <td>{{ $employee->emp_name ?? 'N/A' }}</td>
                        <td>{{ is_numeric($employee->age) ? $employee->age : 'N/A' }}</td>
                        <td>{{ $employee->literacy_status ?? 'N/A' }}</td>
                        <td>{{ $employee->class_attended ?? 'N/A' }}</td>
                        <td>{{ $employee->travel_time_from_residence ?? 'N/A' }}</td>
                        <td>{{ $employee->monthlyRange->range ?? 'N/A' }}</td>

                        <td>{{ $employee->nature_of_work ?? 'N/A' }}</td>

                        <td>
                            <a href="{{ route('admin.projectsurveydetails.index', ['projectId' => encrypt($project->id), 'surveyId' => encrypt($survey->id)]) }}"
                                class="text-reset fs-16 px-1" data-bs-toggle="tooltip" data-bs-placement="top"
                                title="View Survey Project">
                                <i class="bi bi-eye-fill"></i>
                            </a>
                        </td>
                    </tr>
                @endforeach

            @endforeach

        </tbody>
    </table>

    {{-- Pagination --}}
    {{-- <div class="mt-3">
        {{ $surveys->links() }}
    </div> --}}

</div>

<!-- Pagination -->
{{-- <div class="mt-3 pagination-links">
    {{ $surveys->appends(request()->query())->links('pagination::bootstrap-5') }}
</div> --}}


<script>
    //Download excel file
    $(document).ready(function() {
        let activeFilter = $(".survey-button.active").data("filter"); // Get initially active filter
        let projectId = '{{ encrypt($project->id) ?? 0 }}'
        // Update active filter when a button is clicked
        $(".survey-button").click(function() {
            $(".survey-button").removeClass("active");
            $(this).addClass("active");
            activeFilter = $(this).data("filter");
        });

        $("#downloadSurvey").click(function() {
            $(this).text("Downloading...").prop("disabled", true);

            $.ajax({
                url: "{{ route('admin.export.survey') }}",
                type: "GET",
                data: {
                    filter: activeFilter,
                    projectId: projectId
                }, // Send active filter
                xhrFields: {
                    responseType: 'blob'
                },
                success: function(response) {
                    let blob = new Blob([response], {
                        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                    });
                    let link = document.createElement('a');
                    link.href = window.URL.createObjectURL(blob);
                    link.download = "project_survey.xlsx";
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                    $("#downloadSurvey").text("Download Survey Excel").prop("disabled",
                        false);
                },
                error: function(xhr, status, error) {
                    console.error("Error downloading the file:", error);
                    $("#downloadSurvey").text("Download Survey Excel").prop("disabled",
                        false);
                }
            });
        });
    });
</script>