@include('new_layouts.header')
<style>
    #loader {
        display: none;
    }
</style>
<div class="page-wrapper">
    @include('construction_project.side-menu')
    <div class="card m-3">

        <div class="card-header">
            <h3>{{ __('Workdone Import File') }}</h3>
            <button style="margin-left: 10px;" class="btn btn-outline-primary" href="#!" data-size="xl" data-url="{{ route('workdone_import_guide') }}"
                data-ajax-popup="true" data-bs-original-title="{{ __('Workdone Import Process') }}">
                {{ __('Guide') }} <li class="fa fa-book" style="margin-left: 10px;"></li>
            </button>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-3">
                    @include('layouts.project_setup')
                </div>
                <div class="col-9">
                    <div class="card">
                        <div class="card-body table-border-style">
                            <div class="card-body">
                                <form id="importForm" enctype="multipart/form-data">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <div class="form-group">
                                                <label for="file">{{ __('Type') }}</label>
                                                <div class="input-group">
                                                    <select class="form-control" name="type" id="type">
                                                        <option value="">Select Type</option>
                                                        <option value="0">3 .Progress Update</option>
                                                        <option value="2">4. Overrall Progress Update</option>
                                                    </select>

                                                </div>
                                            </div>
                                            <input type="hidden" class="form-control" id="company" name="company"
                                                value="{{ $company_id }}">
                                            <input type="hidden" class="form-control" id="project" name="project"
                                                value="{{ $project_id }}">
                                        </div>
                                        <div class="col-md-6 mb-3 d-flex align-items-end">
                                            <div class="form-group ml-auto">
                                                <!-- ml-auto to push button to the right -->
                                                <img src="{{ asset('admin/loader/ajax_loader.gif') }}" id="loader"
                                                    class="ml-3">
                                                <button type="button" class="btn btn-primary" id="workdone"
                                                    style="display: none;">Save</button>
                                                <button type="button" class="btn btn-primary" id="overral_percentage"
                                                    style="display: none;">Save</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('new_layouts.footer')


    <script>
        $(document).ready(function() {
        
            // Handle change event of type select box
            $('#type').change(function() {
                var selectedType = $(this).val();

                if (selectedType === '0') {
                    // Progress Update selected
                    $('#workdone').show();
                    $('#importsave').hide();
                    $('#overral_percentage').hide();
                    $('#holiday_excel').hide();
                    $('#import_excel').hide();
                    $('#file_type').hide();
                } else if (selectedType === '2') {
                    $('#workdone').hide();
                    $('#importsave').hide();

                    $('#file_type').hide();
                    $('#overral_percentage').show();
                    $('#holiday_excel').hide();
                    $('#import_excel').hide();

                } else {
                    // Import File or other options selected
                    $('#holiday_excel').hide();
                    $('#import_excel').show();
                    $('#workdone').hide();
                    $('#overral_percentage').hide();
                    $('#importsave').show();
                    $('#holiday_insert').hide();
                    $('#file_type').show();


                }
            });

            
            $("#workdone").click(function() {
                var maxLoops = 15;
                var tempcsrf = '{{ csrf_token() }}'; // Ensure tempcsrf is correctly defined
                var project = $('#project').val();

                var successfulRequests = 0; // Counter for successful requests

                // Function to make a single AJAX request
                function performRequest(loop) {
                    // Hide the button when starting the request
                    $('#workdone').hide();

                    return $.ajax({
                        url: "{{ route('workdone_auto_percentage') }}",
                        type: "POST",
                        data: {
                            _token: tempcsrf,
                            loop: loop,
                            project: project
                        },
                        beforeSend: function() {
                            console.log("Before sending request for loop " + loop);
                            $("#loader").show(); // Show loader before sending request
                            // You can add any logic before sending the request
                        }
                    }).then(function(resp) {
                        console.log("Success for loop " + loop);
                        successfulRequests++; // Increment successful request counter

                        // You can handle success response here
                    }).fail(function(jqXHR, textStatus, errorThrown) {
                        console.error("Error for loop " + loop + ": " + textStatus, errorThrown);
                        // You can handle errors here
                    }).always(function() {
                        console.log("Request completed for loop " + loop);
                        $("#loader").hide(); // Hide loader after request completes
                        // Show the button again after completing the request
                        $('#workdone').show();

                        // Check if all requests are completed
                        if (loop === maxLoops) {
                            // Show toastr message after all requests complete
                            if (successfulRequests > 0) {
                                toastr.success(successfulRequests +
                                    " requests completed successfully.");
                                $('#importForm')[0].reset();
                            } else {
                                toastr.error('All requests failed.');
                            }
                        }
                    });
                }

                // Define a function to recursively make requests
                function makeRequest(loop) {
                    if (loop <= maxLoops) {
                        performRequest(loop).then(function() {
                            // Make the next request recursively after the current one completes
                            makeRequest(loop + 1);
                        });
                    } else {
                        console.log("All requests completed");
                    }
                }

                // Start making requests from loop 1
                makeRequest(1);
            });
        });

        $("#overral_percentage").click(function() {
            var maxLoops = 15;
            var tempcsrf = '{{ csrf_token() }}'; // CSRF token for Laravel
            var project = $('#project').val();
            var loop = 1; // Initial loop counter

            // Function to make a single AJAX request
            function performRequest() {
                // Hide the button when starting the request
                $('#overral_percentage').hide();

                // Return the AJAX promise
                return $.ajax({
                    url: "{{ route('percentage_update.index') }}",
                    type: "POST",
                    data: {
                        _token: tempcsrf,
                        loop: loop,
                        project: project
                    },
                    beforeSend: function() {
                        console.log("Sending request for loop " + loop);
                        $("#loader").show(); // Show loader before sending request
                        // Add any specific logic before sending the request
                    }
                }).then(function(resp) {
                    console.log("Success for loop " + loop);
                    // Increment successful request counter if needed
                    return resp; // Return response if further handling is needed
                }).fail(function(jqXHR, textStatus, errorThrown) {
                    console.error("Error for loop " + loop + ": " + textStatus, errorThrown);
                    // Handle errors as needed
                    throw errorThrown; // Throw error to propagate to subsequent .then or .catch
                }).always(function() {
                    console.log("Request completed for loop " + loop);
                    $("#loader").hide(); // Hide loader after request completes
                    $('#overral_percentage').show(); // Show the button again
                    $('#importForm')[0].reset();
                    // Increment loop counter for the next request
                    loop++;
                });
            }

            // Function to recursively make requests
            function makeRequests() {
                if (loop <= maxLoops) {
                    performRequest().then(function(resp) {
                        // Handle success response here if needed
                        console.log("Response received for loop " + (loop - 1), resp);

                        // Recursive call for the next loop
                        makeRequests();
                    }).catch(function(error) {
                        // Handle errors from performRequest
                        console.error("Error in loop " + (loop - 1), error);

                        // Recursive call for the next loop
                        makeRequests();
                    });
                } else {
                    // All loops completed
                    console.log("All requests completed");

                    // Show toastr message after all requests complete
                    toastr.success("All requests completed successfully.");
                    $('#importForm')[0].reset();
                }
            }

            // Start making requests from loop 1
            makeRequests();
        });
    </script>