@include('layouts.header', ['title' => 'Add Survey Commercial'])
    <div class="wrapper">
    @include('layouts.agency-user-navbar')
    @include('layouts.agency-user-sidebar')
    @php
        $commercialData = isset($surveyData['survey_user_commercial'][0]) ? $surveyData['survey_user_commercial'][0] : [];
    @endphp

        <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'] == 2
                                        ? 'Commercial'
                                        : ($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">Basic Info</h4>
                                </div>

                                <form id="userForm"
                                    action="{{ route('agencyUser.saveFormCommercial.serveyDetails', ['project_id' => encrypt($projectId), 'survey_id' => encrypt($surveyId)]) }}"
                                    method="POST" enctype="multipart/form-data" autocomplete="off">
                                    @csrf
                                    @if(isset($commercialData['commercial_user_photo']))
                                        <input type="hidden" name="existing_photo" value="1">
                                    @endif
                                    <div class="card-body">
                                    <div class="row">
                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="commercial_user_photo" class="form-label"> Occupant Photo<span class="text-danger">*</span></label>
                                                    <input type="file" id="commercial_user_photo" name="commercial_user_photo"
                                                        class="form-control @error('commercial_user_photo') is-invalid @enderror"
                                                        placeholder="Upload Commercial occupant photo"
                                                        value="{{ old('commercial_user_photo') }}" >
                                                        {{-- Show image preview if exists --}}
                                                        @if(!empty($commercialData['commercial_user_photo']))
                                                            <div class="mt-2" style="width: 100px; height: 100px;">
                                                                <img src="{{ asset($commercialData['commercial_user_photo']) }}"
                                                                    alt="Structure Photo"
                                                                    style="width: 100%; height: 100%; object-fit: cover; border: 1px solid #ccc; border-radius: 4px;">
                                                            </div>
                                                        @endif
                                                    @error('commercial_user_photo')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>

                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="shop_types_id" class="form-label">Type of Shop<span class="text-danger">*</span></label>
                                                    <select class="form-select form-select-sm @error('shop_types_id') is-invalid @enderror" name="shop_types_id" id="shop_types_id">
                                                        <option value="">Select Type of Shop</option>
                                                        @foreach ($shopTypes as $shop)
                                                            <option value="{{ $shop->id }}" {{ (old('shop_types_id', $commercialData['shop_types_id'] ?? '') == $shop->id) ? 'selected' : '' }}>
                                                                {{ $shop->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    {{-- Shop Type Other Field --}}
                                                <input type="text"
                                                    name="shop_type_other"
                                                    id="typeOfShopOther"
                                                    class="form-control mt-2 @error('shop_type_other') is-invalid @enderror"
                                                    placeholder="If Other, specify..."
                                                    value="{{ old('shop_type_other', $commercialData['shop_type_other'] ?? '') }}"
                                                    style="display: {{ old('shop_types_id', $commercialData['shop_types_id'] ?? '') == 12 ? 'block' : 'none' }};">
                                                @error('shop_type_other')
                                                    <div class="invalid-feedback">
                                                        {{ $message }}
                                                    </div>
                                                @enderror
                                                    @error('shop_types_id')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>

                                        </div>
                                        <div class="row">

                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="shop_name" class="form-label">Shop Name<span class="text-danger">*</span></label>
                                                    <input type="input" id="shop_name" name="shop_name" class="form-control @error('shop_name') is-invalid @enderror"
                                                        placeholder="Enter Shop Name" value="{{ old('shop_name', $commercialData['shop_name'] ?? '') }}" >
                                                    @error('shop_name')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>

                                            <div class="col-lg-6">
                                                    <div class="mb-3">
                                                        <label for="shop_area" class="form-label">Area of Shop (Sq.ft) <span class="text-danger">*</span></label>
                                                        <input type="input" id="shop_area" name="shop_area"
                                                        class="form-control @error('shop_area') is-invalid @enderror"
                                                        placeholder="Enter shop area (Sq.mtr)"
                                                        value="{{ old('shop_area', $commercialData['shop_area'] ?? '') }}">
                                                        @error('shop_area')
                                                            <div class="invalid-feedback">
                                                                {{ $message }}
                                                            </div>
                                                        @enderror
                                                    </div>
                                            </div>

                                        </div>

                                        <div class="row">

                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="workers_type_id" class="form-label">No. of Workers<span class="text-danger">*</span></label>
                                                    <select id="workers_type_id" name="workers_type_id"
                                                        class="form-control @error('workers_type_id') is-invalid @enderror">
                                                        <option value="">No. of Workers</option>
                                                        @for ($i = 0; $i <= 100; $i++)
                                                            <option value="{{ $i }}"
                                                                {{ old('workers_type_id', $commercialData['workers_type_id'] ?? '') == $i ? 'selected' : '' }}>
                                                                {{ $i }}
                                                            </option>
                                                        @endfor
                                                    </select>
                                                    @error('workers_type_id')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>

                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="daily_sales" class="form-label">Daily Sales<span class="text-danger">*</span></label>
                                                    <input type="input" id="daily_sales" name="daily_sales"
                                                        class="form-control @error('daily_sales') is-invalid @enderror"
                                                        placeholder="Enter Daily Sales"
                                                        value="{{ old('daily_sales', isset($commercialData['daily_sales']) ? (int) $commercialData['daily_sales'] : '') }}">
                                                    @error('daily_sales')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>


                                        </div>

                                        <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="mb-3">
                                                        <label for="ownership" class="form-label">Ownership<span class="text-danger">*</span></label>
                                                        <input type="input" id="ownership" name="ownership"
                                                        class="form-control @error('ownership') is-invalid @enderror"
                                                        placeholder="Enter ownership"
                                                        value="{{ old('ownership', $commercialData['ownership'] ?? '') }}">
                                                        @error('ownership')
                                                            <div class="invalid-feedback">
                                                                {{ $message }}
                                                            </div>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="end_product_sale_market" class="form-label">End Product Sale Market<span class="text-danger">*</span></label>
                                                    <input type="input" id="end_product_sale_market" name="end_product_sale_market"
                                                        class="form-control @error('end_product_sale_market') is-invalid @enderror"
                                                        placeholder="Enter End Product Sale Market"
                                                        value="{{ old('end_product_sale_market', $commercialData['end_product_sale_market'] ?? '') }}">
                                                    @error('end_product_sale_market')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>

                                        </div>

                                        <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="mb-3">
                                                        <label for="total_area" class="form-label">Total Area (Sq.mtr) <span class="text-danger">*</span></label>
                                                        <input type="input" id="totalArea" name="total_area"
                                                        class="form-control @error('total_area') is-invalid @enderror"
                                                        placeholder="Enter Total Area (Sq.mtr)"
                                                        value="{{ old('total_area', $commercialData['total_area'] ?? '') }}">
                                                        @error('total_area')
                                                            <div class="invalid-feedback">
                                                                {{ $message }}
                                                            </div>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="affected_area" class="form-label">Affected Area (Sq.mtr)<span class="text-danger">*</span></label>
                                                    <input type="input" id="affectedArea" name="affected_area"
                                                        class="form-control @error('affected_area') is-invalid @enderror"
                                                        placeholder="Enter Affected Area (Sq.mtr) "
                                                        value="{{ old('affected_area', $commercialData['affected_area'] ?? '') }}">
                                                        @error('affected_area')
                                                            <div class="invalid-feedback">
                                                                {{ $message }}
                                                            </div>
                                                        @enderror

                                                </div>
                                            </div>

                                        </div>
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="percentage_area" class="form-label">% Area<span class="text-danger">*</span></label>
                                                    <input type="input" id="percentageArea" name="percentage_area"
                                                    class="form-control bg-light @error('percentage_area') is-invalid @enderror"
                                                    placeholder="Enter % Area"
                                                    value="{{ old('percentage_area', $commercialData['percentage_area'] ?? '') }}" readonly>
                                                    @error('percentage_area')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="balanced_area" class="form-label">Balance Area<span class="text-danger">*</span></label>
                                                    <input type="input" id="balanceArea" name="balanced_area"
                                                    class="form-control bg-light @error('balanced_area') is-invalid @enderror"
                                                    placeholder="Enter Balance Area"
                                                    value="{{ old('balanced_area', $commercialData['balanced_area'] ?? '') }}" readonly>
                                                    @error('balanced_area')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>

                                        </div>

                                        <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="mb-3">
                                                        <label for="raw_material_place" class="form-label">Place of raw material taken<span class="text-danger">*</span></label>
                                                        <input type="input" id="raw_material_place" name="raw_material_place"
                                                        class="form-control @error('raw_material_place') is-invalid @enderror"
                                                        placeholder="Enter Place of raw material taken"
                                                        value="{{ old('raw_material_place', $commercialData['raw_material_place'] ?? '') }}" >
                                                        @error('raw_material_place')
                                                            <div class="invalid-feedback">
                                                                {{ $message }}
                                                            </div>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="nature_of_activity" class="form-label">Nature of Activity<span class="text-danger">*</span></label>
                                                    <input type="input" id="nature_of_activity" name="nature_of_activity"
                                                        class="form-control @error('nature_of_activity') is-invalid @enderror"
                                                        placeholder="Enter Nature of Activity"
                                                        value="{{ old('nature_of_activity', $commercialData['nature_of_activity'] ?? '') }}" >
                                                    @error('nature_of_activity')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror

                                                </div>
                                            </div>

                                        </div>

                                        <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="mb-3">
                                                        <label for="monthly_turnover" class="form-label">Monthly Turn Over<span class="text-danger">*</span></label>
                                                        <input type="input" id="monthly_turnover" name="monthly_turnover"
                                                        class="form-control @error('monthly_turnover') is-invalid @enderror"
                                                        placeholder="Enter Monthly Turn Over"
                                                        value="{{ old('monthly_turnover', isset($commercialData['monthly_turnover']) ? (int) $commercialData['monthly_turnover'] : '') }}" >
                                                        @error('monthly_turnover')
                                                            <div class="invalid-feedback">
                                                                {{ $message }}
                                                            </div>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="year_of_establishment" class="form-label">Year Of Establishment<span class="text-danger">*</span></label>
                                                    @php
                                                        $selectedYear = old('year_of_establishment', $commercialData['year_of_establishment'] ?? '');
                                                    @endphp
                                                    <select class="form-select form-select-sm @error('year_of_establishment') is-invalid @enderror" name="year_of_establishment" id="year_of_establishment">
                                                        <option value="">Select Year Of Establishment</option>
                                                        @for ($year = 1950; $year <= 2025; $year++)
                                                            <option value="{{ $year }}" {{ $selectedYear == $year ? 'selected' : '' }}>{{ $year }}</option>
                                                        @endfor
                                                    </select>
                                                    @error('year_of_establishment')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>

                                        </div>


                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="no_of_employees" class="form-label">No. Of Employees<span class="text-danger">*</span></label>
                                                    <input type="input" id="no_of_employees" name="no_of_employees"
                                                        class="form-control @error('no_of_employees') is-invalid @enderror"
                                                        placeholder="Enter No. Of Employees"
                                                        value="{{ old('no_of_employees', $commercialData['no_of_employees'] ?? '') }}">
                                                    @error('no_of_employees')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>

                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="name_establishment_owner" class="form-label">Name Establishment Owner<span class="text-danger">*</span></label>
                                                    <input type="input" id="name_establishment_owner" name="name_establishment_owner"
                                                        class="form-control @error('name_establishment_owner') is-invalid @enderror"
                                                        placeholder="Enter Name Establishment Owner"
                                                        value="{{ old('name_establishment_owner', $commercialData['name_establishment_owner'] ?? '') }}" >
                                                    @error('name_establishment_owner')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>

                                        </div>

                                        <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>
                                                </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">
                                                @if(!empty($surveyData['survey_documents']))
                                                    @php $hasDocuments = false; @endphp
                                                    @foreach($surveyData['survey_documents'] as $document)
                                                    @if($document['survey_structure_type'] == 2)
                                                    @php $hasDocuments = true; @endphp
                                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                                        <div>
                                                            <strong>Document Type:</strong> {{ $document['document_type']['name'] }}<br>
                                                            <small>{{ last(explode('_', basename($document['document_file_name']))) }}</small>
                                                        </div>
                                                        <!--button class="btn btn-sm btn-danger" onclick="deleteDocument()">
                                                            <i class="bi bi-trash"></i> Delete
                                                        </button-->
                                                    </li>
                                                    @endif
                                                    @endforeach
                                                    @unless($hasDocuments)
                                                        <li class="list-group-item d-flex justify-content-between align-items-center">Document not yet added.</li>
                                                    @endunless
                                                @else
                                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                                    <p>Document not yet added.</p>
                                                </li>
                                                @endif
                                                </ul>
                                            </div>
                                            </div>
                                        </div>


                                    </div>
                                    <div class="card-footer border-top border-light d-flex justify-content-between">
                                        @if(isset($surveyData['structure_use']) && $surveyData['structure_use'] == 3)
                                        <a href="{{ route('agencyUser.add.screen5.serveyDetails', ['project_id' => encrypt($projectId), 'survey_id' => encrypt($surveyId)]) }}" class="btn btn-secondary">Back</a>
                                        @else
                                        <a href="{{ route('agencyUser.add.serveyDetails', ['project_id' => encrypt($projectId), 'survey_id' => encrypt($surveyId)]) }}" class="btn btn-secondary">Back</a>
                                        @endif
                                        <button type="submit" class="btn btn-success" id="submitBtn">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="2">


        <!-- Document type dropdown -->
        <div class="mb-3 row">
            <label for="documentType" class="col-sm-4 col-form-label p-3">Document Type<span class="text-danger">*</span></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<span class="text-danger">*</span></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

        function calculateAreaPercentage(totalArea, affectedArea, callback) {
            const total = parseFloat(totalArea.trim());
            const affected = parseFloat(affectedArea.trim());

            if (!isNaN(total) && total > 0 && !isNaN(affected)) {
                if (affected > total) {
                    toastr.error("Affected area cannot be greater than total area.");
                    callback({
                        percentage: '',
                        remaining: ''
                    });
                    return;
                }

                const percentage = (affected / total) * 100;
                const remaining = total - affected;

                callback({
                    percentage: percentage.toFixed(2),
                    remaining: remaining.toFixed(2)
                });
            } else {
                callback({
                    percentage: '',
                    remaining: ''
                });
            }
        }

        function updateAreaFields() {
            const totalVal = document.getElementById("totalArea").value;
            const affectedVal = document.getElementById("affectedArea").value;

            calculateAreaPercentage(totalVal, affectedVal, function (result) {
                document.getElementById("percentageArea").value = result.percentage;
                document.getElementById("balanceArea").value = result.remaining;
            });
        }

        document.getElementById("affectedArea").addEventListener("input", updateAreaFields);
        document.getElementById("totalArea").addEventListener("input", updateAreaFields);

        });

    </script>

<script>

    document.addEventListener('DOMContentLoaded', function () {
        const shopTypeSelect = document.getElementById('shop_types_id');
        const otherField = document.getElementById('typeOfShopOther');

        const toggleOtherField = () => {
            if (shopTypeSelect.value === '12') {
                otherField.style.display = 'block';
            } else {
                otherField.style.display = 'none';
                otherField.value = ''; // Reset input if not 'Other'
            }
        };

        // Run on page load
        toggleOtherField();

        // Run on change
        shopTypeSelect.addEventListener('change', toggleOtherField);
    });

    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
        }
    });

    const API_URL = "{{ config('app.api_url') }}/api/add_surveys_documents";
    const API_URL_DOC = "{{ config('app.api_url') }}/api/surveys/{{$projectId}}/{{$surveyId}}";
    const API_TOKEN = "{{ $token }}"; // passed from backend securely

    /*document.getElementById('documentType').addEventListener('change', function () {
        const otherField = document.getElementById('documentTypeOther');
        otherField.style.display = this.value === '8' ? 'block' : 'none';
    });*/

    document.getElementById('addDocumentForm').addEventListener('submit', function (e) {
    e.preventDefault();  // Prevent form from submitting normally

    const formData = new FormData(this); // Grab form data
    const documentType = document.getElementById('documentType').value;
    const documentFile = document.getElementById('documentFile').files[0];
    const otherInput = document.getElementById('otherDocumentName');

    // Validate document type (must not be empty)
    if (!documentType) {
        toastr.error('Please select a document type.');
        return;
    }

    // Validate file upload (must not be empty)
    if (!documentFile) {
        toastr.error('Please upload a document.');
        return;
    }

    // Add the document type to the form data
    formData.append('documents[0][document_types_id]', documentType);
    // Add the document file to the form data
    formData.append('documents[0][document_file]', documentFile);

    // If "Other" type selected, validate & append
    if (documentType === '10') {
        const otherValue = otherInput.value.trim();
        if (!otherValue) {
            toastr.error('Please specify the other document type.');
            return;
        }
        formData.append('documents[0][document_type_other]', otherValue);
    }

    // Send the data using Fetch API
    fetch(API_URL, {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Authorization': 'Bearer {{ session("token") }}' // Add your token or handle auth accordingly
        },
        body: formData // Send the form data (including file)
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            toastr.success('Document uploaded successfully!');
            // Close the modal and reset the form
            $('#addModal').modal('hide');
            document.getElementById('addDocumentForm').reset();
            // Call the API to get updated document list
            fetch(API_URL_DOC, {
                headers: {
                    'Accept': 'application/json',
                    'Authorization': 'Bearer {{ session("token") }}'
                }
            })
            .then(res => res.json())
            .then(result => {
                if (result.status === 'success' && result.data?.survey_documents?.length) {
                    updateDocumentList(result.data.survey_documents);
                } else {
                    document.getElementById('documentsDisplayArea').innerHTML = '<li class="list-group-item">No documents found.</li>';
                }
            })
            .catch(err => {
                console.error('Error fetching document list:', err);
            });

        } else {
            toastr.error(data.message || 'Upload failed.');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        toastr.error('An error occurred. Please try again later.');
    });
});

function updateDocumentList(documents) {
    const container = document.getElementById('documentsDisplayArea');
    container.innerHTML = ''; // Clear current list

    // Filter documents where survey_structure_type == 2
    const filteredDocs = documents.filter(doc => doc.survey_structure_type == 2);

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

        li.innerHTML = `
            <div>
                <strong>Document Type:</strong> ${doc.document_type?.name || 'N/A'}<br>
                <small>${fileName}</small>
            </div>
        `;

        container.appendChild(li);
    });

    // Optional: show a message if no documents meet the criteria
    if (filteredDocs.length === 0) {
        container.innerHTML = '<li class="list-group-item">No documents found for structure type 2.</li>';
    }
}




document.getElementById('submitBtn').addEventListener('click', function (event) {
        const savedDocs = document.querySelectorAll('#documentsDisplayArea li');
        const newDocs = document.querySelectorAll('input[name="document_type[]"]'); // or whatever input holds new docs

        if (savedDocs.length === 0 && newDocs.length === 0) {
            event.preventDefault(); // prevent form from submitting
            toastr.error('Please add at least one document before submitting.');
        }
    });


</script>


</body>

</html>