@include('layouts.header', ['title' => 'Survey Details'])
<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])

                @if ($surveys->structure_use == '4')
                    <div class="row">
                        <div class="d-flex flex-wrap gap-2 mt-3 mb-4">
                            <button id="btn-personal" class="btn btn-success">Personal Information</button>
                            {{-- <button id="btn-documents" class="btn btn-success">Documents</button> --}}
                            <button id="btn-assigned" class="btn btn-success">Allotment Status</button>
                        </div>

                        <div id="personal-content">
                            @include('components.survey-others', ['survey' => $surveys])
                        </div>

                        {{-- <div id="documents-content" style="display: none;">
                            @include('components.survey-documents', ['survey' => $surveys, 'project' => $project])
                        </div> --}}

                        <div id="assigned-content" style="display: none;">
                            @include('components.survey-assigned', ['survey' => $surveys])
                        </div>
                    </div>
                @endif


                @if ($surveys->structure_use == '2')
                    <div class="row">
                        <div class="d-flex flex-wrap gap-2 mt-3 mb-4">
                            <button id="btn-personal" class="btn btn-success">Personal Information</button>
                            <button id="btn-documents" class="btn btn-success">Documents</button>
                            <button id="btn-workers" class="btn btn-success">Workers</button>
                            <button id="btn-assigned" class="btn btn-success">Allotment Status</button>
                        </div>

                        <div id="personal-content">
                            @include('components.survey-commercial', ['survey' => $surveys])
                        </div>

                        <div id="documents-content" style="display: none;">
                            @include('components.survey-documents', ['survey' => $surveys, 'project' => $project])
                        </div>
                          <div id="workers-content" style="display: none;">
                            @include('components.survey-commercial-workers', ['survey' => $surveys])
                        </div>
                        <div id="assigned-content" style="display: none;">
                            @include('components.survey-assigned', ['survey' => $surveys])
                        </div>
                    </div>
                @endif


                @if ($surveys->structure_use == '1')
                    <div class="row">
                        <div class="d-flex flex-wrap gap-2 mt-3 mb-4">
                            <button id="btn-personal" class="btn btn-success">Personal Information</button>
                            <button id="btn-household" class="btn btn-success">Household Members</button>
                            <button id="btn-vulnerability" class="btn btn-success">Vulnerability</button>
                            <button id="btn-economic-indicators" class="btn btn-success">Socio-economic Indicators</button>
                            <button id="btn-documents" class="btn btn-success">Documents</button>
                            <button id="btn-temp-assign" class="btn btn-success">Temporary Allotment</button>
                            <button id="btn-assigned" class="btn btn-success">Allotment Status</button>
                        </div>

                        <div id="personal-content">
                            @include('components.survey-residential', ['survey' => $surveys])
                        </div>

                        <div id="household-content" style="display: none;">
                            @include('components.survey-household', ['survey' => $surveys])
                        </div>

                        <div id="vulnerability-content" style="display: none;">
                            @include('components.survey-vulnerability', ['survey' => $surveys])
                        </div>

                        <div id="economic-indicators" style="display: none;">
                            @include('components.survey-economic-indicators', ['survey' => $surveys])
                        </div>

                        <div id="documents-content" style="display: none;">
                            @include('components.survey-documents', ['survey' => $surveys, 'project' => $project])
                        </div>

                        <div id="temp-assign-content" style="display: none;">
                            @include('components.survey-tempassign', ['survey' => $surveys])
                        </div>

                        <div id="assigned-content" style="display: none;">
                            @include('components.survey-assigned', ['survey' => $surveys])
                        </div>
                    </div>
                @endif


                @if ($surveys->structure_use == '3')
                <div class="row">
                    <div class="d-flex flex-wrap gap-2 mt-3 mb-4">
                        <button id="btn-personal" class="btn btn-success">Personal Information</button>
                        <button id="btn-household" class="btn btn-success">Household Members</button>
                        <button id="btn-vulnerability" class="btn btn-success">Vulnerability</button>
                        <button id="btn-economic-indicators" class="btn btn-success">Socio-economic Indicators</button>
                        <button id="btn-documents" class="btn btn-success">Documents</button>
                        <button id="btn-resi-cum-personal" class="btn btn-success">Personal Information(Resi-Cum-Comm)</button>
                        <button id="btn-temp-assign" class="btn btn-success">Temporary Allotment</button>
                        <button id="btn-assigned" class="btn btn-success">Allotment Status</button>
                    </div>

                    <div id="personal-content">
                        @include('components.survey-residential', ['survey' => $surveys])
                    </div>

                    <div id="household-content" style="display: none;">
                        @include('components.survey-household', ['survey' => $surveys])
                    </div>

                    <div id="vulnerability-content" style="display: none;">
                        @include('components.survey-vulnerability', ['survey' => $surveys])
                    </div>

                    <div id="economic-indicators" style="display: none;">
                        @include('components.survey-economic-indicators', ['survey' => $surveys])
                    </div>

                    <div id="documents-content" style="display: none;">
                        @include('components.survey-documents', ['survey' => $surveys, 'project' => $project])
                    </div>

                    <div id="res-cum-personal-content" style="display: none;">
                        @include('components.survey-commercial', ['survey' => $surveys])
                    </div>

                      <div id="temp-assign-content" style="display: none;">
                            @include('components.survey-tempassign', ['survey' => $surveys])
                        </div>

                    <div id="assigned-content" style="display: none;">
                        @include('components.survey-assigned', ['survey' => $surveys])
                    </div>
                </div>
            @endif

            </div>
        </div>

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

<div class="modal fade" id="pdfPreviewModal" tabindex="-1" aria-labelledby="pdfPreviewLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="pdfPreviewLabel">PDF Preview</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <iframe id="pdfViewer" width="100%" height="600px"></iframe>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <a id="downloadPdf" class="btn btn-success me-2" href="#" download="Allotment_Letter.pdf">Download</a>
            </div>
        </div>
    </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>

<script>
    $(document).ready(function() {
        $('#btn-personal').click(function() {
            $('#personal-content').show();
            $('#documents-content').hide();
            $('#vulnerability-content').hide();
            $('#household-content').hide();
            $('#economic-indicators').hide();
            $('#assigned-content').hide();
            $('#res-cum-personal-content').hide();
            $('#temp-assign-content').hide();

        });

        $('#btn-vulnerability').click(function() {
            $('#personal-content').hide();
            $('#documents-content').hide();
            $('#household-content').hide();
            $('#economic-indicators').hide();
            $('#res-cum-personal-content').hide();
            $('#assigned-content').hide();
            $('#temp-assign-content').hide();
            $('#vulnerability-content').show();
        });

        $('#btn-documents').click(function() {
            $('#personal-content').hide();
            $('#vulnerability-content').hide();
            $('#household-content').hide();
            $('#economic-indicators').hide();
            $('#res-cum-personal-content').hide();
            $('#assigned-content').hide();
            $('#temp-assign-content').hide();
            $('#documents-content').show();
        });

        $('#btn-household').click(function() {
            $('#personal-content').hide();
            $('#vulnerability-content').hide();
            $('#documents-content').hide();
            $('#economic-indicators').hide();
            $('#res-cum-personal-content').hide();
            $('#assigned-content').hide();
            $('#temp-assign-content').hide();
            $('#household-content').show();
        });

         $('#btn-workers').click(function() {
            $('#personal-content').hide();
            $('#vulnerability-content').hide();
            $('#documents-content').hide();
            $('#economic-indicators').hide();
            $('#res-cum-personal-content').hide();
            $('#assigned-content').hide();
            $('#temp-assign-content').hide();
            $('#household-content').hide();
             $('#workers-content').show();
        });

        $('#btn-economic-indicators').click(function() {
            $('#personal-content').hide();
            $('#vulnerability-content').hide();
            $('#documents-content').hide();
            $('#household-content').hide();
            $('#res-cum-personal-content').hide();
            $('#assigned-content').hide();
            $('#temp-assign-content').hide();
            $('#economic-indicators').show();
        });

        $('#btn-resi-cum-personal').click(function() {
            $('#personal-content').hide();
            $('#vulnerability-content').hide();
            $('#documents-content').hide();
            $('#household-content').hide();
            $('#economic-indicators').hide();
            $('#assigned-content').hide();
            $('#temp-assign-content').hide();
            $('#res-cum-personal-content').show();
        });

        $('#btn-assigned').click(function() {
            $('#personal-content').hide();
            $('#vulnerability-content').hide();
            $('#household-content').hide();
            $('#economic-indicators').hide();
            $('#res-cum-personal-content').hide();
            $('#documents-content').hide();
            $('#temp-assign-content').hide();
            $('#assigned-content').show();
        });


        $('#btn-temp-assign').click(function() {
            $('#personal-content').hide();
            $('#documents-content').hide();
            $('#household-content').hide();
            $('#economic-indicators').hide();
            $('#res-cum-personal-content').hide();
            $('#assigned-content').hide();
            $('#vulnerability-content').hide();
            $('#temp-assign-content').show();
        });

        $("#uploadIndemnityBondForm").submit(function() {
            const submitBtn = document.getElementById('submitBtn');
            submitBtn.disabled = true;
            submitBtn.innerHTML = 'Submitting...';
        });

        $(".download-pdf").click(function() {
            let allotmentId = $(this).data("allotment");

            $.ajax({
                url: "{{ route('admin.allotment-letter-download', ['allotmentId' => '__ALLOTMENT_ID__']) }}"
                    .replace('__ALLOTMENT_ID__', allotmentId),
                type: "GET",
                success: function(response) {
                    if (response.pdf) {
                        let pdfData = "data:application/pdf;base64," + response.pdf;
                        $("#pdfViewer").attr("src", pdfData); // Set PDF in iframe
                        $("#downloadPdf").attr("href", pdfData).attr('download', 'Allotment_Letter.pdf'); // Set download link
                        $("#pdfPreviewModal").modal("show"); // Show modal
                    } else {
                        alert("Failed to generate PDF. Please try again.");
                    }
                },
                error: function() {
                    alert("Error generating PDF.");
                }
            });
        });

        $(".download-taba-pdf").click(function() {
            let allotmentId = $(this).data("allotment");

            $.ajax({
                url: "{{ route('admin.allotment-letter-download-taba', ['allotmentId' => '__ALLOTMENT_ID__']) }}"
                    .replace('__ALLOTMENT_ID__', allotmentId),
                type: "GET",
                success: function(response) {
                    if (response.pdf) {
                        let pdfData = "data:application/pdf;base64," + response.pdf;
                        $("#pdfViewer").attr("src", pdfData); // Set PDF in iframe
                        $("#downloadPdf").attr("href", pdfData).attr('download', 'Taba_Pavti.pdf'); // Set download link
                        $("#pdfPreviewModal").modal("show"); // Show modal
                    } else {
                        alert("Failed to generate PDF. Please try again.");
                    }
                },
                error: function() {
                    alert("Error generating PDF.");
                }
            });
        });

        @if ($errors->any())
            @foreach ($errors->all() as $error)
                toastr.error("{{ $error }}");
            @endforeach
        @endif

        @if (session('success'))
            toastr.success("{{ session('success') }}");
        @endif

        @if (session('error'))
            toastr.error("{{ session('error') }}");
        @endif
    });
</script>

</body>
@stack('scripts')