@extends('backend.master')
@section('title')
    Upload Due Holding excel
@endsection
@section('body')
    <div class="row">
        <div class="col-md-12">
            <div class="page-title-box d-flex align-items-center justify-content-between">
                <h4 class="mb-0 font-size-18">হোল্ডিং বকেয়া</h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('tax.holding_survey_apps') }}">হোল্ডিং জরিপ তথ্য</a></li>
                        <li class="breadcrumb-item active">হোল্ডিং বকেয়া</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="card">
            <div class="card-body">
                <form action="{{ route('holding-due-add-by-excel.store') }}" method="post" enctype="multipart/form-data" class="needs-validation" novalidate="">
                    @csrf
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-12 col-sm-12">
                                <div class="form-group mb-4">
                                    <label class="form-label" for="data_file">Select file (xls, xlsx, ods)<span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" name="data_file" id="data_file" accept=".xls, .xlsx, .ods" required>
                                            <label class="custom-file-label" for="data_file" id="file_label">Select file</label>
                                        </div>
                                        <div class="input-group-append">
                                            <button class="btn btn-danger" type="button" id="clearButton" style="display: none;">Remove</button>
                                        </div>
                                    </div>
                                    <div class="invalid-feedback">
                                        Please fill in the file
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <div class="form-group mb-4">
                                    <label class="form-label" for="word_no">ওয়ার্ড নং<span class="text-danger">*</span></label>
                                    <select class="form-control select2 columns_from_file" name="word_no" id="word_no" required>
                                        <option value="" selected disabled>&mdash; Select &mdash;</option>
                                    </select>
                                    <div class="invalid-feedback">
                                        Please Select the word no
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <div class="form-group mb-4">
                                    <label class="form-label" for="holding_no">হোল্ডিং নং<span class="text-danger">*</span></label>
                                    <select class="form-control select2 columns_from_file" name="holding_no" id="holding_no" required>
                                        <option value="" selected disabled>&mdash; Select &mdash;</option>
                                    </select>
                                    <div class="invalid-feedback">
                                        Please Select the holding no
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <div class="form-group mb-4">
                                    <label class="form-label" for="fast_year">বকেয়া শুরুর বছর<span class="text-danger">*</span></label>
                                    <select class="form-control select2 columns_from_file" name="fast_year" id="fast_year" required>
                                        <option value="" selected disabled>&mdash; Select &mdash;</option>
                                    </select>
                                    <div class="invalid-feedback">
                                        Please Select the fast_year
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <div class="form-group mb-4">
                                    <label class="form-label" for="last_year">বকেয়া শেষ বছর<span class="text-danger">*</span></label>
                                    <select class="form-control select2 columns_from_file" name="last_year" id="last_year" required>
                                        <option value="" selected disabled>&mdash; Select &mdash;</option>
                                    </select>
                                    <div class="invalid-feedback">
                                        Please Select the last_year
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <div class="form-group mb-4">
                                    <label class="form-label" for="due_tax">বকেয়া দাবী<span class="text-danger">*</span></label>
                                    <select class="form-control select2 columns_from_file" name="due_tax" id="due_tax" required>
                                        <option value="" selected disabled>&mdash; Select &mdash;</option>
                                    </select>
                                    <div class="invalid-feedback">
                                        Please Select the due_fiscal_year name
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 col-sm-12">
                                <div class="form-group row mb-4">
                                    <button type="submit" class="btn btn-primary btn-lg btn-block">
                                        Submit
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <!-- Include Papa Parse library -->
    <script src="{{ asset('backend/assets/js/papaparse.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/bnbijoy2unicode.min.js') }}"></script>
    <!-- Include SheetJS library -->
    <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#data_file').change(function() {
                if ($(this).val() !== '') {
                    $('#file_label').empty().html('Change')
                    $('#clearButton').show();

                    var file = $('#data_file')[0].files[0];

                    if (file) {
                        var extension = file.name.split('.').pop().toLowerCase();

                        var numbers_columnSelect = $('.columns_from_file');
                        if (extension === 'csv' || extension === 'txt') {
                            // Read CSV or TXT file using Papa Parse
                            // bnBijoy2Unicode("Avgvi †mvbvi evsjv, Avwg †Zvgvq fv‡jvevwm|");
                            Papa.parse(file, {
                                header: true,
                                complete: function(results) {
                                    if (results.data.length > 0) {
                                        var columnNames = Object.keys(results.data[0]);
                                        var numbers_column = '';
                                        var tag = ''
                                        numbers_column += '<option value="" selected>&mdash; Select &mdash;</option>';
                                        $.each(columnNames, function (key, value) {
                                            numbers_column += '<option value="'+value+'">'+value+'</option>';
                                            tag += '<span onclick="setVariable(this)" data-val="#'+value+'#" class="badge badge-info mr-1">#'+value+'#</span>';
                                        });
                                        // numbers_columnSelect.empty().append(numbers_column);
                                    }
                                }
                            });
                        } else if (extension === 'xls' || extension === 'xlsx' || extension === 'ods') {
                            // Read Excel file using SheetJS
                            var reader = new FileReader();
                            reader.onload = function(e) {
                                var data = new Uint8Array(e.target.result);
                                var workbook = XLSX.read(data, { type: 'array' });

                                var sheetName = workbook.SheetNames[0];
                                var worksheet = workbook.Sheets[sheetName];

                                var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

                                if (jsonData.length > 0) {
                                    var columnNames = jsonData[0];
                                    var numbers_column = '';
                                    var tag = ''
                                    numbers_column += '<option value="" selected>&mdash; Select &mdash;</option>';
                                    $.each(columnNames, function (key, value) {
                                        numbers_column += '<option value="'+value+'">'+value+'</option>';
                                        tag += '<span onclick="setVariable(this)" data-val="#'+value+'#" class="badge badge-info mr-1">#'+value+'#</span>';
                                    });
                                    numbers_columnSelect.empty().append(numbers_column);
                                }
                            };
                            reader.readAsArrayBuffer(file);
                        }
                    }
                } else {
                    $('#clearButton').hide();
                }
            });
            $('#clearButton').click(function() {
                // Clear the file input value
                $('.columns_from_file').empty().append('<option value="" selected disabled>&mdash; Select &mdash;</option>');
                $('#file_label').empty().html('Select file')
                $('#data_file').val('');

                // Hide the clear button
                $(this).hide();
            });
        })
    </script>
@endsection