@include('layouts.header', ['title' => isset($project) ? 'Project Survey Lists' : 'Add Project'])
<div class="wrapper">
    @include('layouts.navbar')
    @include('layouts.sidebar')

    <div class="content-page">
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">
                            <div class="page-title-right"></div>
                        </div>
                    </div>
                </div>

                @include('components.project-details', ['project' => $project])

                <!-- Survey Buttons -->
                <div class="d-flex flex-wrap gap-2 my-4">
                    <button class="btn btn-success survey-button active" data-filter="A1">A1</button>
                    <button class="btn btn-success survey-button" data-filter="A2">A2</button>
                    <button class="btn btn-success survey-button" data-filter="A3">A3</button>
                    <button class="btn btn-success survey-button" data-filter="A4">A4</button>
                    <button class="btn btn-success survey-button" data-filter="A5">A5</button>

                    <button class="btn btn-success survey-button" data-filter="B1">B1</button>
                    <button class="btn btn-success survey-button" data-filter="B2">B2</button>

                    <button class="btn btn-success survey-button" data-filter="B3">B3</button>
                    <button class="btn btn-success survey-button" data-filter="B4">B4</button>
                    <button class="btn btn-success survey-button" data-filter="B5">B5</button>
                    <button class="btn btn-success survey-button" data-filter="B6">B6</button>
                    <button class="btn btn-success survey-button" data-filter="B7">B7</button>
                    <button class="btn btn-success survey-button" data-filter="B8">B8</button>
                    <button class="btn btn-success survey-button" data-filter="B9">B9</button>
                    <button class="btn btn-success survey-button" data-filter="B10">B10</button>
                    <button class="btn btn-success survey-button" data-filter="B11">B11</button>
                    {{-- <button class="btn btn-success survey-button" data-filter="B12">B12</button> --}}
                    <button class="btn btn-success survey-button" data-filter="B13">B13</button>
                    <button class="btn btn-success survey-button" data-filter="B14">B14</button>

                    <button class="btn btn-success survey-button" data-filter="C1">C1</button>
                    <a href="javascript:void(0);" id="downloadAllSurvey" class="btn btn-info">Download All Survey Excel</a>
                </div>

                <!-- Dynamic Table Wrapper -->
                <div class="row">
                    <div class="col-md-12">


                        <div class="card">
                            <div class="card-body">
                                <div class="table-wrapper">
                                    {{-- Now includes header + table --}}
                                    @include($view, [
                                        'project' => $project,
                                        'surveys' => $surveys,
                                        'filterType' => $filterType ?? null,
                                        'structureCounts' => $structureCounts ?? null,
                                        'totalStructures' => $totalStructures ?? null,
                                        'totalHouseholds' => $totalHouseholds ?? null,
                                        'durationData' => $durationData ?? null,
                                        'religionData' => $religionData ?? null,
                                        'motherTongueData' => $motherTongueData ?? null,
                                        'structureHolderData' => $structureHolderData ?? null,
                                        'casteData' => $casteData ?? null,
                                        'totalEstablishments' => $totalEstablishments ?? null,
                                        'typeData' => $typeData ?? null,
                                        'structuredData' => $structuredData ?? null,
                                        'totalCounts' => $totalCounts ?? null,
                                        'rangeCounts' => $rangeCounts ?? null,
                                        'incomeData' => $incomeData ?? null,
                                        'totalPAPs' => $totalPAPs ?? null,
                                        'occupationData' => $occupationData ?? null,
                                    ])
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        @include('layouts.footer')
    </div>
</div>

<!-- Vendor JS -->
<script src="{{ asset('assets/js/vendor.min.js') }}"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="{{ asset('assets/js/app.min.js') }}"></script>

<link rel="stylesheet" href="https://cdn.datatables.net/columncontrol/1.0.4/css/columnControl.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/3.0.4/css/responsive.dataTables.min.css">

<script src="https://cdn.datatables.net/2.3.2/js/dataTables.min.js"></script>
<script src="https://cdn.datatables.net/columncontrol/1.0.4/js/dataTables.columnControl.min.js"></script>

<script>
    $(document).ready(function() {
        fetchTableData('A1');
        let projectId = '{{ encrypt($project->id) ?? 0 }}'

        function fetchTableData(filterType = '', searchQuery = '', page = 1) {
            console.log('filterType', filterType);
            $.ajax({
                url: "{{ route('admin.rnrprojectsurvey.index', ['projectId' => encrypt($project->id)]) }}?page=" +
                    page,
                type: "GET",
                data: {
                    filter_type: filterType || null, // Send null if empty
                    pap_name: searchQuery || null // Send null if empty
                },
                beforeSend: function() {
                    $('.table-wrapper').html('<div class="text-center">Loading...</div>');
                },
                success: function(response) {
                    if (response.table) {
                        $('.table-wrapper').html(response.table);

                        setTimeout(() => {
                            // Destroy existing instance
                            // if ($.fn.DataTable.isDataTable('#basic-datatable')) {
                                $('#basic-datatable').DataTable().destroy();
                                // console.log('hi');
                            // }

                            // Reinitialize with full config
                            $('#basic-datatable')
                                .addClass('nowrap')
                                .DataTable({
                                    responsive: true,
                                    paging: false,
                                    searching: true,
                                    ordering: true,
                                    columnControl: [
                                        'order',
                                        ['search', 'spacer', 'orderAsc',
                                            'orderDesc', 'orderClear'
                                        ]
                                    ],
                                    columnDefs: [{
                                            targets: 0,
                                            orderable: false,
                                            searchable: false
                                        },
                                        {
                                            targets: [2],
                                            columnControl: [
                                                'order',
                                                ['searchList', 'spacer',
                                                    'orderAsc', 'orderDesc',
                                                    'orderClear'
                                                ]
                                            ]
                                        }
                                    ]
                                });
                        }, 10);
                    } else {
                        $('.table-wrapper').html(
                        '<div class="text-center">No Records Found</div>');
                    }
                }
                ,
                error: function(xhr, status, error) {
                    console.error("AJAX Error:", error);
                    $('.table-wrapper').html(
                        '<div class="text-center text-danger">Error loading data.</div>');
                }
            });
        }

        // Handle filter button clicks (A1, A4, etc.)
        $('.survey-button').click(function() {
            let filterType = $(this).attr('data-filter');
            let searchQuery = $('input[name="pap_name"]').val();
            $('.survey-button').removeClass('active');
            $(this).addClass('active');
            fetchTableData(filterType, searchQuery);
        });

        // Handle search form submission via AJAX
        $('form').submit(function(e) {
            e.preventDefault();
            let searchQuery = $('input[name="pap_name"]').val();
            let activeFilter = $('.survey-button.active').attr('data-filter') || '';
            fetchTableData(activeFilter, searchQuery);
        });

        // Handle Reset button
        $('.reset-btn').click(function(e) {
            e.preventDefault();
            $('input[name="pap_name"]').val(''); // Clear search field
            $('.survey-button').removeClass('active'); // Remove active filter buttons

            // Call fetchTableData() without parameters to reset table
            fetchTableData(null, null);
        });
        // Handle pagination clicks
        $(document).on('click', '.pagination-links a', function(e) {
            e.preventDefault();
            let page = $(this).attr('href').split('page=')[1];
            let searchQuery = $('input[name="pap_name"]').val();
            let activeFilter = $('.survey-button.active').attr('data-filter') || '';
            fetchTableData(activeFilter, searchQuery, page);
        });

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

            $.ajax({
                url: "{{ route('admin.export.all_survey') }}",
                type: "GET",
                data: {
                    projectId: projectId
                },
                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_all_survey.xlsx";
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                    $("#downloadAllSurvey").text("Download All Survey Excel").prop(
                        "disabled", false);
                },
                error: function(xhr, status, error) {
                    console.error("Error downloading the file:", error);
                    $("#downloadAllSurvey").text("Download All Survey Excel").prop(
                        "disabled", false);
                }
            });
        });
    });
</script>

</body>