@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;
        }
    </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>
        $(document).ready(function () {
            $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

            $('#result_table_div').hide();

            function renderResults(data){
                // console.log(data);
                $('#result_table_div').show();
                $('#result_table').DataTable().destroy();
                var t = $('#result_table').DataTable({
                    lengthMenu: [ [10, 25, 50, 100, 200, 500, -1], [10, 25, 50, 100, 200, 500, "All"] ],
                    data: data,
                    columns: [
                        { data: 'id' },
                        { data: 'email' },
                        { data: 'user_uid' },
                        { data: 'frequency' },
                        { data: 'type' },
                    ]
                });

                t.on( 'order.dt search.dt', function () {
                    t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                        cell.innerHTML = i+1;
                    } );
                } ).draw();
            }

            function initPopup(draw_id){
                $modal =$('#create-draw-popup');
                $modal.modal('show');

                $modal.find('.btn-confirm').off('click').on('click', function(evt){
                    let button = $(evt.currentTarget);

                   console.log('confirm');
                    $.ajax({
                        "url" : '{{route("draw.store")}}',
                        "method": "POST",
                        "data" : {
                            'draw_id':draw_id,
                            'draw_name': $('#create-draw-popup').find('[name="draw_name"]').val()
                        },
                        "beforeSend": function () {
                            button.attr('disabled', true);
                        }
                    }).done(function (response) {
                        if(response.success){
                            makeToast('bg-success', 'Draw created successfully');
                            window.location.href = response.redirect_url;
                        }
                    })
                    .fail(()=>makeToast('bg-danger', 'Something went wrong'))
                    .always(()=> {
                        $modal.modal('hide');
                        button.attr('disabled', false);
                    });
                });
            }

            $('#create-draw').on('click', function () {
                var draw_id = $('#create-draw').data('draw_id');
                console.log(draw_id);
                initPopup(draw_id);
            });

            $('.receipt-tags, .user-tags, .draw-tags').select2({
                theme: 'bootstrap4',
                tags: true,
                width: '100%',
                // tokenSeparators: [',', ' '],
            });

            $('#customCheckboxExclusions').on('change', function () {
                if ($(this).is(':checked')) {
                    $('#exclusions-div').show();
                } else {
                    $('#exclusions-div').hide();
                }
            }).change();

            $('#run-draw').on('click', function () {
                var button = $(this)
                var data = {
                        "draw_type": $('input[name=draw_type]:checked').val(),
                        "number_of_winner": $('input[name=number_of_winner]').val(),
                        // "number_of_substitutes": $('input[name=number_of_substitutes]').val(),
                        "exclusions": {
                            "receipt_tags": $('.receipt-tags').val(),
                            "user_tags": $('.user-tags').val(),
                            "past_draws": $('.draw-tags').val(),
                        },
                    };

                if(substitutes = $('input[name=number_of_substitutes]').val()){
                    data['number_of_substitutes'] = substitutes;
                }

                $.ajax({
                    "url" :  "{{route('draw.run')}}",
                    "method": "POST",
                    "data": data,
                    "beforeSend": function () {
                        button.attr('disabled', true);
                    }
                }).done(function (response) {
                    // console.log(response);
                    if (!response.errors) {
                        makeToast('bg-success', 'See table below for the results');
                        $('#create-draw').data('draw_id', response.draw_id)
                        renderResults(response.list)
                    } else {
                        $.each(response.errors, function (name, msg) {
                            makeToast('bg-danger', msg);
                        })
                    }
                }).fail(function(response) {
                    console.log(response);
                    $.each(response.errors, function (name, msg) {
                        makeToast('bg-danger', msg);
                    })
                }).always(function (){
                    button.attr('disabled', false);
                });
        });



    });

    </script>

@endSection

@section('content')

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

            <div class="col-md-12">
                <form class="form-horizontal" >
                    @csrf
                    <div class="card card-primary card-outline shadow">

{{--                        <div class="card-header">--}}
{{--                            <h3 class="card-title">Details</h3>--}}
{{--                        </div>--}}
                        <!-- /.card-header -->
                        <div class="card-body">

                            <!-- text input -->
                            <div class="form-group row {{ $errors->has('name') ? 'has-error' : '' }} ">
                                <label class="col-sm-2 control-label">Draw Type </label>
                                <div class="col-sm-10">
                                    <div class="col-sm-6">
                                        <!-- radio -->
                                        <div class="form-group">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="draw_type" value="randomizer" checked="">
                                                <label class="form-check-label">Randomizer</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-2 control-label">Number of Winner: <span
                                            class="required">*</span></label>
                                <div class="col-sm-10">
                                    <input name="number_of_winner" type="number" class="form-control " placeholder="" value="1" min="0">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-2 control-label">Number of Substitutes: </label>
                                <div class="col-sm-10">
                                    <input name="number_of_substitutes" type="number" class="form-control " placeholder="" min="0">
                                </div>
                            </div>


                                <div class="form-group row">

                                    <div class="col-sm-2 pr-sm-0 mt-1">
                                            <div class="custom-control custom-checkbox">
                                                <input class="custom-control-input" type="checkbox" id="customCheckboxExclusions" value="exclusions">
                                                <label for="customCheckboxExclusions" class="custom-control-label">Exclusions</label>
                                            </div>
                                    </div>
                                    <div class="col-sm-10 pr-sm-0 mt-1" id="exclusions-div">
                                        <div class="form-group row">
                                                <label class="col-sm-2 control-label">Excludes receipts with tags</label>
                                                <div class="col-sm-10">
                                                    <select class="select2 select2-hidden-accessible receipt-tags" multiple="" data-placeholder="Select a Tags" >
                                                        @foreach($receipt_tags as $tag)
                                                            <option value="{{$tag['id']}}">{{$tag['name']}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="col-sm-2 control-label">Excludes users with tags</label>
                                            <div class="col-sm-10">
                                                <select class="select2 select2-hidden-accessible user-tags" multiple="" data-placeholder="Select a Tags">
                                                    @foreach($user_tags as $tag)
                                                        <option value="{{$tag['id']}}">{{$tag['name']}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="col-sm-2 control-label">Excludes past draws</label>
                                            <div class="col-sm-10">
                                                <select class="select2 select2-hidden-accessible draw-tags" multiple="" data-placeholder="Select a Draws">
                                                    @foreach($past_draws as $draw)
                                                        <option value="{{$draw['id']}}">{{$draw['name']}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                        </div>
                        <!-- /.card-body -->
                        <div class="card-footer">
                                <button id="run-draw" class="btn btn-info float-left">Run Draw</button>
                        </div>
                    </div>

                </form>
            </div>

        </div>

        <div class="row" id="result_table_div">
            <div class="col-md-12">
                <div class="card card-secondary card-outline shadow">
                    <div class="card-header">
                        <h3 class="card-title">Results</h3>
                        <button id="create-draw" class="btn btn-info float-right">Create Draw</button>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="result_table" class="table table-bordered table-hover dataTable">
                                <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>Email</th>
                                    <th>User UID</th>
                                    <th># of Chance Provisioned</th>
                                    <th>Winner/Substitute</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>

                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->
        @component('components.utility.template_popup', ['id' => 'create-draw-popup', 'custom_dialog_class' => 'modal-md', 'withoutTabIndex' => true])
            @slot('slot_header')
                <label class="modal-title"> Create Draw <span class="modal-item-name"></span></label>
            @endslot

            @slot('slot')
                <section class="content">

                    <div class="form-group row">
                        <label class="col-sm-2 control-label">Draw Name: <span
                                    class="required">*</span></label>
                        <div class="col-sm-10">
                            <input name="draw_name" type="text" class="form-control " placeholder="Give this draw a name">
                        </div>
                    </div>
                </section>
            @endslot

            @slot('slot_footer')
                <div class="w-100">
                    <button type="button" class="btn btn-default float-left" data-dismiss="modal">{{ __('heading.btn_close') }}</button>
                    <button type="button" class="btn btn-primary btn-confirm float-right">{{ __('Create') }}</button>
                </div>
            @endslot
        @endcomponent


@endsection