@extends('backend.master')
@section('title')
    Upload 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">
                        <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>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="card">
            <div class="card-body">
                <form action="{{ route('holding-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 for="word_no" class="form-label">ওয়ার্ড নং <span class="required">*</span></label>
                                    <select name="word_no" required class="form-control select2" id="word_no">
                                        <option style="color: red" selected disabled value="">&mdash; চিহ্নিত করুন &mdash;</option>
                                        @foreach(words() as $word)
                                            <option value="{{ $word->number }}">{{ NumToBn($word->number) }}</option>
                                        @endforeach
                                    </select>
                                    <div class="invalid-feedback">
                                        ওয়ার্ড নং
                                    </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="holding_won_name">হোল্ডিং মালিকের নাম<span class="text-danger">*</span></label>
                                    <select class="form-control select2 columns_from_file" name="holding_won_name" id="holding_won_name" required>
                                        <option value="" selected disabled>&mdash; Select &mdash;</option>
                                    </select>
                                    <div class="invalid-feedback">
                                        Please Select the holding owner name
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <div class="form-group mb-4">
                                    <label class="form-label" for="husband_or_father">হো: মালিকের পিতা/স্বামীর নাম<span class="text-danger">*</span></label>
                                    <select class="form-control select2 columns_from_file" name="husband_or_father" id="husband_or_father" required>
                                        <option value="" selected disabled>&mdash; Select &mdash;</option>
                                    </select>
                                    <div class="invalid-feedback">
                                        Please Select the husband or father name
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <div class="form-group mb-4">
                                    <label class="form-label" for="address">মহল্লার নাম<span class="text-danger">*</span></label>
                                    <select class="form-control select2 columns_from_file" name="address" id="address" required>
                                        <option value="" selected disabled>&mdash; Select &mdash;</option>
                                    </select>
                                    <div class="invalid-feedback">
                                        Please Select the address
                                    </div>
                                </div>
                            </div>
{{--                            <div class="col-md-6 col-sm-12">--}}
{{--                                <div class="form-group mb-4">--}}
{{--                                    <label class="form-label" for="block_name">ব্লক<span class="text-danger">*</span></label>--}}
{{--                                    <select class="form-control select2 columns_from_file" name="block_name" id="block_name" required>--}}
{{--                                        <option value="" selected disabled>&mdash; Select &mdash;</option>--}}
{{--                                    </select>--}}
{{--                                    <div class="invalid-feedback">--}}
{{--                                        Please Select the block name--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
                            <div class="col-md-6 col-sm-12">
                                <div class="form-group mb-4">
                                    <label class="form-label" for="building_type">হোল্ডিং এর শ্রেণি<span class="text-danger">*</span></label>
                                    <select class="form-control select2 columns_from_file" name="building_type" id="building_type" required>
                                        <option value="" selected disabled>&mdash; Select &mdash;</option>
                                    </select>
                                    <div class="invalid-feedback">
                                        Please Select the building type
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <div class="form-group mb-4">
                                    <label class="form-label" for="holding_type">করদাতার ধরন<span class="text-danger">*</span></label>
                                    <select class="form-control select2 columns_from_file" name="holding_type" id="holding_type" required>
                                        <option value="" selected disabled>&mdash; Select &mdash;</option>
                                    </select>
                                    <div class="invalid-feedback">
                                        Please Select the holding type
                                    </div>
                                </div>
                            </div>
{{--                            <div class="col-md-6 col-sm-12">--}}
{{--                                <div class="form-group mb-4">--}}
{{--                                    <label class="form-label" for="square">হো: বিবরণ(বর্গফুট)<span class="text-danger">*</span></label>--}}
{{--                                    <select class="form-control select2 columns_from_file" name="square" id="square" required>--}}
{{--                                        <option value="" selected disabled>&mdash; Select &mdash;</option>--}}
{{--                                    </select>--}}
{{--                                    <div class="invalid-feedback">--}}
{{--                                        Please Select the square--}}
{{--                                    </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+'">'+bnBijoy2Unicode(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+'">'+bnBijoy2Unicode(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