@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">
                                        <span>Upload a Excel of your Workdone File information. The following fields are required in the Xlsx: <strong>Workdone Import File task_id, task_name, work_done.</strong></span>
                                        <br>
    
                                        <div class="col-md-6 mb-3">
                                            <div class="form-group">
                                                <label for="actionSelect">{{ __('Select Action') }}</label>
                                                <select id="actionSelect" class="form-control" onchange="toggleInputs()">
                                                    <option value="select">Select Type</option>
                                                    <option value="download">Download Workdone</option>
                                                    <option value="import">Import Workdone</option>
                                                </select>
                                            </div>
                                            
                                            <div id="importSection">
                                                <div class="form-group">
                                                    <label for="file">{{ __('Choose File') }}</label>
                                                    <div class="input-group">
                                                        <input type="file" class="form-control" accept=".xlsx, .xls"
                                                            id="file" name="file">
                                                    </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>
    
                                        <div class="col-md-6 mb-3 d-flex align-items-end">
                                            <div class="form-group ml-auto">
                                                <img src="{{ asset('admin/loader/ajax_loader.gif') }}" id="loader"
                                                    class="ml-3" style="display:none;">
                                                <button class="btn btn-primary ml-3" type="submit"
                                                    id="importsave">Save</button>
                                            </div>
                                        </div>
    
                                        <div class="input-group-append" id="downloadSection">
                                            <a id="import_excel" href="{{ route('export.tasks') }}">
                                                <i class="fa fa-download"></i> Workdone Import File
                                            </a>
                                        </div>
                                    </div>
    
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('new_layouts.footer')

    <script>
        $(document).ready(function() {
            // Handle form submission
            $('#importForm').submit(function(e) {
                e.preventDefault();


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




                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);

                $.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();
                    }
                });


            });
        });
        function toggleInputs() {
    const action = document.getElementById('actionSelect').value;
    const importSection = document.getElementById('importSection');
    const downloadSection = document.getElementById('downloadSection');
    const saveButton = document.getElementById('importsave');
    
    if (action === 'download') {
        importSection.style.display = 'none';
        downloadSection.style.display = 'block';
        saveButton.style.display = 'none';
    } else if (action === 'import') {
        importSection.style.display = 'block';
        downloadSection.style.display = 'none';
        saveButton.style.display = 'block';
    } else { // action === 'select'
        importSection.style.display = 'none';
        downloadSection.style.display = 'none';
        saveButton.style.display = 'none';
    }
}

// Initialize the visibility on page load
document.addEventListener('DOMContentLoaded', () => {
    toggleInputs();
});
    </script>