@include('layouts.header', ['title' => 'Add Survey Other'])
    <div class="wrapper">
    @include('layouts.agency-user-navbar')
    @include('layouts.agency-user-sidebar')
    @php
        $otherData = isset($surveyData['survey_user_others'][0]) ? $surveyData['survey_user_others'][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">Others</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.saveFormOther.serveyDetails', ['project_id' => encrypt($projectId), 'survey_id' => encrypt($surveyId)]) }}"
                                    method="POST" enctype="multipart/form-data" autocomplete="off">
                                    @csrf
                                    @if(isset($otherData['structure_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="name" class="form-label">Structure photo<span class="text-danger">*</span></label>
                                                    <input type="file" id="structure_photo" name="structure_photo"
                                                        class="form-control @error('structure_photo') is-invalid @enderror"
                                                        placeholder="Upload structure photo"
                                                        value="{{ old('structure_photo') }}"
                                                        >
                                                        {{-- Show image preview if exists --}}
                                                        @if(!empty($otherData['structure_photo']))
                                                            <div class="mt-2" style="width: 100px; height: 100px;">
                                                                <img src="{{ asset($otherData['structure_photo']) }}"
                                                                    alt="Structure Photo"
                                                                    style="width: 100%; height: 100%; object-fit: cover; border: 1px solid #ccc; border-radius: 4px;">
                                                            </div>
                                                        @endif

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

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

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

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



                                        </div>

                                        <div class="row">

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

                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="structure_type_id" class="form-label">Structure Type<span class="text-danger">*</span></label>
                                                    <select class="form-select form-select-sm @error('structure_type_id') is-invalid @enderror" name="structure_type_id" id="structure_type_id">
                                                        <option value="">Select Structure Type</option>
                                                        @foreach ($structureTypes as $type)
                                                            <option value="{{ $type->id }}" {{ (old('structure_type_id', $otherData['structure_type_id'] ?? '') == $type->id) ? 'selected' : '' }}>
                                                                {{ $type->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    <input type="text" name="structure_type_other" id="structureTypeOther"
                                                    class="form-control mt-2 @error('structure_type_other') is-invalid @enderror"
                                                    placeholder="If Other, specify..."
                                                    value="{{ old('structure_type_other', $otherData['structure_type_other'] ?? '') }}"
                                                    style="display: {{ old('structure_type_id', $otherData['structure_type_id'] ?? '') == '10' ? 'block' : 'none' }};">
                                                    @error('structure_type_other')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                    @error('structure_type_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="structure_holder_id" class="form-label">Status of present structure holder<span class="text-danger">*</span></label>
                                                    <select class="form-select form-select-sm @error('structure_holder_id') is-invalid @enderror" name="structure_holder_id" id="structure_holder_id">
                                                        <option value="">Select Status of present structure holder</option>
                                                        @foreach ($structureHolder as $holder)
                                                            <option value="{{ $holder->id }}" {{ (old('structure_holder_id', $otherData['structure_holder_id'] ?? '') == $holder->id) ? 'selected' : '' }}>
                                                                {{ $holder->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    <input type="text" name="structure_holder_other" id="structureHolderOther"
                                                        class="form-control mt-2 @error('structure_holder_other') is-invalid @enderror"
                                                        placeholder="If Other, specify..."
                                                        value="{{ old('structure_holder_other', $otherData['structure_holder_other'] ?? '') }}"
                                                        style="display: {{ old('structure_holder_id', $otherData['structure_holder_id'] ?? '') == '5' ? 'block' : 'none' }};">

                                                    @error('structure_holder_other')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                    @error('structure_holder_id')
                                                        <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', $otherData['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="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', isset($otherData['total_area']) ? (int) $otherData['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', isset($otherData['affected_area']) ? (int) $otherData['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', $otherData['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="balancedArea" name="balanced_area"
                                                    class="form-control bg-light @error('balanced_area') is-invalid @enderror"
                                                    placeholder="Enter Balance Area"
                                                    value="{{ old('balanced_area', $otherData['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="structure_roof_id" class="form-label">Structure Roof<span class="text-danger">*</span></label>
                                                        <select class="form-select form-select-sm @error('structure_roof_id') is-invalid @enderror" name="structure_roof_id" id="structure_roof_id">
                                                            <option value="">Select Structure Roof</option>
                                                            @foreach ($structureRoofs as $roof)
                                                            <option value="{{ $roof->id }}" {{ (old('structure_roof_id', $otherData['structure_roof_id'] ?? '') == $roof->id) ? 'selected' : '' }}>
                                                                {{ $roof->name }}
                                                            </option>
                                                            @endforeach
                                                        </select>

                                                    @error('structure_roof_id')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>

                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="structure_wall_id" class="form-label">Structure Wall<span class="text-danger">*</span></label>
                                                    <select class="form-select form-select-sm @error('structure_wall_id') is-invalid @enderror" name="structure_wall_id" id="structure_wall_id">
                                                        <option value="">Select Structure Wall</option>
                                                        @foreach ($structureRoofs as $roof)
                                                        <option value="{{ $roof->id }}" {{ (old('structure_wall_id', $otherData['structure_wall_id'] ?? '') == $roof->id) ? 'selected' : '' }}>
                                                            {{ $roof->name }}
                                                        </option>
                                                        @endforeach
                                                    </select>

                                                    @error('structure_wall_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="structure_floor_id" class="form-label">Structure Floor<span class="text-danger">*</span></label>
                                                        <select class="form-select form-select-sm @error('structure_floor_id') is-invalid @enderror" name="structure_floor_id" id="structure_floor_id">
                                                            <option value="">Select Structure Floor</option>
                                                            @foreach ($structureRoofs as $roof)
                                                            <option value="{{ $roof->id }}" {{ (old('structure_floor_id', $otherData['structure_floor_id'] ?? '') == $roof->id) ? 'selected' : '' }}>
                                                                {{ $roof->name }}
                                                            </option>
                                                            @endforeach
                                                        </select>

                                                        @error('structure_floor_id')
                                                            <div class="invalid-feedback">
                                                                {{ $message }}
                                                            </div>
                                                        @enderror
                                                    </div>
                                                </div>

                                        </div>

                                    </div>

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

                </div>
            </div>

            @include('layouts.footer')
        </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("balancedArea").value = result.remaining;
            });
        }

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

        });

    </script>

<script>

    document.addEventListener('DOMContentLoaded', function () {
        const structureSelect = document.getElementById('structure_type_id');
        const otherInput = document.getElementById('structureTypeOther');

        function toggleOtherField() {
            if (structureSelect.value === '10') {
                otherInput.style.display = 'block';
            } else {
                otherInput.style.display = 'none';
                otherInput.value = '';
            }
        }

        // Run on page load
        toggleOtherField();

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

    document.addEventListener('DOMContentLoaded', function () {
        const structureHolderSelect = document.getElementById('structure_holder_id');
        const structureHolderOtherInput = document.getElementById('structureHolderOther');

        function toggleStructureHolderOther() {
            if (structureHolderSelect.value === '5') {
                structureHolderOtherInput.style.display = 'block';
            } else {
                structureHolderOtherInput.style.display = 'none';
                structureHolderOtherInput.value = '';
            }
        }

        // Run on load
        toggleStructureHolderOther();

        // Run on change
        structureHolderSelect.addEventListener('change', toggleStructureHolderOther);
    });


</script>


</body>

</html>