@include('layouts.header', ['title' => ' Annexure New Pap View'])
<div class="wrapper">
    @include('layouts.navbar')
    @include('layouts.sidebar')

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

                @include('components.annexure-pap-view', ['annexure' => $annexure])


                <!-- Dynamic Table Wrapper -->
                <div class="row">
                    <div class="col-md-12">
                        {{-- Annexure Two PAP Record --}}
                        <div class="card">
                            <div class="card-header">
                                <h5>PAP Entry Details</h5>
                            </div>
                            <div class="card-body">
                                <dl class="row">
                                    <dt class="col-sm-3">Owner Name</dt>
                                    <dd class="col-sm-9">
                                        {{ $annexure->new_owner_name ?? $annexure->owner_name }}
                                    </dd>

                                    <dt class="col-sm-3">Address</dt>
                                    <dd class="col-sm-9">{{ $annexure->address }}</dd>

                                    <dt class="col-sm-3">Map ID</dt>
                                    <dd class="col-sm-9">{{ $annexure->map_id ?? 'N/A' }}</dd>

                                    <dt class="col-sm-3">Structure ID</dt>
                                    <dd class="col-sm-9">{{ $annexure->structure_id ?? 'N/A' }}</dd>

                                    <dt class="col-sm-3">Carpet Area</dt>
                                    <dd class="col-sm-9">{{ $annexure->carpet_area ?? 'N/A' }}</dd>

                                    <dt class="col-sm-3">Structure Type</dt>
                                    <dd class="col-sm-9">
                                        @switch($annexure->structure_use)
                                            @case(1)
                                                Residential
                                            @break

                                            @case(2)
                                                Commercial
                                            @break

                                            @case(3)
                                                Resi-Cum-Comm
                                            @break

                                            @case(4)
                                                Others
                                            @break

                                            @default
                                                Unknown
                                        @endswitch
                                    </dd>

                                    <dt class="col-sm-3">Eligibility Status</dt>
                                    <dd class="col-sm-9">{{ $annexure->eligibility_status ?? 'Pending' }}</dd>

                                    <dt class="col-sm-3">Record Status</dt>
                                    <dd class="col-sm-9">
                                        {{-- @php
                                            $statusLabels = [
                                                'active' => 'Active',
                                                'removed' => 'Removed from Annexure',
                                                'name_changed' => 'Name Changed',
                                            ];
                                        @endphp --}}

                                        <span
                                            class="badge bg-{{ $annexure->status === 'removed' ? 'danger' : ($annexure->status === 'name_changed' ? 'warning' : 'success') }}">
                                            {{ $statusLabels[$annexure->status] ?? ucfirst($annexure->status) }}
                                        </span>
                                    </dd>
                                    @if ($annexure->change_name_order_file)
                                        <dd class="col-sm-12">
                                            <a href="javascript:void(0);" class="btn btn-success me-2 open-preview"
                                                role="button" data-bs-toggle="tooltip" data-bs-placement="top"
                                                data-file-url="{{ asset('storage/annexurepaps/changefiles/' . $annexure->change_name_order_file) }}"
                                                data-file-type="{{ pathinfo($annexure->change_name_order_file, PATHINFO_EXTENSION) }}">Change
                                                Order
                                                File</a>
                                        </dd>
                                    @endif
                                    @if ($annexure->remove_order_file)
                                        <dd class="col-sm-12">
                                            <a href="javascript:void(0);" class="btn btn-success me-2 open-preview"
                                                role="button" data-bs-toggle="tooltip" data-bs-placement="top"
                                                data-file-url="{{ asset('storage/annexurepaps/removalfiles/' . $annexure->remove_order_file) }}"
                                                data-file-type="{{ pathinfo($annexure->remove_order_file, PATHINFO_EXTENSION) }}">Removal
                                                Order
                                                File</a>
                                        </dd>
                                    @endif
                                    @if ($annexure->structure_type_order_file)
                                        <dd class="col-sm-12">
                                            <a href="javascript:void(0);" class="btn btn-success me-2 open-preview"
                                                role="button" data-bs-toggle="tooltip" data-bs-placement="top"
                                                data-file-url="{{ asset('storage/annexurepaps/structuretypefiles/' . $annexure->structure_type_order_file) }}"
                                                data-file-type="{{ pathinfo($annexure->structure_type_order_file, PATHINFO_EXTENSION) }}">Structure
                                                Type
                                                Order
                                                File</a>
                                        </dd>
                                    @endif

                                    @if ($annexure->flgrc_pap_data == '1' && $annexure->flgrc_order_file)
                                        <dd class="col-sm-12">
                                            <a href="javascript:void(0);" class="btn btn-success me-2 open-preview"
                                                role="button" data-bs-toggle="tooltip" data-bs-placement="top"
                                                data-file-url="{{ asset('storage/annexurepaps/flgrcOrderFiles/' . $annexure->flgrc_order_file) }}"
                                                data-file-type="{{ pathinfo($annexure->flgrc_order_file, PATHINFO_EXTENSION) }}">
                                                FLGRC Order File
                                            </a>
                                        </dd>
                                    @endif

                                </dl>

                                @if ($annexure->flgrc_pap_data !== '1')
                                    {{-- Dropdown Action --}}
                                    <div class="form-group row mt-3">
                                        <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="change_name">Change Name</option>
                                                <option value="remove_annexure">Remove From Annexure two</option>
                                                  @if ($annexure->structure_use !== '1')
                                                <option value="structure_type_annexure">Change Structure Type</option>
                                                @endif
                                            </select>
                                        </div>
                                    </div>

                                    {{-- Change Name Fields --}}
                                    <div id="changeNameFields" class="mt-3 d-none">
                                        <div class="form-group row">
                                            <label class="col-sm-3 col-form-label">New Name <span
                                                    class="text-danger">*</span></label>
                                            <div class="col-sm-9">
                                                <input type="text" name="new_owner_name" required
                                                    class="form-control">
                                            </div>
                                        </div><br />
                                        <div class="form-group row">
                                            <label class="col-sm-3 col-form-label">Remarks <span
                                                    class="text-danger">*</span></label>
                                            <div class="col-sm-9">
                                                <textarea name="change_name_remarks" required class="form-control"></textarea>
                                            </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="change_name_order_file" required
                                                    class="form-control">
                                            </div>
                                        </div>
                                    </div>

                                    {{-- Remove Fields --}}
                                    <div id="removeFields" class="mt-3 d-none">
                                        <div class="form-group row">
                                            <label class="col-sm-3 col-form-label">Remarks <span
                                                    class="text-danger">*</span></label>
                                            <div class="col-sm-9">
                                                <textarea name="remove_remarks" class="form-control" required></textarea>
                                            </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="remove_order_file" required
                                                    class="form-control">
                                            </div>
                                        </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" required>
                                                        <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" required>
                                                </div>
                                            </div>
                                        </div>

                                    <button class="btn btn-success mt-3" id="submitActionBtn">Submit Action</button>
                                @endif


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

            </div>
        </div>

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


<!-- Vendor JS -->
<script src="{{ asset('assets/js/vendor.min.js') }}"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
<script src="{{ asset('assets/js/app.min.js') }}"></script>

<script>
    const structureUse = {{ $annexure->structure_use }}; // Get current structure_use from Blade
    const structureOptions = {
        4: [ // Others
            {
                value: 1,
                label: 'Residential'
            },
            {
                value: 2,
                label: 'Commercial'
            }
        ],
        2: [ // Commercial
            {
                value: 1,
                label: 'Residential'
            }
        ],
        3: [ // Resi-Cum-Comm
            {
                value: 1,
                label: 'Residential'
            }
        ]
        // Residential (1) case not handled since no change applicable
    };

    document.getElementById('action').addEventListener('change', function() {
        let val = this.value;

        document.getElementById('changeNameFields').classList.add('d-none');
        document.getElementById('removeFields').classList.add('d-none');
        document.getElementById('structureTypeFields').classList.add('d-none');

        if (val === 'change_name') {
            document.getElementById('changeNameFields').classList.remove('d-none');
        } else if (val === 'remove_annexure') {
            document.getElementById('removeFields').classList.remove('d-none');
        } else if (val === 'structure_type_annexure') {
            const select = document.getElementById('newStructureTypeSelect');
            select.innerHTML = `<option value="">Select</option>`; // Reset

            if (structureOptions[structureUse]) {
                structureOptions[structureUse].forEach(opt => {
                    const option = document.createElement('option');
                    option.value = opt.value;
                    option.textContent = opt.label;
                    select.appendChild(option);
                });
            }

            document.getElementById('structureTypeFields').classList.remove('d-none');
        }
    });

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

        let action = document.getElementById('action').value;

        if (!action) {
            alert('Please select an action.');
            return;
        }

        const formData = new FormData();
        formData.append('_token', '{{ csrf_token() }}');
        formData.append('action', action);
        formData.append('annexure_id', '{{ $annexure->id }}');

        if (action === 'change_name') {
            const newName = document.querySelector('[name="new_owner_name"]').value.trim();
            const remarks = document.querySelector('[name="change_name_remarks"]').value.trim();
            const fileInput = document.querySelector('[name="change_name_order_file"]');

            if (!newName || !remarks || fileInput.files.length === 0) {
                alert("Please fill all Change Name fields (Name, Remarks, and File).");
                return;
            }

            formData.append('new_owner_name', newName);
            formData.append('change_name_remarks', remarks);
            formData.append('change_name_order_file', fileInput.files[0]);

        } else if (action === 'remove_annexure') {
            const remarks = document.querySelector('[name="remove_remarks"]').value.trim();
            const fileInput = document.querySelector('[name="remove_order_file"]');

            if (!remarks || fileInput.files.length === 0) {
                alert("Please fill all Remove fields (Remarks and File).");
                return;
            }

            formData.append('remove_remarks', remarks);
            formData.append('remove_order_file', fileInput.files[0]);

        } else if (action === 'structure_type_annexure') {
            const newType = document.querySelector('[name="new_structure_type"]').value;
            const fileInput = document.querySelector('[name="structure_type_order_file"]');

            if (!newType || fileInput.files.length === 0) {
                alert("Please fill all Structure Type fields (Type and File).");
                return;
            }

            formData.append('new_structure_type', newType);
            formData.append('structure_type_order_file', fileInput.files[0]);
        }

        fetch('{{ route('admin.annexure.action.update') }}', {
                method: 'POST',
                body: formData
            }).then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('Success!');
                    location.reload();
                } else {
                    alert('Error: ' + (data.message ?? 'Something went wrong.'));
                }
            }).catch(err => {
                console.error(err);
                alert('AJAX Failed!');
            });
    });
</script>


{{-- <script>
    document.getElementById('action').addEventListener('change', function() {
        let val = this.value;

        document.getElementById('changeNameFields').classList.add('d-none');
        document.getElementById('removeFields').classList.add('d-none');

        if (val === 'change_name') {
            document.getElementById('changeNameFields').classList.remove('d-none');
        } else if (val === 'remove_annexure') {
            document.getElementById('removeFields').classList.remove('d-none');
        }
    });

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

        let action = document.getElementById('action').value;

        if (!action) {
            alert('Please select an action.');
            return;
        }

        const formData = new FormData();
        formData.append('_token', '{{ csrf_token() }}');
        formData.append('action', action);
        formData.append('annexure_id', '{{ $annexure->id }}');

        // CHANGE NAME
        if (action === 'change_name') {
            const newName = document.querySelector('[name="new_owner_name"]').value.trim();
            const remarks = document.querySelector('[name="change_name_remarks"]').value.trim();
            const fileInput = document.querySelector('[name="change_name_order_file"]');

            if (!newName || !remarks || fileInput.files.length === 0) {
                alert("Please fill all Change Name fields (Name, Remarks, and File).");
                return;
            }

            formData.append('new_owner_name', newName);
            formData.append('change_name_remarks', remarks);
            formData.append('change_name_order_file', fileInput.files[0]);

            // REMOVE ANNEXURE
        } else if (action === 'remove_annexure') {
            const remarks = document.querySelector('[name="remove_remarks"]').value.trim();
            const fileInput = document.querySelector('[name="remove_order_file"]');

            if (!remarks || fileInput.files.length === 0) {
                alert("Please fill all Remove From Annexure fields (Remarks and File).");
                return;
            }

            formData.append('remove_remarks', remarks);
            formData.append('remove_order_file', fileInput.files[0]);
        }

        // AJAX Call
        fetch('{{ route('admin.annexure.action.update') }}', {
                method: 'POST',
                body: formData
            }).then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('Success!');
                    location.reload();
                } else {
                    alert('Error: ' + (data.message ?? 'Something went wrong.'));
                }
            }).catch(err => {
                console.error(err);
                alert('AJAX Failed!');
            });
    }); --}}
</script>


</body>