@include('layouts.header', ['title' => 'Draw Lottery'])
<!-- Begin page -->
<div class="wrapper">


    <!-- ============================================================== -->
    <!-- Start Page Content here -->
    <!-- ============================================================== -->
    <style>
        .card {
            color: #000 !important;
        }
        .card table {
            font-size: 18px;
            text-align: center;
        }
        .shuffle-card .card-body{
            max-height: 500px;
            overflow-y: auto;
        }
        .loader {
            width: 40px;
            height: 40px;
            position: absolute; /* or relative depending on how you want it positioned */
            top: 50%;
            left: 50%;
            z-index: 9999; /* Ensure it is above other content */
        }
        .allotment-loader {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5);
            z-index: 2;
            cursor: pointer;
        }

        .allotment-loader img {
            position: absolute;
            top: 35%;
            left: 35%;
        }
    </style>
    <div class="container draw-lottery-container">
        <div class="content">

            <!-- Start Content-->
            <div class="container-fluid">

                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">
                            <div class="page-title-right"></div>
                            <h4 class="page-title"><a href="{{ route('admin.rnrproject.edit', encrypt($project->id)) }}">< Back to Project Lottery Schedule</a></h4>
                        </div>
                    </div>
                </div>
                <!-- end page title -->

                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="text-center mb-4">
                                    <img width="400px" height="inherit" src="{{ asset('assets/images/Mmrda-logo.png') }}" alt="logo">
                                </div>
                                <h1 class="text-center">MMRDA E-Lottery</h1>
                                <h3 class="text-center">{{ $project->name }}</h3>
                                <hr>
                                <div class="loader allotment-loader" style="display: none;">
                                    <img width="400px" height="inherit" src="{{ asset('assets/images/lottery-animation.gif') }}" alt="logo">
                                </div>

                                <div class="row">
                                    <div class="col-5">
                                        <div class="card shuffle-card">
                                            <div class="card-header d-flex justify-content-between align-items-center">
                                                <h4 class="header-title mb-0">PAP List</h4>
                                            </div>
                                            <div class="card-body">
                                                <div class="loader pap-loader" style="display: none;">
                                                    <div class="spinner-border" role="status">
                                                    </div>
                                                </div>
                                                <table id="pap_table"
                                                    class="table table-bordered table-style-2 dt-responsive nowrap w-100">
                                                    <thead>
                                                        <tr>
                                                            <th>Structure ID</th>
                                                            <th>PAP Name</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="papListBody">
                                                        @foreach ($blockedSurveyPapRooms as $blockedSurveyPapRoom)
                                                            <tr>
                                                                <td>{{ $blockedSurveyPapRoom->annexureTwo->structure_id ?? '-' }} <br><span class="badge text-bg-secondary">{{ $blockedSurveyPapRoom->annexureTwo->map_id }}</span></td>
                                                                <td>{{ $blockedSurveyPapRoom->annexureTwo->new_owner_name ?? $blockedSurveyPapRoom->annexureTwo->owner_name ?? '-' }}</td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                            @if (!$lottery->seed_no)
                                                <div class="card-footer text-center">
                                                    <button type="button" class="btn btn-success rounded-pill btn-lg" id="shufflePapBtn">Shuffle PAPs</button>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-2"></div>
                                    <div class="col-5">
                                        <div class="card shuffle-card">
                                            <div class="card-header d-flex justify-content-between align-items-center">
                                                <h4 class="header-title mb-0">Tenement List</h4>
                                            </div>
                                            <div class="card-body">
                                                <div class="loader tenament-loader" style="display: none;">
                                                    <div class="spinner-border" role="status">
                                                    </div>
                                                </div>
                                                <table id="tenament_table"
                                                    class="table table-bordered table-style-2 dt-responsive nowrap w-100">
                                                    <thead>
                                                        <tr>
                                                            <th>Room No</th>
                                                            <th>Floor</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="tenamentListBody">
                                                        @foreach ($inventories as $index => $inv)
                                                            <tr>
                                                                <td>{{ $inv->room_no ?? 'N/A' }}</td>
                                                                <td>{{ $inv->floor_no ?? 'N/A' }}</td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                            @if (!$lottery->seed_no)
                                                <div class="card-footer text-center">
                                                    <button type="button" class="btn btn-success rounded-pill btn-lg" id="shuffleTenamentBtn">Suffle Tenements</button>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                @if ($project->status_id === 13)
                                    <div class="col-md-12 text-center mt-3">
                                        <a href="{{ route('admin.rnrprojectsurveydraftallotmentletter.index', ['projectId' => encrypt($project->id)]) }}"
                                            class="btn btn-primary btn-lg"
                                        >
                                            Allotment List
                                        </a>
                                    </div>
                                    <div class="row mt-4">
                                        <div class="col-12">
                                            <div class="card shuffle-card">
                                                <div class="card-header d-flex justify-content-between align-items-center">
                                                    <h4 class="header-title mb-0">Allotment List</h4>
                                                </div>
                                                <div class="card-body">
                                                    <table id="allotment_table"
                                                        class="table table-bordered table-style-2 dt-responsive nowrap w-100">
                                                        <thead>
                                                            <tr>
                                                                <th>Sr. No.</th>
                                                                <th>Structure ID</th>
                                                                <th>PAP Name</th>
                                                                <th>Building Name</th>
                                                                <th>Room No</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @if(count($allotments))
                                                                @foreach ($allotments as $key => $allotment)
                                                                    <tr>
                                                                        <td>{{ $key + 1 }}</td>
                                                                        <td>{{ $allotment->annexureTwo->structure_id ?? '-' }} <br> <span class="badge text-bg-secondary">{{ $allotment->annexureTwo->map_id }}</span></td>
                                                                        <td>{{ $allotment->annexureTwo->new_owner_name ?? $allotment->annexureTwo->owner_name ?? '-' }}</td>
                                                                        <td>{{ $allotment->inventoryBuildingRoom->building->building_name }} ({{ $allotment->inventoryBuildingRoom->building->building_no }})</td>
                                                                        <td>{{ $allotment->inventoryBuildingRoom->room_no }}</td>
                                                                    </tr>
                                                                @endforeach
                                                            @else
                                                                <tr>
                                                                    <td colspan="5">No record found</td>
                                                                </tr>
                                                            @endif
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @else
                                    @if (!$lottery->seed_no)
                                        <form method="POST" action="{{ route('admin.drawlottery.add_seed_number', ['projectId' => encrypt($project->id)]) }}">
                                            @csrf
                                            <div class="row my-3">
                                                <div class="col-md-3">
                                                    <label for="seed1" class="mb-2">Seed 1:</label>
                                                    <input type="number" id="seed1" class="form-control" placeholder="Enter Number" required/>
                                                </div>
                                                <div class="col-md-3">
                                                    <label for="seed2" class="mb-2">Seed 2:</label>
                                                    <input type="number" id="seed2" class="form-control" placeholder="Enter Number" required/>
                                                </div>
                                                <div class="col-md-3">
                                                    <label for="seed3" class="mb-2">Seed 3:</label>
                                                    <input type="number" id="seed3" class="form-control" placeholder="Enter Number" required/>
                                                </div>
                                                <div class="col-md-3">
                                                    <label for="seed3" class="mb-2">Average Seed Number:</label>
                                                    <input type="number" id="finalSeed" name="finalSeed" class="form-control" readonly required />
                                                </div>
                                            </div>
                                            <div class="row my-3">
                                                <div class="col-12">
                                                    <div class="mt-3 text-center">
                                                        <button type="submit"
                                                            class="btn btn-dark btn-lg"
                                                        >
                                                            Save Lottery Data
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    @else
                                        <div class="row mt-4">
                                            <div class="offset-md-4 col-md-4">
                                                <div class="card widget-flat text-bg-success">
                                                    <div class="card-header">
                                                        <div class="float-end">
                                                            <i class="ri-equalizer-line widget-icon"></i>
                                                        </div>
                                                        <h6 class="text-uppercase mt-0" title="Customers">Average Seed Number</h6>
                                                        <h2 class="my-2">{{ $lottery->seed_no }}</h2>
                                                    </div>
                                                </div>
                                            </div>
                                            @if ($project->status_id === 11)
                                                <div class="col-12">
                                                    <form method="POST" action="{{ route('admin.drawlottery.draw', ['projectId' => encrypt($project->id)]) }}">
                                                        @csrf
                                                        <div class="mt-3 text-center"> 
                                                            <button type="submit"
                                                                class="btn btn-dark btn-lg"
                                                            >
                                                                Draw Lottery
                                                            </button>
                                                        </div>
                                                    </form>
                                                </div>
                                            @endif
                                        </div>
                                    @endif
                                @endif
                                <br>
                                <br>
                                <br>
                            </div>
                        </div>
                    </div>
                </div>

            </div> <!-- container -->

        </div> <!-- content -->

        <!-- Include the Footer -->
        @include('layouts.footer')

    </div>

</div>
<!-- END wrapper -->

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

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

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


<script>
    let csrfToken = $('meta[name="csrf-token"]').attr('content');  // Get CSRF token from meta tag

    $('#shufflePapBtn').click(function() {
        shufflePAPTable();
    });

    $('#shuffleTenamentBtn').click(function() {
        shuffleTenamentTable();
    });

    $('#drawLotteryBtn').click(function() {
        const projectId = $(this).data('project-id');

        // Show loader popup modal
        $('#loaderModal').modal('show');

        const startTime = new Date().getTime();

        $('.allotment-loader').show(); // Show loader

        setTimeout(() => {
            $.ajax({
                url: `/rnr/AnnexuretwoInventoryAssign/${projectId}`,
                type: 'GET',
                success: function(response) {
                    const elapsed = new Date().getTime() - startTime;
                    const delay = Math.max(3000 - elapsed, 0); // ensure minimum 3 sec

                    let tbody = $("#allotment_table").find("tbody");
                    $row = '';
                    $.each(response.assigned_allotments, function(i, e) {
                        $row += '<tr>';
                        $row += '<td>' + e.survey.structure_id + '</td>';
                        $row += '<td>' + e.survey.pap_name + '</td>';
                        $row += '<td>' + e.inventory_building_room.room_no + '</td>';
                        $row += '<td>' + e.inventory_building_room.floor_no + '</td>';
                        $row += '</tr>';
                    });
                    tbody.html($row);
                    
                    toastr.success('Lottery Drawn Successfully!');
                    
                    setTimeout(() => {
                        $('.allotment-loader').hide(); // Hide loader
                    }, 2000);

                    $('#allotmentLetterBtn').show(); // Show the allotment letter button
                    $("#drawLotteryBtn").html('Redraw Lottery');
                },
                error: function(xhr) {
                    const elapsed = new Date().getTime() - startTime;
                    const delay = Math.max(3000 - elapsed, 0);

                    setTimeout(() => {
                        $('.allotment-loader').hide();

                        let errorMsg = 'Something went wrong. Please try again.';

                        if (xhr.responseJSON && xhr.responseJSON.error) {
                            errorMsg = xhr.responseJSON.error;
                        } else if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMsg = xhr.responseJSON.message;
                        }

                        toastr.error(errorMsg);
                    }, delay);
                }
            });
        }, 5000);
    });

    function shuffleArray(array) {
        for (var i = array.length - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            var temp = array[i];
            array[i] = array[j];
            array[j] = temp;
        }
    }

    function shufflePAPTable() {
        $('.pap-loader').show(); // Show loader
        $.ajax({
            url: "{{ route('admin.drawlottery.sufflePapList', ['projectId' => encrypt($project->id)]) }}",
            type: 'GET',
            headers: {
                'X-CSRF-TOKEN': csrfToken  // Send CSRF token in the header
            },
            success: function (response) {
                console.log(response);
                if (response?.blockedSurveyPapRooms) {
                    let html = '';
                    response.blockedSurveyPapRooms.forEach((blockedSurveyPapRoom, index) => {
                        html += '<tr>'
                        html += `<td>${blockedSurveyPapRoom?.annexure_two?.structure_id || '-'}</td>`;
                        html += `<td>${blockedSurveyPapRoom?.annexure_two?.new_owner_name || blockedSurveyPapRoom?.annexure_two?.owner_name || '-'}</td>`;
                        html += '</tr>';
                    })
                    $("#papListBody").html(html)
                    $('.pap-loader').hide();
                }
            },
            error: function () {
                alert('Some error happened while shuffling PAP')
                $('.pap-loader').hide();
            }
        });
    }

    function shuffleTenamentTable() {
        $('.tenament-loader').show(); // Show loader
        $.ajax({
            url: "{{ route('admin.drawlottery.suffleTenamentList', ['projectId' => encrypt($project->id)]) }}",
            type: 'GET',
            // headers: {
            //     'X-CSRF-TOKEN': csrfToken  // Send CSRF token in the header
            // },
            success: function (response) {
                console.log(response);
                if (response?.inventories) {
                    let html = '';
                    response.inventories.forEach((inventory, index) => {
                        html += '<tr>'
                        html += `<td>${inventory.inventory_building_rooms?.room_no || 'N/A'}</td>`;
                        html += `<td>${inventory.inventory_building_rooms?.floor_no || 'N/A'}</td>`;
                        html += '</tr>';
                    })
                    $("#tenamentListBody").html(html)
                    $('.tenament-loader').hide();
                }
            },
            error: function () {
                alert('Some error happened while shuffling tenament')
                $('.tenament-loader').hide();
            }
        });
    }

    $("#seed1, #seed2, #seed3").keyup(function() {

        let seed1 = $("#seed1").val();
        let seed2 = $("#seed2").val();
        let seed3 = $("#seed3").val();
        console.log(seed1, seed2, seed3);
        
        if (seed1 === '' || seed2 === '' || seed3 === ''
            // !Number.isInteger(seed1) || !Number.isInteger(seed2) || !Number.isInteger(seed3)
        ) {
            $("#finalSeed").val('');
            return;
        }

        let avg = Math.round((Number(seed1) + Number(seed2) + Number(seed3)) / 3);
        $("#finalSeed").val(avg);
    });
</script>


</body>

</html>