@include('new_layouts.header')
<!-- Select2 CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/css/select2.min.css" rel="stylesheet" />
<style>
    #file_type {
        display: none;
    }

    #loader {
        display: none;
    }

    /* Center loader horizontally and vertically */
    #button-container {
        position: relative; /* Ensure container is positioned */
    }

    #loader {
        position: absolute;
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Center the loader perfectly */
    }
</style>
<div class="page-wrapper">
    @include('construction_project.side-menu')
    <!-- Page header -->
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <div class="row">
                        <div class="col-md-6">
                            <h2>{{ __('Update Work Progress') }}</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Page body -->
    <div class="page-body">
        <div class="container-xl">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="card">
                                <div class="card-body">
                                    <form id="importForm" enctype="multipart/form-data">
                                        @csrf
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="row gx-4">
                                                    <div class="col-md-6 mb-3">
                                                        <div class="form-group">
                                                            <label for="company">{{ __('Select Type') }}</label>
                                                            <select class="form-control" name="type" id="type">
                                                                <option value="">Select Type</option>
                                                                <option value="3">Holiday</option>
                                                                <option value="1">Import File</option>
                                                                <option value="0">Progress Update</option>
                                                                <option value="2">Overrall Progress Update</option>
                                                            </select>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-6 mb-3" id="file_type">
                                                        <div class="form-group">
                                                            <label for="project">{{ __('Choose File') }}</label>
                                                            <input type="file" class="form-control" accept=".xlsx, .xls" id="file" name="file">
                                                            <a id="import_excel" href="{{ asset('uploads/sample_excel/import_file.xlsx') }}"><i class="fa fa-download"></i> Import File</a>
                                                            <a id="holiday_excel" href="{{ asset('uploads/sample_excel/holiday.xlsx') }}"><i class="fa fa-download"></i> Holiday</a>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 mb-3">
                                                        <div class="form-group">
                                                            <input type="hidden" class="form-control" id="company" name="company" value="{{$company_id}}">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 mb-3">
                                                        <div class="form-group">
                                                            <input type="hidden" class="form-control" id="project" name="project" value="{{$project_id}}">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="text-center mt-3" id="button-container">
                                                            <img src="{{ asset('admin/loader/ajax_loader.gif') }}" id="loader">
                                                            <button class="btn btn-primary" type="submit" id="importsave">Save</button>
                                                            <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>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@include('new_layouts.footer')
<!-- Select2 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/js/select2.min.js"></script>
<script>
   $(document).ready(function () {
    // Initialize Select2 for company and project select boxes
   

    $('#type').select2({
        placeholder: "Select Type",
        allowClear: true
    });

  

    // 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 if(selectedType === '3'){
            $('#holiday_excel').show();
            $('#import_excel').hide();
            $('#workdone').hide();
            $('#overral_percentage').hide();
            $('#importsave').show();
            $('#holiday_insert').hide();
            $('#file_type').show();
           
            
        }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();
           
            
        }
    });

    // Handle change event of company select box
   

    // Handle form submission
    $('#importForm').submit(function (e) {
        e.preventDefault();

        var type = $('#type').val();
        var company = $('#company').val();
        var project = $('#project').val();
        var fileInput = $('#file')[0].files[0];

        // Validation checks
        if (!type) {
            toastr.error('Please select a Type.');
            return false;
        }


        if (!fileInput) {
            toastr.error('Please choose a file to import.');
            return false;
        }

        // Validate file type and size
        var allowedTypes = ['xlsx', 'xls'];
        var fileType = fileInput.name.split('.').pop().toLowerCase();
        var fileSize = fileInput.size;

        if ($.inArray(fileType, allowedTypes) === -1) {
            toastr.error('Invalid file type. Please select a CSV or Excel file.');
            return false;
        }

        if (fileSize > 10485760) { // 10 MB (10485760 bytes)
            toastr.error('File size exceeds the limit of 10 MB. Please choose a smaller file.');
            return false;
        }

        // If all validations pass, proceed with form submission
        var formData = new FormData(this);
        if(type==1){
            $.ajax({
            url: "{{ route('import_work_done') }}",
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function () {
                $('#importForm button[type=submit]').hide();
                
                $("#loader").show();
            },
            complete: function () {
                $('#importForm button[type=submit]').show();
               
                $("#loader").hide();
            },
            success: function (response) {
                toastr.success('Data Imported Successfully');
                $('#importForm')[0].reset();
                $("#loader").hide();
            },
            error: function (xhr, status, error) {
                toastr.error('Something went wrong!');
                console.error('Error:', error);
                $("#loader").hide();
            }
        });
        }else{
            $.ajax({
            url: "{{ route('holiday_import') }}",
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function () {
                $('#importForm button[type=submit]').hide();
                $("#loader").show();
            },
            complete: function () {
                $('#importForm button[type=submit]').show();
                $("#loader").hide();
            },
            success: function (response) {
                toastr.success('Data Imported Successfully');
                $('#importForm')[0].reset();
                $("#loader").hide();
            },
            error: function (xhr, status, error) {
                toastr.error('Something went wrong!');
                console.error('Error:', error);
                $("#loader").hide();
            }
        });
        }
       
    });

   

    $("#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>