@extends('layouts.admin')


@section('style')

    <!-- daterange picker -->
    <link rel="stylesheet" href="{{ asset('assets/bower/bootstrap-daterangepicker/daterangepicker.css') }}">
    <!-- bootstrap datepicker -->
    <link rel="stylesheet"
          href="{{ asset('assets/bower/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css') }}">
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.css">

    <link rel="stylesheet" href="{{ asset('assets/bower/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.css') }}">

    <style>
        .required {
            color: #dd4b39;
        }
        .show-batch .batch-item{
            display: none;
        }
        .show-batch[promo_mech=pin_code] .batch-pin,
        .show-batch[promo_mech=qr_code] .batch-image,
        .show-batch[promo_mech=bar_code] .batch-image,
        .show-batch[promo_mech=promo_code] .batch-promo,
        .show-batch[promo_mech=plain_text] .batch-text{
            display: block;
        }
        .hidden{
            display: none!important;
        }
        .row-promo-mechanic{
            text-transform: capitalize;
        }
    </style>

@endSection

@section('script')


    <!-- date-range-picker -->
    <script src="{{ asset('assets/bower/moment/min/moment.min.js') }}"></script>
    <script src="{{ asset('assets/bower/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
    <!-- bootstrap datepicker -->
    <script src="{{ asset('assets/bower/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('assets/bower/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.all.min.js') }}"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.js"></script>
    <script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
    <script src="{{ asset('assets/bower/ckeditor/ckeditor.js') }}"></script>

    <script defer>
        let image_based_promos = ['qr_code', 'bar_code'];

        $(function () {

            $('#business_asset_ids').select2();
            $('#store_ids').select2();
        });


        // checkbox functions
        function resetError(){
            $('#batch-edit-btn-error').text('');
        }
        function showBatchError(msg){
            $('#batch-edit-btn-error').text(msg)
        }

        function selectAllCheckBoxes(selectAll, checkboxes){
            selectAll.off('change');
            checkboxes.off('change');
            selectAll.on('change', function(){
                checkboxes.prop('checked',selectAll.prop('checked'));
                checkboxes.trigger('change');
            })
            checkboxes.on('change', function(){
                if ( !$(this).prop('checked') && !$(this).is(selectAll) ) {
                    selectAll.prop('checked', false);
                }
                resetError();
                $(this).parents('tr').toggleClass('info',$(this).prop('checked'))
            })
        }
        selectAllCheckBoxes($('#store-all'), $('.store-check'));


        $(document).on('click','#outlet-tbody tr',function(e){
            // console.log('click')
            if (!$(e.target).hasClass('store-check')){
                const checkBoxes= $(this).find('.store-check');
                checkBoxes.prop("checked", !checkBoxes.prop("checked"))
                $('.store-check').trigger('change');
            }
        });

        // Modal functions
        $('#batch-edit-btn').on('click',function(){
            resetError();
            if ($('.store-check:checked').length<1){
                showBatchError('Please select at least 1 outlet')
            } else {
                // get lsit of values
                let b_data = {
                    business_asset_names: [],
                    business_asset_ids : [],
                    promotion_mechanic: $('.store-check:checked').first().attr('promo_mech'),
                    promotion_mechanic_value : $('.store-check:checked').first().attr('value'),
                }

                $('.store-check:checked').each(function( index, element ){
                    b_data.business_asset_names.push($(element).attr('name'))
                    b_data.business_asset_ids.push( parseInt($(element).attr('id')) )

                    if(b_data.promotion_mechanic !== $(element).attr('promo_mech')){
                        showBatchError('Please select outlets with same Promotional Mechanic')
                    }
                    if(b_data.promotion_mechanic_value !== $(element).attr('value')){
                        b_data.promotion_mechanic_value = '';
                    }
                })

                // console.log(selected_outlets)
                if ($('#batch-edit-btn-error').text() === ''){
                    $('#batchModal').data(b_data)
                    // set titles
                    $("#outlet-length").text(b_data.business_asset_names.length);
                    $("#outlet-list").text(b_data.business_asset_names.join(', '));
                    $("#promo_mech").text(b_data.promotion_mechanic.replace('_',' ') );
                    // set forms
                    $('.show-batch').attr('promo_mech',b_data.promotion_mechanic);
                    $(".batch-item").each( (c,item)=>{
                        if ( $(item).attr('promo_mech').includes(b_data.promotion_mechanic) ){
                            if ( image_based_promos.includes(b_data.promotion_mechanic) ){
                                $(item).find('.preview-image').attr('src',b_data.promotion_mechanic_value)
                            } else {
                                $(item).find('.form-control').val(b_data.promotion_mechanic_value)
                            }
                        }
                    })

                    $('#batchModal').modal('show');
                }
            }
            $('#batchModal').on('shown.bs.modal', function () {

            })
        })

        $('#batchModal').on('hidden.bs.modal', function (e) {
            $('.form-control').val('')
            $('.preview-image').attr('src','')
        })


        // Data functions
        function getOutletDataAJAX(){
            var settings = {
                "url": "/admin/ajax/voucher_series/{{ $voucher_series['series_id'] }}",
                "method": "GET",
                "timeout": 0,
                "headers": {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
            };

            $.ajax(settings)
                .done(function (response) {
                    // console.log('populating response')
                    if(!response.error){
                        // console.log(response.business_assets);
                        if (response.business_assets.length<1){
                            //    todo show empty array
                            $("#outlet-tbody").html('<td colspan="6">No Outlets Found</td>');

                        } else {
                            populateOutletData(response)
                        }

                    }
                })
                .fail(function (response) {
                    // todo show smth in tbody that table failed to load data
                })
        }

        function populateOutletData(response){
            let list_outlet_div = [];

            $.each( response.business_assets,  (count,outlet) =>{

                let outlet_id = outlet.id ? outlet.id : '';
                let outlet_name = outlet.name ? outlet.name : '';
                let outlet_store = outlet.store ? outlet.store : '';
                let outlet_promo_mech = outlet.pivot.promotion_mechanic ? outlet.pivot.promotion_mechanic : '';
                let outlet_promo_mech_value = outlet.pivot.promotion_mechanic_value ? outlet.pivot.promotion_mechanic_value : '';

                // console.log(outlet_promo_mech_value);
                let clone_div = $('.hidden .outlet-row-template').clone();
                clone_div.find('.row-checkbox .store-check').attr({
                    id : outlet_id,
                    name : outlet_name,
                    promo_mech : outlet_promo_mech,
                    value : outlet_promo_mech_value,
                });
                clone_div.find('.row-outlet').text(outlet_name);
                clone_div.find('.row-store').text(outlet_store);
                clone_div.find('.row-promo-mechanic').text(outlet_promo_mech.replace('_',' ') );
                let text_div = ['plain_text', 'promo_code', 'pin_code'];
                if ( text_div.includes( outlet_promo_mech ) ){
                    clone_div.find('.row-value .row-value-text').attr('style','').text(outlet_promo_mech_value);
                } else {
                    clone_div.find('.row-value .row-value-img').attr('src',outlet_promo_mech_value);
                    clone_div.find('.row-value .row-value-img').attr('style','');
                }
                clone_div.find('.row-edit-button').attr('id',outlet_id+'btn');

                list_outlet_div.push(clone_div)

            });

            $("#outlet-tbody").html(list_outlet_div);
            selectAllCheckBoxes($('#store-all'), $('.store-check'));

        }


        $('#batch-save-btn').on('click', function(){
            let modalData = $('#batchModal').data();

            var form = new FormData();
            form.append("promotion_mechanic",modalData.promotion_mechanic);
            form.append("business_asset_ids", JSON.stringify(modalData.business_asset_ids) );

            $(".batch-item").each( (c,item)=>{
                if ( $(item).attr('promo_mech').includes(modalData.promotion_mechanic) ){
                    if ( image_based_promos.includes(modalData.promotion_mechanic) ){
                        let uploaded_image = $('#batch-image')[0].files[0];
                        form.append("promotion_mechanic_value",uploaded_image, uploaded_image.name);
                    } else {
                        form.append("promotion_mechanic_value", $(item).find('.form-control').val() );
                    }
                }
            })

            var settings = {
                "url": "/admin/post_edit_voucher_series_step_2/{{ $voucher_series['series_id'] }}",
                "method": "POST",
                "timeout": 0,
                "processData": false,
                "mimeType": "multipart/form-data",
                "contentType": false,
                "data": form,
                "headers": {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    "Accept": "application/json"
                },
            };

            $.ajax(settings).done( function(response){
                populateOutletData(JSON.parse(response));
                $('#batchModal').modal('hide');
            })

        })
        function loadImg(){
            $('.preview-image').attr('src', URL.createObjectURL(event.target.files[0]) );
            // todo empty image
        }

        // init function
        getOutletDataAJAX();

    </script>

@endSection

@section('content')

    <!-- Content Header (Page header) -->
    @php
        $page_title = isset($voucher_series) ?  __('heading.title_edit_voucher_series').' <small>'.$voucher_series['series_id'].'</small>':__('heading.title_create_voucher_series');
    @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">
                    @csrf
                    <div class="card card-primary">
                        <h4 class="card-title">Promotion Mechanic Dashboard</h4>
                        <!-- /.card-header -->
                        <div class="card-body">

                            <button id="batch-edit-btn" type="button" class="btn btn-inline-block btn-default">
                                Batch Edit Outlets
                            </button>
                            <span id="batch-edit-btn-error" class="text-danger outlet"></span>
                            <br/><br/>
                          <script>console.log(  '{!!  json_encode($voucher_series['business_assets'])  !!}')</script>
                            @if($voucher_series['business_assets'])

                                @foreach($voucher_series['business_assets'] as $assets)
                                    <!-- real data -->
                                @endforeach
                            @else
                                <!-- fake data-->
                                <div class="col-12"></div>
                                    <table class="table table-striped table-bordered" style="width:100%">
                                        <thead class="thead-dark">
                                        <tr class="table-secondary">
                                            <th scope="col"  width="10px" >
                                                <input type="checkbox" class="form-check-input" id="store-all">

                                            </th>
                                            <th scope="col">Outlet Name</th>
                                            <th scope="col">Store Name</th>
                                            <th scope="col">Promotion Mechanic</th>
                                            <th scope="col" width="150px">Value</th>
{{--                                            <th scope="col" width="50px">Edit</th>--}}
                                        </tr>
                                        </thead>
                                        <tbody class="table-hover" id="outlet-tbody">
                                        <tr><td colspan="6">Loading...</td></tr>


{{--                                        @for($i = 0; $i < 10; $i++)--}}

{{--                                                @if($i<3)--}}
{{--                                                <tr>--}}
{{--                                                    <td>--}}
{{--                                                        <input type="checkbox" class="form-check-input store-check"--}}
{{--                                                               id="store{{$i}}" promo_mech="qr_code">--}}
{{--                                                    </td>--}}
{{--                                                    <td>Store {{$i}}</td>--}}
{{--                                                    <td>Puregold</td>--}}
{{--                                                    <td>QR Code</td>--}}
{{--                                                    <td>--}}
{{--                                                        <img src="https://unilever-voucher.skale.today/storage/qr_code.png" width="50px"/>--}}
{{--                                                    </td>--}}
{{--                                                    <td>--}}
{{--                                                        <button type="button" class="btn btn-block btn-xs btn-primary disabled">Edit</button>--}}
{{--                                                    </td>--}}
{{--                                                </tr>--}}
{{--                                                @elseif($i<6)--}}
{{--                                                <tr>--}}
{{--                                                    <td>--}}
{{--                                                        <input type="checkbox" class="form-check-input store-check"--}}
{{--                                                               id="store{{$i}}" promo_mech="promo_code">--}}
{{--                                                    </td>--}}
{{--                                                    <td>Store {{$i}}</td>--}}
{{--                                                    <td>Robinsons</td>--}}
{{--                                                    <td>Promo Code</td>--}}
{{--                                                    <td>ASD123</td>--}}
{{--                                                    <td>--}}
{{--                                                        <button type="button" class="btn btn-block btn-xs btn-primary disabled">Edit</button>--}}
{{--                                                    </td>--}}
{{--                                                </tr>--}}
{{--                                                @else--}}
{{--                                                    <tr>--}}
{{--                                                    <td>--}}
{{--                                                        <input type="checkbox" class="form-check-input store-check"--}}
{{--                                                               id="store{{$i}}" promo_mech="plain_text" value="This is plain text">--}}
{{--                                                    </td>--}}
{{--                                                    <td>Store {{$i}}</td>--}}
{{--                                                    <td>U Save</td>--}}
{{--                                                    <td>Plain Text</td>--}}
{{--                                                    <td>This is plain text</td>--}}
{{--                                                    <td>--}}
{{--                                                        <button type="button" class="btn btn-block btn-xs btn-primary disabled">Edit</button>--}}
{{--                                                    </td>--}}
{{--                                            </tr>--}}
{{--                                                @endif--}}
{{--                                        @endfor--}}
                                        </tbody>
                                    </table>


                                @endif
                        </div>
                    </div>

                </form>
            </div>

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

    <!-- Hidden templates -->
    <table class="hidden">
        <tr class="outlet-row-template">
            <td class="row-checkbox">
                <input type="checkbox" class="form-check-input store-check">
            </td>
            <td class="row-outlet">Store</td>
            <td class="row-store">Puregold</td>
            <td class="row-promo-mechanic">QR Code</td>
            <td class="row-value">
                <div class="row-value-text" style="display: none"></div>
                <img class="row-value-img" src="https://unilever-voucher.skale.today/storage/qr_code.png" width="150px" style="display: none"/>
            </td>
{{--            <td class="row-edit">--}}
{{--                <button class="row-edit-button btn btn-block btn-xs btn-primary disabled" type="button" >Edit</button>--}}
{{--            </td>--}}
        </tr>

    </table>


    <!-- Modal -->
    <div class="modal fade" id="batchModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Batch Editor</h4>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="row margin-bottom">
                            <div class="col-xs-12 show-batch">

                                <div class="batch-item batch-image" promo_mech="qr_code bar_code">
                                    <div>
                                        <img class="preview-image" width="250" height="250" style="object-fit: contain; background: #eee;"/>
                                    </div>

                                    <label for="batch-image">Upload Image:</label>
{{--                                    <label class="btn btn-default">--}}
{{--                                        Upload Image--}}
{{--                                        <input type="file" style="display: none">--}}
{{--                                    </label>--}}
                                    <input id="batch-image" class="form-control" type="file" accept="{{ \App\Http\Controllers\Admin\VoucherSeriesController::IMG_HTML_ACCEPT_RULE }}" onchange="loadImg()"/>
                                </div>

                                <div class="batch-item batch-promo" promo_mech="promo_code" >
                                    <label for="batch-promo">Enter Promo Code for Outlets:</label>
                                    <input id="batch-promo" class="form-control" type="text" placeholder="Promo code"/>
                                </div>

                                <div class="batch-item batch-pin" promo_mech="pin_code">
                                    <label for="batch-pin">Enter Pin Code for Outlets:</label>
                                    <input id="batch-pin" class="form-control" pattern="\d*" inputmode="numeric" type="text" placeholder="Pin code"/>
                                </div>

                                <div class="batch-item batch-text" promo_mech="plain_text">
                                    <label for="batch-text">Enter Text:</label>
                                    <textarea id="batch-text" class="form-control" placeholder="Enter Plain Text/ Promo Code/ Pin Code for Redemption" rows="4" width="100%" maxlength="191"></textarea>
                                </div>

                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
                                <div><b>Selected <span id="outlet-length">3</span> Outlets:</b> <span id="outlet-list">Store 1, Store2 , Store3</span></div>
                                <div><b>Promotional Mechanic:</b> <span id="promo_mech">QR Code</span></div>
                            </div>
                        </div>

                        <br/>
                    </div>
                </div>
                <div class="modal-footer text-center">
                    <small>* You will overwrite existing settings for selected vouchers</small><br/>
                    <button type="button" class="btn btn-default" data-dismiss="modal">{{ __('heading.btn_close') }}</button>
                    <button type="button" class="btn btn-primary" id="batch-save-btn">Save changes</button><br/>

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

    <!-- /.content -->

@endsection