@include('partials.superadmin.header')
@include('partials.superadmin.menu')
<!-- 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;
    }
</style>
<div class="page-wrapper">
    <!-- 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>{{ __('Import 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">
                                                        <div class="form-group">
                                                            <label for="company">{{ __('Select Company') }}</label>
                                                            <select class="form-control" name="company" id="company" disabled>
                                                                <option value="">Select Company</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 mb-3">
                                                        <div class="form-group">
                                                            <label for="project">{{ __('Select Project') }}</label>
                                                            <select class="form-control" name="project" id="project" disabled>
                                                                <option value="">Select Project</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>
                                                <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('partials.superadmin.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
    $('#company').select2({
        placeholder: "Select Company",
        allowClear: true
    });

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

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

    // Function to populate companies select box based on type selection
    function populateCompanies(type) {
        $.ajax({
            url: "{{ route('companies.data') }}",
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                var options = '<option value="">Select Company</option>';
                $.each(data, function (key, value) {
                    options += '<option value="' + value.id + '">' + value.name + '</option>';
                });
                $('#company').html(options).prop('disabled', false);

                // Trigger change event to populate projects if company is already selected
                var companyId = $('#company').val();
                if (companyId) {
                    populateProjects(companyId, type); // Pass type to populateProjects
                }
            },
            error: function (xhr, textStatus, errorThrown) {
                console.log(xhr.responseText); // Log any errors for debugging
            }
        });
    }

    // Initial population of companies select box
    populateCompanies();

    // Function to populate projects based on selected company and type
    function populateProjects(companyId, type) {
        $('#project').prop('disabled', true).html('<option value="">Loading...</option>');
        var url_set = "{{ route('projects.data', [':company', ':type']) }}"; // Adjusted URL format
        url_set = url_set.replace(':company', companyId);
        url_set = url_set.replace(':type', type); // Replace :type with actual type value
        $.ajax({
            url: url_set,
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                var options = '<option value="">Select Project</option>';
                if (data && data.length > 0) {
                    $.each(data, function (key, value) {
                        options += '<option value="' + value.id + '">' + value.project_name + '</option>';
                    });
                } else {
                    options += '<option value="">No projects found</option>';
                }
                $('#project').html(options).prop('disabled', false);
            },
            error: function (xhr, textStatus, errorThrown) {
                console.log(xhr.responseText); // Log any errors for debugging
                $('#project').html('<option value="">Error loading projects</option>').prop('disabled', 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();
            
            $('#company').prop('disabled', false); // Enable company select box
            $('#file_type').hide();

            $.ajax({
                url: "{{ route('companies.progress') }}",
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    var options = '<option value="">Select Company</option>';
                    $.each(data, function (key, value) {
                        options += '<option value="' + value.id + '">' + value.name + '</option>';
                    });
                    $('#company').html(options);

                    // Trigger change event to populate projects if company is already selected
                    var companyId = $('#company').val();
                    if (companyId) {
                        populateProjects(companyId, selectedType); // Pass selectedType to populateProjects
                    }
                },
                error: function (xhr, textStatus, errorThrown) {
                    console.log(xhr.responseText); // Log any errors for debugging
                }
            });
        }else if(selectedType === '2'){
            $('#workdone').hide();
            $('#importsave').hide();
            $('#company').prop('disabled', false); // Enable company select box
            $('#file_type').hide();
            $('#overral_percentage').show();
            $('#holiday_excel').hide();
            $('#import_excel').hide();
            populateCompanies(); 
        }else if(selectedType === '3'){
            $('#holiday_excel').show();
            $('#import_excel').hide();
            $('#workdone').hide();
            $('#overral_percentage').hide();
            $('#importsave').show();
            $('#holiday_insert').hide();
            $('#file_type').show();
            $('#company').prop('disabled', false); // Disable company select box
            populateCompanies(); 
        }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();
            $('#company').prop('disabled', false); // Disable company select box
            populateCompanies(); // Repopulate companies when switching type
        }
    });

    // Handle change event of company select box
    $('#company').change(function () {
        var companyId = $(this).val();
        var type = $('#type').val();
        if (companyId) {
            populateProjects(companyId, type); // Function to populate projects based on company id and type
        } else {
            $('#project').prop('disabled', true).html('<option value="">Select Project</option>');
        }
    });

    // 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 (!company) {
            toastr.error('Please select a Company.');
            return false;
        }

        if (!project) {
            toastr.error('Please select a Project.');
            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
            
            // 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>