@include('layouts.header', ['title' => 'Annexure-II Existing PAP'])
<div class="wrapper">
    @include('layouts.navbar')
    @include('layouts.sidebar')

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

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="page-title">{{ isset($annexuretwoData) ? 'Edit' : 'Update' }} FLGRC Existing PAP
                                </h4>
                            </div>

                            <form id="annexureForm" class="form-horizontal-style-2"
                                action="{{ isset($annexuretwoData) ? route('admin.annexuretwopap.update', encrypt($annexuretwoData->id)) : route('admin.annexuretwoexistingpap.store') }}"
                                method="POST" enctype="multipart/form-data">

                                @csrf
                                @if (isset($annexuretwoData))
                                    @method('PUT')
                                @endif

                                <input type="hidden" name="project_id" value="{{ $id }}">

                                <div class="card-body">

                                    {{-- Survey Dropdown --}}
                                    <div class="col-md-6 mb-3" id="surveyDropdownContainer">
                                        <label for="surveySelect" class="form-label">Structure/BSES ID <span
                                                class="text-danger">*</span></label>
                                        <select name="survey_id" class="form-control select2" id="surveySelect"
                                            required>
                                            <option value="">-- Select Structure ID --</option>
                                            @foreach ($annexureTwos as $annexure)
                                                <option value="{{ $annexure->survey_id }}"
                                                    data-structure_use="{{ $annexure->structure_use }}">
                                                    {{ $annexure->structure_id }} -
                                                    {{ $annexure->new_owner_name ?? $annexure->owner_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('survey_id')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    {{-- Survey Details Table & Conditional Fields --}}
                                    <div class="table-responsive mt-4 d-none" id="surveyDetailsContainer">
                                        <table class="table table-bordered" id="surveyDetailsTable">
                                            <thead>
                                                <tr>
                                                    <th>Sl. No.</th>
                                                    <th>Map No.</th>
                                                    <th>Structure ID</th>
                                                    <th>Occupant Name</th>
                                                    <th>Affected Area</th>
                                                    <th>Property Type</th>
                                                </tr>
                                            </thead>
                                            <tbody id="surveyDetailsBody"></tbody>
                                        </table>

                                        {{-- Eligibility Status --}}
                                        <div class="mb-3 mt-3">
                                            <label class="form-label">Eligibility Status <span
                                                    class="text-danger">*</span></label>
                                            <select name="eligibility_status" class="form-control" required>
                                                <option value="">Select Eligibility</option>
                                                <option value="On Hold">On Hold</option>
                                                <option value="Non-Eligible">Non-Eligible</option>
                                                <option value="Eligible">Eligible</option>
                                            </select>
                                        </div>

                                        {{-- Action Dropdown --}}
                                        <div class="form-group row mt-3 d-none" id="actionBlock">
                                            <label for="action" class="col-sm-3 col-form-label">Action</label>
                                            <div class="col-sm-9">
                                                <select class="form-control" id="action" name="action">
                                                    <option value="">Select Action</option>
                                                    <option value="structure_type_annexure">Change Structure Type
                                                    </option>
                                                </select>
                                            </div>
                                        </div>

                                        {{-- Change Structure Type Fields --}}
                                        <div id="structureTypeFields" class="mt-3 d-none">
                                            <div class="form-group row">
                                                <label class="col-sm-3 col-form-label">New Structure Type <span
                                                        class="text-danger">*</span></label>
                                                <div class="col-sm-9">
                                                    <select class="form-control" name="new_structure_type"
                                                        id="newStructureTypeSelect">
                                                        <option value="">Select</option>
                                                    </select>
                                                </div>
                                            </div><br />

                                            <div class="form-group row">
                                                <label class="col-sm-3 col-form-label">Order File <span
                                                        class="text-danger">*</span></label>
                                                <div class="col-sm-9">
                                                    <input type="file" name="structure_type_order_file"
                                                        class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                </div>

                                <div class="card-footer border-top border-light">
                                    <button type="submit" class="btn btn-success me-2" id="submitBtn">
                                        {{ isset($annexuretwoData) ? 'Update' : '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>
<!-- jQuery UI (should load after vendor.min.js) -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

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

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


<script>
    $(document).ready(function() {
        // Show error/success messages using Toastr
        @if ($errors->any())
            @foreach ($errors->all() as $error)
                toastr.error("{{ $error }}");
            @endforeach
        @endif

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

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

        $('#annexureForm').on('submit', function() {
            const submitBtn = document.getElementById('submitBtn');
            if (submitBtn) {
                submitBtn.disabled = true;
                submitBtn.innerHTML = 'Submitting...';
            }
        });

    });
</script>
<!-- Custom JS -->
<script src="{{ asset('assets/js/pages/flgrc/annexureexisting.js') }}"></script>
</body>

</html>