@extends('layouts.stores_dashboard_layout')
@section('title')
{{trans('stores_dashboard.groups')}}

@endsection

@section('style')
    <style>
        .select2-container--default .select2-selection--multiple .select2-selection__choice,
        .select2-selection--multiple .select2-selection__choice{
            color:#000;
        }
        .img-block {
            position: relative;
        }

        a.degroup {
            position: absolute;
            color: #fff;
            background-color: red;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            top: -10px;
            left: -10px;
        }

        .upload-img {
            width: 100%;
            height: 200px;
            position: relative;
            margin: auto;
            border: 1px dashed #dadada;
            border-radius: 10px;
        }

        .upload-img .upload-icon {
            height: 200px;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
        }

        .upload-img input {
            position: absolute;
            opacity: 0;
            top: 0;
            left: 0;
            z-index: 9;
            width: 100%;
            height: 100%;
            right: 0;
        }

        .form-group .gallery {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
        }

        .upload-img .upload-icon i {
            font-size: 40px;
        }

        .upload-img .upload-icon span {
            font-size: 18px;
        }

        .img-block .images, .img-block .images img {
            width: 100%;
            height: 100%;
            left: 0;
            right: 0;
            position: absolute;
        }

        .img-block .images button.close {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            opacity: 1;
            left: 0;
            right: 0;
            z-index: 9999999;
        }
        .img-block .images button.close i{
            font-size: 25px;
        }
        .modal label{
            float:right
        }
        .gadwla {
            margin-right: 5px;
            margin-bottom: 0 !important;
        }

        .gadwla-none,
        .check-none,
        .check-none1,
        .check-none2 {
            display: none;
        }

        .collapsible12 {
            background-color: #1590d1;
            color: white;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
            display: flex;
            align-items: center;
        }

        .collapsible12 select {
            background: #fff !important;
            margin-left: 20px;
        }

        .collapes-div .de-collapse, .add-defertheme {
            position: absolute;
            top: 20px;
            color: #fff;
            display: block !important;
        }

        .collapsible-left {
            padding-left: 60px !important;
            padding-right: 40px !important;
        }
        .postGroups,
        .updateGroups{
            background-color: #47a9c4;
            color: white;
            border: 1px solid #47a9c4;
        }
        .postGroups:hover,
        .postGroups:focus,
        .updateGroups:hover,
        .updateGroups:focus{
            background-color: #1590d1;
            color: white;
            border:1px solid #1590d1;
            opacity: 0.6;
        }
        .collapsible1 {
            position: absolute;
            right: 10px;
            top: 30px;
            color: #fff;
            cursor: pointer;
            font-size: 24px;
        }

        .collapsible.active, .collapsible:hover, .collapsible12.active, .collapsible12:hover {
            background-color: #1590d1;
        }

        .d-flex {
            display: flex;
        }

        .collapsible, .collapsible12 {
            background-color: #1590d1;
            color: white;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
        }

        .custom-p {
            padding-top: 5px !important;
            padding-bottom: 5px !important;
            justify-content: space-around;
            justify-content: space-around;
            margin: 5px;
            border-radius: 5px;
        }

        .collapes-div {
            width: 100%;
            margin-bottom: 15px;
            position: relative;
            display: flex;
        }
        .edit_group{
            background-color: green;
            color: #fff;
            font-size: 10px;
            padding: 5px;
            text-align: center;
            display: block !important;
            cursor: pointer;
            border-radius: 5px;
            margin: 13px 0 3px 0;
        }
        .groups_container{
            display:flex;
            align-items:center;
            flex-wrap:wrap;
        }
        .groups_submit{
            background-color: #47a9c4;
            color: #fff !important;
            width: 200px;
            transition: .3s all ease;
            border: 1px solid #47a9c4;
        }
        .groups_submit:hover{
            background-color:#fff;
            color:#47a9c4 !important;
        }
    </style>
@endsection
@section('content')
    <div class="my-account white-bg pb-60 signin-page ">
        <div class="container-fluid pt-3 pb-3">
            <div class="row">
                <div class="col-12">
                    <div class="panel-group collapes-pro" id="accordion" role="tablist" aria-multiselectable="true">
                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingOne">
                                <h4 class="panel-title">

                                        <i class="fa fa-align-center"></i>
                                        {{trans("stores_dashboard.groups")}}
                                </h4>
                            </div>

                                <div class="panel-body">
                                    <div class="row df-theme df-theme-def">
                                        <form id="postGroupsForm" class="w-100">
                                            <div class="collapes-div">
                                                @foreach($product->productfeatures as $pf)
                                                    <select name="productfeatures_ids[]" class="form-control">
                                                        @foreach($pf->productfeatureproperities as $pfp)
                                                            <option value="{{$pfp->properity->id}}">{{$pfp->properity->name}}</option>
                                                        @endforeach
                                                    </select>
                                                @endforeach
                                                <div class="option-btn d-flex ml-1 mr-1">
                                                    {{csrf_field()}}
                                                    <input type="hidden" name="id" value="{{$product->id}}"/>
                                                    <button type="button" class="btn btn-dark postGroups">{{trans("stores_dashboard.add")}}</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="groups_container">
                                        @if(isset($groups))
                                            @foreach($groups as $group)
                                                <div class="group_div">
                                                <span>
                                                    <i class="fas fa-users"></i>
                                                        @foreach($group['properities'] as $pr)
                                                        <h6>{{$pr}}</h6>
                                                        @endforeach
                                                </span>
                                                    <a href="#" data-id="{{$group['id']}}" class="degroup group{{$group['id']}}">
                                                        <i class="fa fa-times" aria-hidden="true"></i>
                                                    </a>
                                                    <a data-toggle="modal"
                                                         data-group_id="{{$group['id']}}"
                                                         data-in_stock_qty="{{$group['in_stock_qty']}}"
                                                         data-price="{{$group['price']}}"
                                                         data-target="#editGroup"
                                                         class="edit_group">
                                                         {{trans("stores_dashboard.edit_quantity_price")}}
                                                        <i class="fas fa-pen"></i>
                                                    </a>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>
                <div class="col-12">
                    <div class="d-flex justify-content-center">
                        <a href="{{route('stores_dashboard.get_products')}}" class="btn mt-2 mb-2 groups_submit"> {{trans("stores_dashboard.done")}}  </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal editGroup" id="editGroup" tabindex="-1" role="dialog"
         aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body text-center">
                    <form id="updateGroupsForm" enctype="multipart/form-data">
                        <div class="row">

                            <div class="col-md-6 col-xs-12">
                                <div class="form-group">
                                    <label for="pprice">{{trans("stores_dashboard.price")}}</label>
                                    <input name="price" type="number" value="0.1" class="form-control" id="pprice">
                                </div>
                            </div>

                            <div class="col-md-6 col-xs-12">
                                <div class="form-group">
                                    <label for="">{{trans("stores_dashboard.quantity")}}</label>
                                    <input name="in_stock_qty" type="number" class="form-control">
                                </div>
                            </div>
                            <div class="col-xs-12">
                                <div class="option-btn d-flex ">
                                    {{csrf_field()}}
                                    <input type="hidden" name="group_id"/>
                                    <button type="button" class="btn btn-dark updateGroups">
                                    {{trans("stores_dashboard.add")}}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('scripts')
    <script>
            $(document).on('click', '.close', function (event) {
                event.preventDefault();
                $(this).parent().remove();
            });

            $('#gallery-photo-add12').on('change', function () {
                imagesPreview(this, 'div.gallery');
            });

            $('.gadwla').click(function () {
            event.preventDefault();
            $('.gadwla-none').fadeToggle();
        });
    </script>
    <script>
        $(document).on('click', '.postGroups', function (e) {
            e.preventDefault();

            //get form data
            var form = $('#postGroupsForm').get(0);
            var formData = new FormData(form);

            //disable the submitted button and show he spinner
            $(this).prop('disabled', true).css({opacity: '0.5'});
            $('.spinner-ajax').css({display: 'inline-block'});

            $.ajax({
                url: "{{route('stores_dashboard.postGroups')}}",
                type: "POST",
                data: formData,
                dataType: "json",
                processData: false,
                contentType: false,
                cache: false,
                success: function (data) {
                    // undisable the submitted button and hide the spinner
                    $('.postGroups').removeAttr("disabled").css({opacity: '1'});
                    $('.spinner-ajax').css({display: 'none'});
                    //got a resposne?
                    if (data.key == 'success') {
                        // $('.df-theme-custom').fadeIn();
                        var options = "";
                        $.each(data.arr, function (key, value) {
                            options += '<h6>' + value + '</h6>';
                        });
                        $('.groups_container').prepend(
                            `
                            <div class="group_div">
                            <span><i class="fas fa-users"></i> `+ options + `</span>
                                <a href="#" data-id=`+data.group_id+`" class="degroup group`+data.group_id+`">
                                    <i class="fa fa-times" aria-hidden="true"></i>
                                </a>
                                <a data-toggle="modal"
                                        data-group_id="`+data.group_id+`"
                                        data-in_stock_qty="`+data.in_stock_qty+`"
                                        data-price="`+data.price+`"
                                        data-target="#editGroup" class="edit_group edit_group`+data.group_id+`">
                                        {{trans("stores_dashboard.edit_quantity_price")}}
                                        <i class="fas fa-pen"></i>

                                </a>
                            </div>
                            `
                        );
                    } else {
                        Swal.fire({
                            title: data.msg,
                            position:'top',
                            timer: 3000,
                            type:'error',
                            showCloseButton: false,
                            showConfirmButton:false,
                            animation: true
                        })
                    }
                }
            });
        });
    </script>

    <script type="text/javascript">
        $(document).on('click', '.edit_group', function () {
            //get valus
            var group_id = $(this).data('group_id');
            var in_stock_qty = $(this).data('in_stock_qty');
            var price = $(this).data('price');

            //set values in modal inputs
            $("input[name='group_id']").val(group_id);
            $("input[name='in_stock_qty']").val(in_stock_qty);
            $("input[name='price']").val(price);
        });
    </script>

    <script>
        $(document).on('click', '.updateGroups', function (e) {
            e.preventDefault();

            //get form data
            var form = $('#updateGroupsForm').get(0);
            var formData = new FormData(form);

            //disable the submitted button and show he spinner
            $(this).prop('disabled', true).css({opacity: '0.5'});
            $('.spinner-ajax').css({display: 'inline-block'});

            $.ajax({
                url: "{{route('stores_dashboard.updateGroups')}}",
                type: "POST",
                data: formData,
                dataType: "json",
                processData: false,
                contentType: false,
                cache: false,
                success: function (data) {
                    // undisable the submitted button and hide the spinner
                    $('.updateGroups').removeAttr("disabled").css({opacity: '1'});
                    $('.spinner-ajax').css({display: 'none'});
                    //got a resposne?
                    if (data.key == 'success') {
                        $('.edit_group'+data.id).data('in_stock_qty',data.in_stock_qty);
                        $('.edit_group'+data.id).data('price',data.price);
                        $('#editGroup').modal('hide');
                        Swal.fire({
                            title:data.msg,
                            position:'top',
                            timer: 3000,
                            type:'success',
                            showCloseButton: false,
                            showConfirmButton:false,
                            animation: true
                        })

                    } else {
                        Swal.fire({
                            title: data.msg,
                            position:'top',
                            timer: 3000,
                            type:'error',
                            showCloseButton: false,
                            showConfirmButton:false,
                            animation: true
                        })
                    }
                }
            });
        });
    </script>
    <script>
        $(document).on('click','.degroup',function(e){
            e.preventDefault();

            var id = $(this).data('id');
            console.log(id);
            var _token = $("input[name='_token']").val();

            $.ajax({
                url:"{{route('stores_dashboard.removeGroup')}}",
                type:"POST",
                data:{
                    id: id,
                    _token:_token
                },
                dataType:"json",
                success:function(data){
                    if(data.key == 'fail'){
                        Swal.fire({
                            title: data.msg,
                            position:'top',
                            timer: 3000,
                            type:'error',
                            showCloseButton: false,
                            showConfirmButton:false,
                            animation: true
                        })
                    }else{
                        $('.group'+data.id).parents('.group_div').remove();
                    }
                }
            });
        });
    </script>
@endsection