@include('layouts.header', ['title' => 'Add Survey Details'])
    <div class="wrapper">
    @include('layouts.agency-user-navbar')
    @include('layouts.agency-user-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>

                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-header">
                                <h4 class="page-title">Name Of The Project: {{ $project['name'] ?? 'N/A' }}</h4>
                                <h4 class="page-title">Structure</h4>
                                <h4 class="page-title">
                                {{ isset($surveyData['structure_use'])
                                    ? ($surveyData['structure_use'] == 1
                                        ? 'Residential'
                                        : ($surveyData['structure_use'] == 3
                                            ? 'Residential + Commercial'
                                            : 'N/A'))
                                    : 'N/A'
                                }}
                                </h4>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="page-title">PAP Documents</h4>
                                </div>



                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="document_type" class="form-label">Add Documents<span class="text-danger">*</span></label>
                                                    <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addModal">Add</button>
                                                    <p>Note:-Aadhar card is mandatory</p>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-lg-6">
                                            <div id="savedDocumentsList" class="mt-3">
                                                <h5>Saved Documents</h5>
                                                <ul class="list-group" id="documentsDisplayArea">

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

                                    </div>

                                    <form id="documentUploadForm">
                                    <div class="card-footer border-top border-light d-flex justify-content-between">
                                        <a href="{{ route('agencyUser.add.screen1.serveyDetails', ['project_id' => encrypt($projectId), 'survey_id' => encrypt($surveyId)]) }}" class="btn btn-secondary">Back</a>
                                        <button type="submit" class="btn btn-success" id="submitScreen2Btn">Save & Next</button>
                                    </div>
                                    </form>

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

                </div>
            </div>

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

<!-- Modal -->
<div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title" id="addModalLabel">Add Document</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <form id="addDocumentForm" enctype="multipart/form-data">
        @csrf

        <!-- Hidden fields -->
        <input type="hidden" name="project_id" value="{{ $projectId }}">
        <input type="hidden" name="survey_id" value="{{ $surveyId }}">
        <input type="hidden" name="agency_user_id" value="{{ $user['id'] }}">
        <input type="hidden" name="survey_structure_type" value="1">


        <!-- Document type dropdown -->
        <div class="mb-3 row">
            <label for="documentType" class="col-sm-4 col-form-label p-3">Document Type</label>
            <div class="col-sm-8 p-3">
            <select class="form-select" name="document_types_id" id="documentType" required>
            <option value="">Select document type</option>
            @foreach($documentTypes as $type)
                <option value="{{ $type['id'] }}">{{ $type['name'] }}</option>
            @endforeach
            </select>
            </div>
        </div>
        <!-- Other Document Name (Hidden by default) -->
        <div class="mb-3 row d-none" id="otherDocumentNameContainer">
            <label for="otherDocumentName" class="col-sm-4 col-form-label p-3">Other Document Name</label>
            <div class="col-sm-8 p-3">
                <input type="text" class="form-control" name="document_type_other" id="otherDocumentName">
            </div>
        </div>

        <!-- File upload -->
        <div class="mb-3 row">
            <label for="documentFile" class="col-sm-4 col-form-label p-3">Upload File</label>
            <div class="col-sm-8 p-3">
            <input class="form-control" type="file" name="document_file" id="documentFile" required>
            </div>
        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-success">Submit</button>
        </div>
        </form>

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

    <!-- Vendor JS -->
    <script src="{{ asset('assets/js/vendor.min.js') }}"></script>
    <script src="{{ asset('assets/js/app.min.js') }}"></script>
    <!--  Select2 Plugin Js -->
    <script src="{{ asset('assets/vendor/select2/js/select2.min.js') }}"></script>

    <script>
        $(document).ready(function() {


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

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


        });
    </script>

<script>
const backendDocuments = @json($surveyData['survey_documents'] ?? []);
const projectId = '{{ $projectId }}';
const surveyId = '{{ $surveyId }}';
const token = '{{ $token }}';

function mergeBackendDocuments() {
    const mappedBackendDocs = backendDocuments.map(doc => ({
        project_id: doc.project_id,
        survey_id: doc.survey_id,
        agency_user_id: doc.agency_user_id,
        survey_structure_type: doc.survey_structure_type,
        document_types_id: doc.document_type.id.toString(),
        document_type_name: doc.document_type.name,
        document_file_name: doc.document_file_name,
        from_backend: true // to skip re-uploading
    }));

    let existingDocs = JSON.parse(localStorage.getItem('survey_documents') || '[]');

    // Prevent duplicate
    const uniqueDocs = [...existingDocs];
    mappedBackendDocs.forEach(backendDoc => {
        const isPresent = existingDocs.some(
            d => d.document_file_name === backendDoc.document_file_name &&
                 d.document_types_id === backendDoc.document_types_id
        );
        if (!isPresent) {
            uniqueDocs.push(backendDoc);
        }
    });

    localStorage.setItem('survey_documents', JSON.stringify(uniqueDocs));
}

// Call on page load
document.addEventListener('DOMContentLoaded', () => {
    mergeBackendDocuments();
    displaySavedDocuments();
});
</script>

<script>
    const API_URL = "{{ config('app.api_url') }}/api/add_surveys_documents";
    const API_TOKEN = "{{ $token }}"; // passed from backend securely

    document.getElementById('documentType').addEventListener('change', function () {
    const selectedText = this.options[this.selectedIndex].text.trim();
    const otherDocContainer = document.getElementById('otherDocumentNameContainer');
    if (selectedText.toLowerCase() === 'other') {
        otherDocContainer.classList.remove('d-none');
    } else {
        otherDocContainer.classList.add('d-none');
        document.getElementById('otherDocumentName').value = ''; // Clear input when hidden
    }
});

    document.getElementById('addDocumentForm').addEventListener('submit', function (e) {
        e.preventDefault();

        const form = e.target;
        const formData = new FormData(form);

        const documentTypeId = formData.get('document_types_id');
        const documentTypeName = form.querySelector('#documentType option:checked').textContent;
        const documentFile = formData.get('document_file');
        const projectId = formData.get('project_id');
        const serveyId = formData.get('survey_id');
        const agencyUserId = formData.get('agency_user_id');
        const surveyStructureType = formData.get('survey_structure_type');
        const otherDocumentName = formData.get('document_type_other');

        if (!documentTypeId || !documentFile.name) {
            toastr.error('Please select a document type and upload a file.');
            return;
        }

        const reader = new FileReader();
        reader.onload = function () {
            const base64File = reader.result;

            let storedDocs = JSON.parse(localStorage.getItem('survey_documents') || '[]');

            storedDocs.push({
            project_id: projectId,
            survey_id: serveyId,
            agency_user_id: agencyUserId,
            survey_structure_type: surveyStructureType,
            document_type_other: otherDocumentName,
            document_types_id: documentTypeId,
            document_type_name: documentTypeName,
            document_file_name: documentFile.name,
            document_file_base64: base64File
            });

            localStorage.setItem('survey_documents', JSON.stringify(storedDocs));

            form.reset();
            bootstrap.Modal.getInstance(document.getElementById('addModal')).hide();

            displaySavedDocuments(); // 🧠 update the UI
        };
        reader.readAsDataURL(documentFile);
    });



function displaySavedDocuments() {
    const list = document.getElementById('documentsDisplayArea');
    list.innerHTML = '';

    const docs = JSON.parse(localStorage.getItem('survey_documents') || '[]');

    // Filter only documents with survey_structure_type == 1
    const filteredDocs = docs.filter(doc => doc.survey_structure_type == 1);

    if (filteredDocs.length === 0) {
        list.innerHTML = '<li class="list-group-item text-muted">No documents added yet.</li>';
        return;
    }

    filteredDocs.forEach((doc, index) => {
        const item = document.createElement('li');
        item.className = 'list-group-item d-flex justify-content-between align-items-center';

        item.innerHTML = `
            <div>
                <strong>Document Type:</strong> ${doc.document_type_name}<br>
                <small>${doc.document_file_name.split('/').pop()}</small>
            </div>
            ${doc.from_backend ? '' : `
            <button class="btn btn-sm btn-danger" onclick="deleteDocument(${index})">
                <i class="bi bi-trash"></i> Delete
            </button>`}
        `;

        list.appendChild(item);
    });
}






document.addEventListener('DOMContentLoaded', displaySavedDocuments);

function deleteDocument(index) {
  let docs = JSON.parse(localStorage.getItem('survey_documents') || '[]');
  docs.splice(index, 1);
  localStorage.setItem('survey_documents', JSON.stringify(docs));
  displaySavedDocuments();
}


document.getElementById('submitScreen2Btn').addEventListener('click', async function (e) {
  e.preventDefault();

  const backendDocuments = @json($surveyData['survey_documents'] ?? []);
  const localDocuments = JSON.parse(localStorage.getItem('survey_documents') || '[]');

  const allDocuments = [
    ...backendDocuments.map(doc => ({
      document_types_id: String(doc.document_types_id),
      document_type_name: doc.document_type?.name || '',
      document_file_name: doc.document_file_name,
      from_backend: true,
    })),
    ...localDocuments
  ];

//   let projectId = '{{ $projectId }}';
//   let surveyId = '{{ $surveyId }}';

   let projectId = @json(encrypt($projectId));
  let surveyId =  @json(encrypt($surveyId));

  const aadharDocTypeId = '6'; // Update to your actual Aadhar Card ID

  const hasAadhar = allDocuments.some(doc => doc.document_types_id === aadharDocTypeId);
  const totalDocs = allDocuments.length;

  if (!hasAadhar) {
    toastr.error('Aadhar Card is required.');
    return;
  }

    if (totalDocs < 2) {
    toastr.error('Please upload at least 2 documents including Aadhar Card.');
    return;
    }

  const formData = new FormData();

  // Use local docs for uploading only (backend ones already saved)
  const docsToUpload = localDocuments;

  if (docsToUpload.length === 0) {
    // Nothing to upload, just redirect
    toastr.success('Documents already saved.');
    window.location.href = `/agency-user/add-servey-screen3/${projectId}/${surveyId}`;
    return;
  }

  // Use first document for metadata
  const first = docsToUpload[0];
  formData.append('project_id', first.project_id);
  formData.append('survey_id', first.survey_id);
  formData.append('agency_user_id', first.agency_user_id);
  formData.append('survey_structure_type', first.survey_structure_type || 'default');

  // Append only new documents (from localStorage)
  let uploadIndex = 0;
  for (const doc of docsToUpload) {
    if (!doc.document_file_base64) continue;

    formData.append(`documents[${uploadIndex}][document_types_id]`, doc.document_types_id);

    if (doc.document_type_other) {
      formData.append(`documents[${uploadIndex}][document_type_other]`, doc.document_type_other);
    }

    try {
      const base64 = doc.document_file_base64;
      const byteString = atob(base64.split(',')[1]);
      const mimeString = base64.split(',')[0].split(':')[1].split(';')[0];
      const ab = new ArrayBuffer(byteString.length);
      const ia = new Uint8Array(ab);
      for (let j = 0; j < byteString.length; j++) {
        ia[j] = byteString.charCodeAt(j);
      }
      const blob = new Blob([ab], { type: mimeString });

      formData.append(`documents[${uploadIndex}][document_file]`, blob, doc.document_file_name);
      uploadIndex++;
    } catch (err) {
      console.error('Error converting base64 to Blob for:', doc.document_file_name, err);
    }
  }

  try {
    const res = await fetch("{{ config('app.api_url') }}/api/add_surveys_documents", {
      method: 'POST',
      headers: {
        'Authorization': 'Bearer {{ $token }}'
      },
      body: formData
    });

    const result = await res.json();

    if (!res.ok) {
      console.error(result);
      toastr.error('Upload failed: ' + (result.message || 'Unknown error'));
      return;
    }

    toastr.success('Documents uploaded successfully!');
    localStorage.removeItem('survey_documents');

    // Redirect to screen 3
    window.location.href = `/agency-user/add-servey-screen3/${projectId}/${surveyId}`;

  } catch (err) {
    console.error(err);
    toastr.error('Something went wrong while uploading.');
  }
});





</script>


</body>

</html>