@extends('layouts.admin')


@section('style')
    <link rel="stylesheet" href="{{ asset('assets/bower/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.css') }}">
    <link rel="stylesheet" href="{{ mix('css/admin-maint-style.css') }}">
    <style>
        .card-footer .btn {
            margin-left: 5px;
        }
    </style>
@endSection

@section('script')
<script src="{{ mix('js/admin/admin-maint.js') }}"></script>
<script>
    $(function() {
        const elem_file = $('input[name=csv_file]');
        const fn_err_ui = function(selector, err_msg, is_show) {
            let elem_blk = $(selector);
            if (!elem_blk.hasClass('form-group')) {
                elem_blk = elem_blk.parent().parent();
            }

            const elem_lbl = elem_blk.find('.help-block');
            if (is_show) {
                elem_blk.addClass('has-error');
                elem_lbl.removeClass('d-none').text(err_msg);
            } else {
                elem_blk.removeClass('has-error');
                elem_lbl.addClass('d-none').text('');
            }
        };

        $('#btn_upload').on('click', function() {
            $('.main-err').addClass('d-none').html('');

            if (elem_file.val() == '') {
                fn_err_ui(elem_file, 'The csv file field is required.', 1);
                return false;
            }
            fn_err_ui(elem_file, '', 0);

            const btn = $(this).attr('disabled', true);
            const lbl = btn.find('span').text('Importing...');
            const file = elem_file.get(0).files[0];

            const fn_revert_ui = function() {
                btn.attr('disabled', false);
                lbl.text('Import');
            };

            const form = new FormData();
            form.append("csv_file", file, file.name);
            form.append('campaign_type', $('select[name=campaign_type]').val());

            $.ajax({
                url: "{{ route('admin.do_import_campaigns_csv') }}",
                method: "POST",
                timeout: 0,
                processData: false,
                mimeType: "multipart/form-data",
                contentType: false,
                data: form,
            })
            .done(function (response, textStatus, jqXHR) {
                fn_revert_ui();
                response = JSON.parse(response);
                const msg_container = $('.main-err').removeClass('d-none');

                if (response.errors) {
                    msg_container.html(response.errors.join('!<br>') + '!');
                    return;
                }
                msg_container.removeClass('text-danger').addClass('text-success').html('Done Imported!<BR><BR><b>Output:</b><BR>' + response.output);
                btn.remove();
            })
            .fail(function (jqXHR, textStatus, errorThrown) {
                fn_revert_ui();
                let response = jqXHR.responseText;
                try {
                    response = JSON.parse(response);
                } catch (e) {
                    let error = textStatus;
                    let error_msg = 'Oops, Something went wrong';

                    if (jqXHR.status === 419) {
                        error_msg = "The page have been expired. Please refresh and try again";
                    } else if (jqXHR.status === 0) {
                        error_msg = "Sorry, Your network are disconnected";
                    }

                    $('.main-err').removeClass('d-none').text(error_msg);
                    return;
                }

                const errors = response.errors || {};
                if (errors.csv_file) {
                    fn_err_ui(elem_file, errors.csv_file[0], 1);
                }
                if (errors.campaign_type) {
                    fn_err_ui($('select[name=campaign_type]'), errors.campaign_type[0], 1);
                }
            });
            return false;
        });
    });
</script>
@endSection

@section('content')

    <!-- Content Header (Page header) -->
    @php
       $page_title =  __('heading.title_bulk_upload_campaign') ;
    @endphp

    <!-- Main content -->
    <section class="content">
        <div class="row">

            <div class="col-md-12">
                <form class="form-horizontal" action="{{ $post_url }}" method="POST" enctype="multipart/form-data" autocomplete="off">
                    <div class="card card-primary card-outline shadow">

                        <div class="card-header">
                            <h3 class="card-title">Details</h3>
                            <a class="btn btn-primary float-right" href="{{ asset('assets/template/pnm/Template Flash Promo V20211130.csv') }}">
                                <i class="fas fa-download" aria-hidden="true"></i>
                                &nbsp;
                                <span>Template Download</span>
                            </a>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">

                            <div class="form-group text-danger col-sm-12 d-none main-err"></div>

                            <div class="form-group row">
                                <label class="col-sm-2 control-label">Type <span class="required">*</span></label>
                                <div class="col-sm-10">
                                    <select class="form-control" name="campaign_type">
                                        @foreach($campaign_types as $type => $img)
                                            <option value="{{ $type }}">{{ $type }}</option>
                                        @endforeach
                                    </select>
                                    <small class="help-block d-none"></small>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-2 control-label">CSV File <span class="required">*</span></label>
                                <div class="col-sm-10">
                                    <input type="file" class="custom-file-input" name="csv_file" accept="text/csv">
                                    <label class="custom-file-label" for="csv_file">Choose File</label>
                                    <small class="help-block d-none"></small>
                                </div>
                            </div>

                        </div>
                        <!-- /.card-body -->


                        <div class="card-footer">
                            <button class="btn btn-info float-right" id="btn_upload">
                                <i class="fas fa-upload" aria-hidden="true"></i>
                                &nbsp;
                                <span>Import</span>
                            </button>
                            <a class="btn btn-light float-right" href="{{ route('admin.list_campaigns') }}">
                                <i class="fas fa-chevron-left" aria-hidden="true"></i>
                                &nbsp;
                                <span>Back</span>
                            </a>
                        </div>
                    </div>

                </form>
            </div>

        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->

@endsection