@extends('layouts/contentLayoutMaster')

@section('title', __('locale.contacts.import_contact'))

@section('content')
    <!-- Basic Vertical form layout section start -->
    <section id="basic-vertical-layouts">
        <div class="row match-height">
            <div class="col-md-6 col-12">

                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title"></h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body import-file">
                            <form class="form form-vertical"
                                  action="{{ route('customer.contact.import', $contact->uid) }}" method="post"
                                  enctype="multipart/form-data">
                                @csrf
                                <div class="row">

                                    <div class="col-12">
                                        <div class="mb-1">
                                            <div class='form-check form-switch form-check-primary form-switch-xl'>
                                                <input type="checkbox" class="form-check-input" name="option_toggle" value="on" id="option_toggle" checked>
                                                <label class="form-check-label" for="option_toggle">
                                                    <span class="switch-text-left">{{__('locale.labels.import_file')}}</span>
                                                    <span class="switch-text-right">{{__('locale.labels.paste_text')}}</span>
                                                </label>
                                            </div>
                                        </div>

                                        <div class="import_file">

                                            <div class="mb-1 mt-2">
                                                <p class="text-uppercase">{{ __('locale.labels.sample_file') }}</p>
                                                <a href="{{route('sample.file')}}" class="btn btn-primary fw-bold text-uppercase">
                                                    <i data-feather="file-text"></i> {{ __('locale.labels.download_sample_file') }}
                                                </a>

                                            </div>


                                            <div class="mb-1">
                                                <label for="import_file" class="form-label">{{ __('locale.labels.import_file') }}</label>
                                                <div class="us-file-zone us-clickable">
                                                    <input type="file" name="import_file" class="us-file upload-file" id="import_file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
                                                    <div class="us-file-message">{{__('locale.filezone.click_here_to_upload')}}</div>
                                                    <div class="us-file-footer">
                                                        {!! __('locale.campaigns.import_file_description') !!}
                                                        {!! __('locale.contacts.only_supported_file') !!}
                                                        {!! __('locale.contacts.for_date_format') !!}
                                                    </div>
                                                </div>
                                                @error('import_file')
                                                <div class="text-danger">
                                                    {{ $message }}
                                                </div>
                                                @enderror

                                            </div>


                                            <div class="mb-1">
                                                <div class="form-check me-3 me-lg-5">
                                                    <input type="checkbox" checked value="true" name="header" class="form-check-input">
                                                    <label class="form-check-label">{{ __('locale.filezone.file_contains_header_row') }}?</label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="paste_text">

                                            <div class="mb-1">
                                                <label for="recipients" class="form-label">{{ __('locale.labels.paste_text') }}</label>
                                                <span class="text-uppercase float-end">{{ __('locale.labels.total_number_of_recipients') }}:
                                                    <span class="number_of_recipients bold text-success me-5">0</span></span>
                                                <textarea class="form-control" id="recipients" name="recipients" rows="6"></textarea>
                                                <p><small class="text-primary">{!! __('locale.description.paste_text') !!} {!! __('locale.contacts.include_country_code_for_successful_import') !!}</small></p>
                                            </div>

                                            <div class="mb-1">
                                                <div class="btn-group btn-group-sm recipients" role="group">
                                                    <input type="radio" class="btn-check" name="delimiter" value="," id="comma" autocomplete="off" checked/>
                                                    <label class="btn btn-outline-primary" for="comma">, ({{ __('locale.labels.comma') }})</label>

                                                    <input type="radio" class="btn-check" name="delimiter" value=";" id="semicolon" autocomplete="off"/>
                                                    <label class="btn btn-outline-primary" for="semicolon">; ({{ __('locale.labels.semicolon') }})</label>

                                                    <input type="radio" class="btn-check" name="delimiter" value="|" id="bar" autocomplete="off"/>
                                                    <label class="btn btn-outline-primary" for="bar">| ({{ __('locale.labels.bar') }})</label>

                                                    <input type="radio" class="btn-check" name="delimiter" value="tab" id="tab" autocomplete="off"/>
                                                    <label class="btn btn-outline-primary" for="tab">{{ __('locale.labels.tab') }}</label>

                                                    <input type="radio" class="btn-check" name="delimiter" value="new_line" id="new_line" autocomplete="off"/>
                                                    <label class="btn btn-outline-primary" for="new_line">{{ __('locale.labels.new_line') }}</label>

                                                </div>

                                                @error('delimiter')
                                                <p><small class="text-danger">{{ $message }}</small></p>
                                                @enderror
                                            </div>

                                        </div>


                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-12">
                                        <button type="submit" class="btn btn-primary mt-2 mb-1">
                                            <i data-feather="save"></i> {{__('locale.buttons.save')}}
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>


        </div>
    </section>
    <!-- // Basic Vertical form layout section end -->


@endsection

@section('page-script')
    <script>

        $("body").on("change", ".upload-file", function (e) {
            if ($(this).val() !== '') {
                $('.us-file-message').addClass('us-file-message-done');
            } else {
                $('.us-file-message').removeClass('us-file-message-done');
            }

        });

        let number_of_recipients_ajax = 0,
            number_of_recipients_manual = 0,
            $get_recipients = $('#recipients'),
            firstInvalid = $('form').find('.is-invalid').eq(0);

        if (firstInvalid.length) {
            $('body, html').stop(true, true).animate({
                'scrollTop': firstInvalid.offset().top - 200 + 'px'
            }, 200);
        }

        $('.paste_text').hide();

        $('#option_toggle').on('click', function () {
            if (this.checked) {
                $('.import_file').show();
                $('.paste_text').hide();
            } else {
                $('.import_file').hide();
                $('.paste_text').show();
            }
        });

        function get_delimiter() {
            return $('input[name=delimiter]:checked').val();
        }

        function get_recipients_count() {

            let recipients_value = $get_recipients[0].value.trim();

            if (recipients_value) {
                let delimiter = get_delimiter();

                if (delimiter === ';') {
                    number_of_recipients_manual = recipients_value.split(';').length;
                } else if (delimiter === ',') {
                    number_of_recipients_manual = recipients_value.split(',').length;
                } else if (delimiter === '|') {
                    number_of_recipients_manual = recipients_value.split('|').length;
                } else if (delimiter === 'tab') {
                    number_of_recipients_manual = recipients_value.split(' ').length;
                } else if (delimiter === 'new_line') {
                    number_of_recipients_manual = recipients_value.split('\n').length;
                } else {
                    number_of_recipients_manual = 0;
                }
            } else {
                number_of_recipients_manual = 0;
            }
            let total = number_of_recipients_manual + Number(number_of_recipients_ajax);

            $('.number_of_recipients').text(total);
        }

        $get_recipients.keyup(get_recipients_count);


        $("input[name='delimiter']").change(function () {
            get_recipients_count();
        });

    </script>
@endsection