@extends('dashboard.layouts.master')
@section('content')
    <div class="card">
        <div class="card-header">
            <h3>{{@$create}}</h3>
            <h3><a href="javascript:;" class="btn btn-primary add_level"><i class="fa fa-plus"></i> إضافه مستوي </a></h3>
        </div>
        <div class="card-body pb-0">
            <form class="form" method="post" action="{{route(@$route.'.storeLevel',$user_id)}}" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="user_id" value="{{$user_id}}">
                <div class="row">
                    <div class="col-md-6 form-group">

                        <label class="form-label"> المستوي <b class="level_payment_type text-danger"></b> </label>

                        <select required name="level_ids[]" class="form-control select2-custom level">
                            <option selected disabled>إختر المستوي</option>
                            @foreach($levels as $level)
                                <option {{old('level_id')==$level->id ? 'selected':''}} data-payment_type="{{$level->payment_type}}" data-price="{{$level->price}}" value="{{$level->id}}">{{$level->name}} ( <b class="text-danger">{{ $level->payment_type =='paid'?'مدفوع':'مجاني'}}</b> )</option>
                            @endforeach
                        </select>

                        @error('level_id')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                </div>
                <div class="row price_div d-none">
                    <div class="col-md-3 form-group">
                        <label class="form-label">السعر</label>
                        <input type="number" class="form-control price" readonly name="prices[][price]" value="0">

                        @error('level_id')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                    <div class="col-md-3 form-group">
                        <label class="form-label">نوع الخصم</label>
                        <select name="offer_types[][offer_type]" class="select2-custom offer_type">

                            <option {{old('offer_type') =='value' ?'selected':''}} value="value">قيمه ثابته</option>
                            <option {{old('offer_type') =='percent' ?'selected':''}} value="percent">نسبه</option>
                        </select>
                        @error('offer_type')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>

                    <div class="col-md-3 form-group">
                        <label class="form-label">قيمه الخصم</label>
                        <input class="form-control offer_value" name="offer_values[][offer_value]" value="{{old('offer_value') ??0}}" type="number" placeholder="">
                        @error('offer_value')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>

                    <div class="col-md-3 form-group">
                        <label class="form-label">الاجمالي</label>
                        <input class="form-control total " readonly name="totals[][total]" value="{{old('total') ??0}}" type="number" placeholder="">
                        @error('total')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                </div>
                <div class="level_form">

                </div>

                <div class="card-footer">
                    <button class="btn btn-primary btn-air-primary btn-icon" type="submit">
                        <i class="fa fa-save"></i>
                        حفظ
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection
@push('js')
    <script>
        /*  $(function () {

              let level_selected = $('.level'),
                  price = level_selected.find(':selected').data('price'),
                  payment_type = level_selected.find(':selected').data('payment_type'),
                  price_div = level_selected.parents('.row').find('.price_div'),
                  level_payment_type = level_selected.parents('.row').find('.level_payment_type');

              if (payment_type == 'paid') {
                  price_div.removeClass('d-none');
                  price_div.find('.price').val(price);
                  price_div.find('.total').val(price);
                  level_payment_type.text('مدفوع')

              } else if (payment_type == 'free') {
                  price_div.addClass('d-none');
                  price_div.find('.price').val(0);
                  price_div.find('total').val(0);
                  level_payment_type.text('مجاني')
              } else {
                  price_div.addClass('d-none');
                  price_div.find('.price').val(0);
                  price_div.find('.total').val(0);
                  level_payment_type.empty()
              }

          });*/
        $(document).on('change', '.level', function () {

            let payment_type = $(this).find(':selected').data('payment_type'),
                price = $(this).find(':selected').data('price'),
                price_div = $(this).parents('.form').find('.price_div'),
                offer_type = $(this).parents('.form').find('.offer_type'),
                level_payment_type = $(this).parents('.form').find('.level_payment_type'),
                discount = $(this).parents('.form').find('.offer_value'),
                total = $(this).parents('.form').find('.total');

            console.log(price)

            if (payment_type == 'paid') {
                price_div.removeClass('d-none');
                price_div.find('.price').val(price);
                total.val(price);
                level_payment_type.text('مدفوع');


                $(document).on('change', offer_type || discount, function () {
                    calcTotal();
                });

                function calcTotal() {

                    let total_price = 0;
                    if (offer_type.val() == 'percent') {
                        total_price = price - (price * discount.val() * .01);

                    } else {
                        total_price = price - discount.val();
                    }

                    if (total_price < 0) {
                        Toast.fire({
                            icon: 'warning',
                            title: 'قيمه الاجمالي يجب ان تكون أقل أو تساوي من  السعر'
                        })
                        total.val(total_price);
                        total.addClass('is-invalid');
                    } else {
                        total.val(total_price);
                        total.removeClass('is-invalid')
                    }
                }


            } else if (payment_type == 'free') {
                price_div.addClass('d-none');
                price_div.find($('input[name="price"]')).val(0);
                total.val(0);
                level_payment_type.text('مجاني')
            } else {
                price_div.addClass('d-none');
                price_div.find($('input[name="price"]')).val(0);
                total.val(0);
                level_payment_type.empty()
            }
        });
    </script>
    <script>
        $('.add_level').on('click', function () {
            let level_ids = [];
            $('.level').each(function () {
                level_ids.push($(this).val());
            });

            let url = '{{route('user-levels.renderLevelForm',":user_id")}}';
            url = url.replace(':user_id', '{{$user_id}}')
            $.ajax({
                type: "get",
                url: url,
                data: {
                    level_ids: level_ids
                },
                success: function (response) {
                    $('.level_form').append(response.view);
                    // $('.add_level').addClass('disabled');


                }
            })
        });


        $('.form').on('submit', function (e) {
            e.preventDefault();
            let url = $(this).attr('action'),
                data = new FormData($(this)[0]);
            console.log(data)
            $.ajax({
                type: "post",
                url: url,
                data: data,
                contentType: false,
                cache: false,
                processData: false,
                success: function (response) {
                    window.location.href = response
                },
                error: function (response) {
                    $.each(response.responseJSON.errors, function (key, value) {

                        Toast.fire({
                            icon: 'warning',
                            title: value[0]
                        })

                    })
                }
            })

        });
    </script>
@endpush