@extends('admin.layout.app')
@section('style')
<style type="text/css">
    .form-group.feature-item-example.cstm-shadow.feat_new {
        box-shadow: inset 0px 0px 0px #00000033, inset 0px 0px 0px #ffffff, 0px 0 1px rgb(0 0 0 / 20%), 3px 3px 6px #d6d6d6, -4px -4px 3px #ffffff;
    }
</style>
@endsection
@section('header')

@endsection
@section('content')
<div class="row">
    {{--  //////////////////////////////////  --}}
                {!!Form::open( ['url' => '/dashboard/subscribes/' ,'method' => 'Post','files' => true,'class'=>'class1']) !!}
                @include('admin.subscribes.form')
                {!!Form::close() !!}
</div>
<!-- end row -->

<div id="info-modal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel"
    aria-hidden="true">
    <div class="modal-dialog" style="width:55%;">
        <div class="modal-content"  id="client-info-box">

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

@endsection
@section('script')
<script>
$('body').on('submit', '#client-ajx', function(e){
        e.preventDefault();

        var data = $(this).serializeArray();
        $.post($(this).attr('action'), data)
        .done(function(res){
            $('#info-modal').modal('hide');
            if (res.code == 200) {
                toastr["success"]("تمت العملية بنجاح .")

                toastr.options = {
                    "closeButton": false,
                    "debug": false,
                    "newestOnTop": false,
                    "progressBar": false,
                    "positionClass": "toast-top-right",
                    "preventDuplicates": false,
                    "onclick": null,
                    "showDuration": "300",
                    "hideDuration": "1000",
                    "timeOut": "5000",
                    "extendedTimeOut": "1000",
                    "showEasing": "swing",
                    "hideEasing": "linear",
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut"
                }
            $('.users-sel').html(res.msg);
            $('.select2').select2();
            }else{
                console.log(res)
            toastr["warning"](res.msg)

            toastr.options = {
                "closeButton": false,
                "debug": false,
                "newestOnTop": false,
                "progressBar": false,
                "positionClass": "toast-top-right",
                "preventDuplicates": false,
                "onclick": null,
                "showDuration": "500",
                "hideDuration": "1000",
                "timeOut": "5000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            }
            }
        })
        .fail(function(res){
            $('#info-modal').modal('hide');

        });
    });
    </script>

<script>
    setFeaturesNames();
    $('body').on('click', '.add-new-feature', function () {
        var block = $(this).parent().parent().find('.feature-item');
        var new_feat = block.find(".feature-item-example.hidden").last().clone();
        new_feat.removeClass('hidden').addClass('feat_new');
        block.append(new_feat);
        setFeaturesNames();
    });

    $('body').on('click', '.del-feature', function (e) {
        $(this).closest('.feat_new').remove();

        setFeaturesNames();
    });


    function setFeaturesNames() {
        $('.feature-item').each(function () {
            // console.log('feature-item');
            var num = 1;
            $(this).find('.feat_new').each(function () {
                // console.log('feature-item      ' + num);
                $(this).find('.feat_size').attr('name', "features["+num+"][size]");
                $(this).find('.feat_qty').attr('name', "features["+num+"][qty]");
                num++;
            });
        });

    }
</script>
@endsection