@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') } });
            var data = @json($draw_users);
            $('#edit-draw').data('draw_id', {{$draw['id']}})
            $('#edit-draw-popup').find('[name="draw_name"]').val('{{$draw['name']}}')
            renderResults(data )

            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 =$('#edit-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.update")}}',
                        "method": "PUT",
                        "data" : {
                            'draw_id':draw_id,
                            'draw_name': $('#edit-draw-popup').find('[name="draw_name"]').val()
                        },
                        "beforeSend": function () {
                            button.attr('disabled', true);
                        }
                    }).done(function (response) {
                        if(response.success){
                            makeToast('bg-success', 'Draw name edited successfully');
                            $('.dynamic-page-title').text($('#edit-draw-popup').find('[name="draw_name"]').val());
                        }
                    })
                        .fail(()=>makeToast('bg-danger', 'Something went wrong'))
                        .always(()=> {
                            $modal.modal('hide');
                            button.attr('disabled', false);
                        });
                });
            }

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

            $('.receipt-tags').val(@json($draw['exclusions']['receipt_tags']) );
            $('.user-tags').val(@json($draw['exclusions']['user_tags']) );
            $('.draw-tags').val(@json($draw['exclusions']['past_draws']) );

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

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

    </script>

@endSection

@section('content')

    <!-- Content Header (Page header) -->
    @php
        $page_title = $draw['name'];
    @endphp

    <!-- 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="" disabled>
                                                <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="{{$draw['settings']['number_of_winner']}}" disabled>
                                </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="" value="{{$draw['settings']['number_of_substitutes']}}" disabled>
                                </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"  disabled>
                                        <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="No selected Tags" disabled>
                                                @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="No selected Tags" disabled>
                                                @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" disabled>
                                                @foreach($past_draws as $pastDraw)
                                                    <option value="{{$pastDraw['id']}}">{{$pastDraw['name']}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>
                        <!-- /.card-body -->
                    </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>
                        <a target="_blank" href="{{route('draw.export', $draw['id'])}}" id="export-draw" class="btn btn-info float-right">Export Draw</a>
                        <button id="edit-draw" class="btn btn-default float-right px-3 mx-1">Rename 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' => 'edit-draw-popup', 'custom_dialog_class' => 'modal-md', 'withoutTabIndex' => true])
        @slot('slot_header')
            <label class="modal-title"> Rename 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">{{ __('Rename') }}</button>
            </div>
        @endslot
    @endcomponent


@endsection