@extends('layout.default')
@section('content')

@section('page_toolbar')
   <a class="btn btn-success px-2 font-weight-bold btn-sm" href="{{ URL::previous() }}">
        <i class="icon-1x flaticon2-fast-back"></i> Back
    </a>
@endsection

<!--begin::Content-->
@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"
      rel="stylesheet"/>

<div class="card card-custom">
    <div class="card-body">
        <form class="form-horizontal"
              action="{{ url('admin/subscriptions') }}{{ ($subscription) ? '/'.$subscription->id : '' }}" method="POST"
              enctype="multipart/form-data" id="subscriptionForm">
            {{ csrf_field() }}
            {{ ($subscription) ? method_field('PUT') : '' }}
            {!! Form::hidden('subscription_id', $subscription->id ?? '' , [ 'id' => 'subscription_id'] ) !!}
            <div class="modal-body">
                <div class="col-md-12">
                    <div class="row">
                        <div class="form-group col-sm-12 col-xs-12">
                            <label class="col-form-label">Name <span class="text-danger">*</span></label>
                            <div>
                                {!! Form::text('name', $subscription->name ?? '' , ['class' => 'form-control', 'id' => 'name', 'placeholder' => "Subscription Name", 'maxlength' => 160] ) !!}
                            </div>
                        </div>
                        <div class="form-group col-sm-4 col-xs-12">
                            <label class="col-form-label">User Type <span class="text-danger">*</span></label>
                            <div>
                                {!! Form::select('user_type', $user_type , $subscription->user_type ??'student', ['class' => 'form-control ', 'id' => 'user_type', 'style' => 'width:100%','placeholder'=>'Select user type']) !!}
                            </div>
                        </div>
                        <div class="form-group col-sm-4 col-xs-12 conditions student-dv" id="studentCurriculum"
                             style="{{ @$subscription->user_type ==  'student' ? 'display:block;' : 'display:none;'  }}">
                            <label class="col-form-label">Subscription Type</label>
                            {!! Form::select('sub_type', $sub_type , $subscription->sub_type ?? '', ['class' => 'form-control ', 'id' => 'sub_type', 'style' => 'width:100%','placeholder'=>'Choose Subscription Type']) !!}
                        </div>
                        <div class="form-group col-sm-4 col-xs-12 conditions student-dv" id="studentCurriculum"
                             style="{{ @$subscription->user_type ==  'student' ? 'display:block;' : 'display:none;'  }}">
                            <label class="col-form-label">Curriculum</label>
                            {!! Form::select('curriculum[]', $curriculum , $curriculum_selected, ['class' => 'form-control ', 'style' => 'width:100%','placeholder'=>'Choose Curriculum','multiple']) !!}
                        </div>
                        <div class="form-group col-sm-3 col-xs-12">
                            <label class="col-form-label">Amount <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text">£</span></div>

                                {!! Form::number('amount', $subscription->amount ?? '' , ['class' => 'form-control check_numeric', 'id' => 'amount', 'placeholder' => "Amount"] ) !!}
                                @if ($errors->has('amount'))
                                    <span class="help-block"> <strong>{{ $errors->first('email_id') }}</strong> </span>
                                @endif
                            </div>
                        </div>
                        <div class="form-group col-sm-3 col-xs-12 student-dv"
                             style="{{ @$subscription->user_type ==  'student' ? 'display:block;' : 'display:none;'  }}">
                            <label class="col-form-label">Discount</label>
                            <div class="input-group">
                                {!! Form::number('discount', $subscription->discount ?? '' , ['class' => 'form-control check_numeric', 'id' => 'discount', 'placeholder' => "Discount rate"] ) !!}
                                <div class="input-group-append"><span class="input-group-text">%</span></div>
                            </div>
                            <small>*for next academic purchase</small>
                        </div>
                        <div class="form-group col-sm-4 col-xs-12">
                            <label class="col-form-label">Duration Start </label>
                            {!! Form::select('duration', $subscription_durations , $subscription->duration ?? '', ['class' => 'form-control ', 'id' => 'duration', 'style' => 'width:100%','placeholder'=>'Choose duration']) !!}
                         </div>

                        {{-- <div class="form-group col-sm-3 col-xs-12 student-dv"
                             style="{{ @$subscription->user_type ==  'student' ? 'display:block;' : 'display:none;'  }}">
                            <label class="col-form-label">Plan Start Date <span class="text-danger">*</span></label>
                            {!! Form::text('start_date','', ['class' => 'form-control ', 'id' => 'start_date', 'style' => 'width:100%','placeholder'=>'Choose Date', 'data-date-format'=>'dd/mm/yyyy']) !!}
                        </div>

                        <div class="form-group col-sm-3 col-xs-12 student-dv"
                             style="{{ @$subscription->user_type ==  'student' ? 'display:block;' : 'display:none;'  }}">
                            <label class="col-form-label">Plan End Date <span class="text-danger">*</span></label>
                            {!! Form::text('end_date','', ['class' => 'form-control ', 'id' => 'end_date', 'style' => 'width:100%','placeholder'=>'Choose date', 'data-date-format'=>'dd/mm/yyyy']) !!}
                        </div> --}}
                        <div class="form-group col-sm-12 col-xs-12 ">
                            <label class="col-form-label">Subscription details <span
                                    class="text-danger">*</span></label>
                            <div class="input-group">
                                {!! Form::textarea('details', $subscription->details ?? '' , ['class' => 'form-control', 'id' => 'details', 'placeholder' => " Subscription details",'rows'=>'3'] ) !!}
                                @if ($errors->has('details'))
                                    <span class="help-block"> <strong>{{ $errors->first('details') }}</strong> </span>
                                @endif
                            </div>
                        </div>
                    </div>

                    <br>
                    <div class="row conditions" id="tutorConditions"
                         style="{{ @$subscription->user_type ==  'tutor' ? 'display:block;' : 'display:none;'  }}">
                        <!--  <div class="form-group col-sm-12 col-xs-12 tutorplans">
                             <h2> Tutor Plans </h2>
                         </div> -->


                        <div class="form-group col-sm-12 col-xs-12 tutorplans">
                            <label class="col-form-label">For additional student <span
                                    class="text-danger">*</span></label>
                            <div>
                                <table class="table table-bordered" id="dynamic_field_tutor">
                                    <thead>
                                    <tr>
                                        <th class="text-center">Student count</th>
                                        <th class="text-center">Price</th>
                                        <th class="text-center">Action</th>
                                    </tr>
                                    </thead>

                                    @if(count($tutor_conditions) > 0)
                                        @foreach($tutor_conditions as $conditions)
                                            <tr id="row{{$conditions['id']}}">
                                                <td><input type="text" name="ordinal_number[]"
                                                           value="{{$conditions['ordinal_number']}}"
                                                           placeholder="Ordinal Number"
                                                           class="form-control check_numeric ordinal_number_list"/></td>
                                                <td><input type="text" name="discount_rate[]"
                                                           value="{{$conditions['discount_rate']}}"
                                                           placeholder="Discount Rate"
                                                           class="form-control check_numeric ordinal_discount_rate_list"/>
                                                </td>
                                                <td>
                                                    <button type="button" name="edit_remove" id="{{$conditions['id']}}"
                                                            class="btn btn-danger btn_edit_remove">X
                                                    </button>
                                                </td>
                                                @if($loop->first)
                                                    <td>
                                                        <button type="button" name="add" id="add"
                                                                onclick="addRows('tutor')" class="btn btn-primary">Add
                                                            More
                                                        </button>
                                                    </td>

                                                @endif
                                            </tr>
                                        @endforeach
                                    @else
                                        <tr>
                                            <td><label class="col-form-label">Every additional students count <span
                                                        class="text-danger">*</span></label><input type="text"
                                                                                                   name="ordinal_number[]"
                                                                                                   placeholder="Students count"
                                                                                                   class="form-control check_numeric ordinal_number_list"/>
                                            </td>
                                            <td><label class="col-form-label">Price<span
                                                        class="text-danger">*</span></label><input type="number"
                                                                                                   name="discount_rate[]"
                                                                                                   placeholder="Price"
                                                                                                   class="form-control check_numeric ordinal_discount_rate_list"/>
                                            </td>
                                            <td><label class="col-form-label">&nbsp;</label>
                                                <button type="button" name="add" id="add" onclick="addRows('tutor')"
                                                        class="form-control btn btn-primary">Add More
                                                </button>
                                            </td>
                                        </tr>
                                    @endif

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


                    </div>

                    <div class="row">
                        <div class="form-group col-sm-4 col-xs-12">
                            <input type="hidden" name="table_rowcount" id="table_rowcount" value='{{$table_rowcount}}'/>
                            <button type="submit" id="tasksubmitbtn" class="btn btn-success sbmtSubscription">Save
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>

    </div>
</div>

<!--end::Content-->
@endsection
@section('scripts')
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <script src="{{ url('plugins/custom/datatables/datatables.bundle.js?v=7.0.6')}}"></script>
    <script>
        var indexUrl = "{{ url('admin/subscriptions') }}";

        @if(!$subscription)
        $(".student-dv").show();
            @endif

        var KTBootstrapDatepicker = function () {

                var arrows;
                if (KTUtil.isRTL()) {
                    arrows = {
                        leftArrow: '<i class="la la-angle-right"></i>',
                        rightArrow: '<i class="la la-angle-left"></i>'
                    }
                } else {
                    arrows = {
                        leftArrow: '<i class="la la-angle-left"></i>',
                        rightArrow: '<i class="la la-angle-right"></i>'
                    }
                }

                // Private functions
                var demos = function () {

                    $('#start_date').datepicker({
                        rtl: KTUtil.isRTL(),
                        orientation: "top right",
                        todayHighlight: true,
                        templates: arrows,
                    });

                    $('#end_date').datepicker({
                        rtl: KTUtil.isRTL(),
                        orientation: "top right",
                        todayHighlight: true,
                        templates: arrows,
                    });

                }

                return {
                    // public functions
                    init: function () {
                        demos();
                    }
                };
            }();

        jQuery(document).ready(function () {
            KTBootstrapDatepicker.init();
            @if($subscription)
            @if(@$subscription->user_type == 'student' || !isset( $subscription->user_type))
            $('.student-dv').show();
            @if($subscription->start_date!='')
            $('#start_date').datepicker("setDate", new Date('{{ $subscription->start_date }}'));
            @endif
            @if($subscription->end_date!='')
            $('#end_date').datepicker("setDate", new Date('{{ $subscription->end_date }}'));
            @endif
            @endif

            @endif



        });

        document.addEventListener('DOMContentLoaded', function (e) {
            FormValidation.formValidation(
                document.getElementById('subscriptionForm'),
                {
                    fields: {
                        name: {
                            validators: {
                                notEmpty: {
                                    message: 'Please enter name'
                                }
                            }
                        },
                        user_type: {
                            validators: {
                                notEmpty: {
                                    message: 'Please enter user_type'
                                }
                            }
                        },
                        amount: {
                            validators: {
                                notEmpty: {
                                    message: 'Please enter amount'
                                }
                            }
                        },
                        // discount: {
                        //     validators: {
                        //         notEmpty: {
                        //             message: 'Please enter duration',

                        //         }
                        //     }
                        // },
                        // start_date: {
                        //     validators: {
                        //         notEmpty: {
                        //             message: 'Please select any date',

                        //         }
                        //     }
                        // },
                        // end_date: {
                        //     validators: {
                        //         notEmpty: {
                        //             message: 'Please select any date',

                        //         }
                        //     }
                        // },


                    },
                    plugins: {
                        trigger: new FormValidation.plugins.Trigger(),
                        bootstrap: new FormValidation.plugins.Bootstrap(),
                        submitButton: new FormValidation.plugins.SubmitButton(),
                        trigger: new FormValidation.plugins.Trigger(),


                    },
                }
            ).on('core.form.valid', function () {
                $("#subscriptionForm").submit();
            });

        });

        function addRows(type) {
            i++;
            if (type == 'tutor') {
                $('#dynamic_field_' + type).append('<tr id="row' + i + '"><td><label class="col-form-label">Every additional student count <span class="text-danger">*</span></label><input type="text" name="ordinal_number[]" placeholder="Ordinal Number" class="form-control check_numeric ordinal_number_list" /></td><td><label class="col-form-label">Price <span class="text-danger">*</span></label><input type="text" name="discount_rate[]" placeholder="Price" class="form-control check_numeric ordinal_discount_rate_list" /></td><td><button type="button" name="remove" id="' + i + '" onclick="addRows("tutor")" class="btn btn-danger btn_remove">X</button></td></tr>');
                $("#table_rowcount").val(i);
            }
            // else if(type == 'school'){
            //     $('#dynamic_field_'+type).append('<tr id="row'+i+'"><td><label class="col-form-label">Number of students from <span class="text-danger">*</span></label><input type="text" name="student_number_from[]" placeholder="Number of students from" class="form-control check_numeric ordinal_number_list" /></td><td><label class="col-form-label">Number of students to <span class="text-danger">*</span></label><input type="text" name="student_number_to[]" placeholder="Number of students to" class="form-control check_numeric ordinal_number_list" /></td><td><label class="col-form-label">Amount<span class="text-danger">*</span></label><input type="text" name="student_amount[]" placeholder="Amount" class="form-control check_numeric ordinal_discount_rate_list" /></td><td><button type="button" name="remove" id="'+i+'" onclick="addRows("school")" class="btn btn-danger btn_remove">X</button></td></tr>');
            //     $("#table_rowcount").val(i);
            // }
        }

        $(document).on('click', '.btn_remove', function () {
            var button_id = $(this).attr("id");
            $('#row' + button_id + '').remove();
            var old_rowcount = $("#table_rowcount").val();
            $("#table_rowcount").val(old_rowcount - 1);
        });

        $("#user_type").change(function () {
            $('.conditions').hide();
            if (this.value == 'tutor') {
                $('#tutorConditions').show();
                $('.student-dv').hide();
                $("#start_date").val('00/00/0000');
                $("#end_date").val('00/00/0000');

            } else if (this.value == 'school') {
                $('.student-dv').hide();
            } else {
                $('.student-dv').show();
                $("#start_date").val('');
                $("#end_date").val('');

            }

        });

        $('#startdate').datepicker({
            format: 'dd-mm-yyyy',
            todayHighlight: true,
            autoclose: true
        });

        $('#enddate').datepicker({
            format: 'dd-mm-yyyy',
            todayHighlight: true,
            autoclose: true
        });


        // function addSubscription(yearId) {
        //     if (yearId === null) {
        //         $("#subscriptionForm")[0].reset();
        //         $("#subscriptionModal").modal("show");
        //     } else {

        //         $.ajax({url: "{{ url('admin/subscriptions') }}/" + yearId + "/edit", type: "GET", dataType: "html"})
        //             .done(function (a) {
        //                 var data = JSON.parse(a);
        //                 $("#subscription_id").val(data.subscription_id);
        //                 $("#name").val(data.name);
        //                 $("#user_type").val(data.user_type);
        //                 $("#duration").val(data.duration);
        //                 $("#amount").val(data.amount);

        //                 $("#subscriptionModal").modal("show");
        //             }).fail(function () {
        //                 showAlert("Please try again...", "error");
        //         });
        //     }
        // }

        // $(".check_numeric").keydown(function (event) {
        //     var val = $(this).val();
        //       if(isNaN(val)){
        //            val = val.replace(/[^0-9\.]/g,'');
        //            if(val.split('.').length>2)
        //                val =val.replace(/\.+$/,"");
        //       }


        // });


        var i = 1;
        $("#add_row").click(function () {
            $('#addr' + i).html("<td>" + (i + 1) + "</td><td><input name='discount_ordinal_number_" + i + "' type='text' placeholder='Ordinal Number' class='form-control input-md check_numeric'  /></td><td><input  name='discount_" + i + "' type='text' placeholder='Discount Value'  class='form-control input-md check_numeric'></td>");

            $('#tutorOrdinalTable').append('<tr id="addr' + (i + 1) + '"></tr>');
            i++;
        });
        $("#delete_row").click(function () {
            if (i > 1) {
                $("#addr" + (i - 1)).html('');
                i--;
            }
        });
        $(document).on('click', '.btn_edit_remove', function () {
            alert($(this).attr("id"));
            var button_id = $(this).attr("id");
            $('#row' + button_id + '').remove();
        });
        //      [{"no_stdns": 2, "discount": 10},{"no_stdns": 2, "discount": 10}]
        // let questionDetails = [];
        // let questionAnswer = {"question_id": $(this).attr("data-question-id"),
        //                        "answer": answer};
        // questionDetails.push(questionAnswer);


    </script>
@endsection