@include('layouts.header', ['title' => 'Annexure - II Commercial List'])
<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.project-details', ['project' => $project])

                <!-- Dynamic Table Wrapper -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <!-- Card Header -->
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h4 class="header-title mb-0 text-end float-end">
                                    <span>Annexure - <span
                                            style="font-variant: small-caps; font-family: Georgia, serif; font-size: 1.5em;">ii</span></span>
                                    Commercial List
                                </h4>
                            </div>

                            <div class="card-body">
                                <div class="table-wrapper">
                                    <div style="overflow-x: auto; width: 100%;">
                                        {{-- NEW Table from AnnexureTwo --}}
                                        <table id="basic-datatable"
                                            class="table table-striped dt-responsive nowrap w-100">
                                            <thead>
                                                <tr>
                                                    <th>Sl. No.</th>
                                                    <th>Map No.</th>
                                                    <th>Identification No</th>
                                                    <th>Address</th>
                                                    <th>Name of Owner</th>
                                                    <th>Affected Area</th>
                                                    <th>Structure Use</th>
                                                    <th>Eligibility Status</th>
                                                    {{-- <th>Status</th> --}}
                                                    <th>Allotment Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($annexureTwos as $item)
                                                    @if ($item->allotment_status === 1)
                                                        @continue
                                                    @endif
                                                    <tr>
                                                        <td>{{ $loop->iteration }}</td>
                                                        <td>{{ $item->map_id ?? 'N/A' }}</td>
                                                        <td>{{ $item->structure_id ?? 'N/A' }}</td>
                                                        <td>{{ $item->address ?? 'N/A' }}</td>
                                                        <td>
                                                            @if ($item->new_owner_name)
                                                                <del class="text-muted">{{ $item->owner_name }}</del>
                                                                <span>{{ $item->new_owner_name }}</span>
                                                            @else
                                                                {{ $item->owner_name ?? 'N/A' }}
                                                            @endif
                                                        </td>
                                                        <td>{{ $item->carpet_area ?? 'N/A' }}</td>
                                                        <td>
                                                            @switch($item->structure_use)
                                                                @case('1')
                                                                    Residential
                                                                @break

                                                                @case('2')
                                                                    Commercial
                                                                @break

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

                                                                @case('4')
                                                                    Others
                                                                @break

                                                                @default
                                                                    N/A
                                                            @endswitch
                                                        </td>
                                                        <td>{{ $item->eligibility_status ?? 'N/A' }}</td>
                                                        {{-- <td>
                                                            <span
                                                                class="badge bg-{{ $item->status === 'Removed' ? 'danger' : ($item->status === 'Name Changed' ? 'warning' : 'success') }}">
                                                                {{ $item->status ?? ucfirst($item->status) }}
                                                            </span>
                                                        </td> --}}
                                                        <td>
                                                            <a href="#"
                                                                class="text-reset fs-16 px-1 update-assign-status"
                                                                data-annexure-id="{{ $item->id }}"
                                                                data-project-id="{{ $item->project_id }}"
                                                                data-papcarpetarea-id="{{ $item->carpet_area }}"
                                                                data-bs-toggle="tooltip" data-bs-placement="top"
                                                                title="Tap to commercial assign">
                                                                <i class="mdi mdi-list-status"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>

                                        </table>

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

        <!-- Commercial Assign Modal -->
        <div class="modal fade" id="temporaryAssignModal" tabindex="-1" aria-labelledby="temporaryAssignModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <form id="temporaryAssignForm" method="POST" enctype="multipart/form-data"
                    action="{{ route('admin.commercialmanual.assign') }}">
                    @csrf
                    <input type="hidden" name="annexure_two_id" id="modalAnnexureId">
                    <input type="hidden" name="project_id" id="modalProjectId">

                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Commercial Shop Allotment</h5>

                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>

                        <div class="modal-body">
                            <div id="modalCarpetArea" style="font-size: 14px; color: #666;"></div><br />
                            <div class="mb-3">
                                <label>Location</label>
                                <select class="form-select" id="locationSelect" name="location_id" required>
                                    <option value="">Select Location</option>
                                    @foreach ($locations as $location)
                                        <option value="{{ $location->id }}">{{ $location->location }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3">
                                <label>Building</label>
                                <select class="form-select" id="buildingSelect" name="building_id" required>
                                    <option value="">Select Building</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label>Wing</label>
                                <select class="form-select" id="wingSelect" name="wing_name" required>
                                    <option value="">Select Wing</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label>Floor No</label>
                                <select class="form-select" id="floorSelect" name="floor_no" required>
                                    <option value="">Select Floor No</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label>Room No (Room Type: Shop)</label>
                                <select class="form-select" id="roomSelect" name="room_no" required>
                                    <option value="">Select Room</option>
                                </select>
                            </div>

                            <div class="mb-3" id="partialAssignDiv" style="display: none;">
                                <label>PAP Allocation Preference</label>
                                <select class="form-select" name="partial_assign_choice" id="partialAssignChoice">
                                    <option value="">Select Preference</option>
                                    <option value="full">Assign Full Place</option>
                                    <option value="half">Assign Partial Place</option>
                                </select>
                            </div>

                            {{-- Upload Document for Assign Full --}}
                            <div class="mb-3" id="docUploadDiv" style="display: none;">
                                <label>Upload Approval Document (PDF, JPG, PNG)</label>
                                <input type="file" class="form-control" name="approval_document">
                                <small class="text-muted">Required when assigning full room if room area exceeds PAP
                                    affected area.</small>
                            </div>

                            {{-- Show virtual split when Assign Partial --}}
                            <div class="mb-3" id="splitInfoDiv" style="display: none;">
                                <div class="alert alert-info">
                                    Room will be split as follows:
                                    <br>
                                    <strong>Shop A</strong>: <span id="shopAInfo">--</span> sq.ft (Assigned to PAP)
                                    <br>
                                    <strong>Shop B</strong>: <span id="shopBInfo">--</span> sq.ft (Available for future
                                    assignment)
                                </div>
                            </div>




                        </div>

                        <div class="modal-footer">
                            <button type="submit" class="btn btn-success me-2">Assign</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        </div>

                    </div>
                </form>
            </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>

@include('admin.load-datatable')


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

        @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

        let papCarpetArea = 0;

        $('.update-assign-status').on('click', function() {
            const annexureId = $(this).data('annexure-id');
            const projectId = $(this).data('project-id');
            papCarpetArea = parseFloat($(this).data(
                'papcarpetarea-id')); // parseFloat to ensure number

            // console.log(papCarpetArea);

            $('#modalAnnexureId').val(annexureId);
            $('#modalProjectId').val(projectId);

            $('#modalCarpetArea').text('Total PAP Affected Area(Sq. Ft.) - ' + papCarpetArea);

            // Reset selects
            $('#locationSelect').val('').trigger('change');
            $('#buildingSelect').html('<option value="">Select Building</option>');
            $('#wingSelect').html('<option value="">Select Wing</option>');
            $('#floorSelect').html('<option value="">Select Floor No</option>');
            $('#roomSelect').html('<option value="">Select Room</option>');

            $('#temporaryAssignModal').modal('show');
        });


        // Fetch Buildings based on Location
        $('#locationSelect').on('change', function() {
            const locationId = $(this).val();
            $('#buildingSelect').html('<option>Loading...</option>');
            $.ajax({
                url: '{{ route('admin.get.buildings') }}',
                data: {
                    location_id: locationId
                },
                success: function(data) {
                    $('#buildingSelect').html('<option value="">Select Building</option>');
                    $.each(data, function(index, building) {
                        $('#buildingSelect').append(
                            `<option value="${building.id}">${building.building_name} (${building.building_no})</option>`
                        );
                    });
                }
            });
        });

        // Fetch Wings based on Building
        $('#buildingSelect').on('change', function() {
            const buildingId = $(this).val();
            $('#wingSelect').html('<option>Loading...</option>');
            $.ajax({
                url: '{{ route('admin.get.wings') }}',
                data: {
                    building_id: buildingId
                },
                success: function(data) {
                    $('#wingSelect').html('<option value="">Select Wing</option>');

                    if (data.length === 0) {
                        // No wings available — call floor and room fetch directly
                        const buildingId = $('#buildingSelect').val();
                        const wing = ''; // or null if backend expects null

                        // Fetch floors
                        fetchFloors(buildingId, wing);

                        // Fetch rooms
                        fetchRooms(buildingId, wing);
                    } else {
                        // Normal flow: populate wing dropdown
                        $.each(data, function(i, wing) {
                            $('#wingSelect').append(
                                `<option value="${wing}">${wing}</option>`);
                        });
                    }
                }

            });
        });

        // Fetch Floors based on Wing
        $('#wingSelect').on('change', function() {
            const buildingId = $('#buildingSelect').val();
            const wing = $(this).val(); // Might be blank ("")

            // Check if wing is blank or selected
            if (!wing || wing.trim() === '') {
                console.log("No wing selected, still fetching floor/room");
            }

            fetchFloors(buildingId, wing);
            fetchRooms(buildingId, wing);
        });

        $('#floorSelect').on('change', function() {
            const buildingId = $('#buildingSelect').val();
            const wing = $('#wingSelect').val(); // might be blank
            const floorNo = $(this).val();

            fetchRooms(buildingId, wing, floorNo); // now includes floor filter
        });

        // $('#roomSelect').off('change').on('change', function() {
        //     const selectedRoom = $(this).find(':selected');
        //     const roomArea = parseFloat(selectedRoom.data('carpet-area')) || 0;

        //     if (papCarpetArea < roomArea) {
        //         $('#partialAssignDiv').show();
        //     } else {
        //         $('#partialAssignDiv').hide();
        //         $('#partialAssignChoice').val('');
        //     }

        // });

        $('#roomSelect').off('change').on('change', function() {
            const selectedRoom = $(this).find(':selected');
            const roomArea = parseFloat(selectedRoom.data('carpet-area')) || 0;

            if (roomArea === papCarpetArea) {
                // ✅ Exact match — auto-assign
                $('#partialAssignDiv').hide();
                $('#docUploadDiv').hide();
                $('#autoAssignBtn').show(); // Optional: show direct assign button
            } else if (roomArea > papCarpetArea) {
                // ✅ More area — show choice for full/partial
                $('#partialAssignDiv').show();
                $('#docUploadDiv').hide();
                $('#autoAssignBtn').hide();
                $('#partialAssignChoice').val('');
            } else {
                // ❌ Room smaller — not assignable
                $('#partialAssignDiv').hide();
                $('#docUploadDiv').hide();
                $('#autoAssignBtn').hide();
                // alert("Selected room area is smaller than PAP's affected area.");
            }
        });


        $('#partialAssignChoice').on('change', function() {
            const choice = $(this).val();
            const selectedRoom = $('#roomSelect').find(':selected');
            const roomArea = parseFloat(selectedRoom.data('carpet-area')) || 0;

            if (choice === 'full') {
                $('#docUploadDiv').show();
                $('#splitInfoDiv').hide();
            } else if (choice === 'half') {
                const shopA = papCarpetArea;
                const shopB = roomArea - papCarpetArea;
                $('#shopAInfo').text(shopA);
                $('#shopBInfo').text(shopB);
                $('#docUploadDiv').hide();
                $('#splitInfoDiv').show();
            } else {
                $('#docUploadDiv').hide();
                $('#splitInfoDiv').hide();
            }
        });



    });

    function fetchFloors(buildingId, wing) {
        $('#floorSelect').html('<option>Loading...</option>');
        $.ajax({
            url: '{{ route('admin.get.AnnexureFloors') }}',
            data: {
                building_id: buildingId,
                wing_name: wing
            },
            success: function(data) {
                $('#floorSelect').html('<option value="">Select Floor No</option>');
                $.each(data, function(i, floor) {
                    $('#floorSelect').append(`<option value="${floor}">${floor}</option>`);
                });
            }
        });
    }

    function fetchRooms(buildingId, wing, floorNo = null) {
        $('#roomSelect').html('<option>Loading...</option>');

        $.ajax({
            url: '{{ route('admin.get.AnnexureRooms') }}',
            data: {
                building_id: buildingId,
                wing_name: wing,
                floor_no: floorNo,
                room_type: 28 // or 1 or whatever you use for Shop/Niwasi
            },
            success: function(response) {
                $('#roomSelect').html('<option value="">Select Room With Area(Sq. Ft.)</option>');
                $.each(response.rooms, function(i, room) {
                    $('#roomSelect').append(
                        `<option value="${room.id}" data-carpet-area="${room.carpet_area}">${room.room_no} (${room.carpet_area})</option>`
                    );
                });
            }
        });
    }
</script>

</body>