@extends('layouts.stores_dashboard_layout')
@section('style')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .select2-container--default .select2-selection--multiple .select2-selection__choice,
        .select2-selection--multiple .select2-selection__choice{
            color:#000;
        }
        .btn-dark, .btn-dark:hover {
            color: #fff;
            background-color: #343a40;
            border-color: #343a40;
        }

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

        .collapes-div {
            width: 100%;
            margin-bottom: 15px;
            position: relative;
        }

        .collapes-div .de-collapse {
            color: #fff;
            display: block !important;
            background-color: #46a8c3;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            text-align: center;
            line-height: 25px;
        }

        .collapes-div .de-collapse {

        }
        .postProductFeature{
            background-color: #46a8c3;
            border: 1px solid #47a8c4 !important;
            color: #fff;
            height: 35px;
            border-radius: 5px;
            transition: .6s all ease;
        }
        .postProductFeature:hover{
            background-color: #fff;
            color: #46a8c3;
        }
        .postProductFeature:focus{
            outline: none;
        }
        .collapes-div .collapsible{
            height: 40px;
            line-height: 0;
            text-align: center;
            border-radius: 10px;
            margin-top: 10px;
            background-color: #55689e;
        }

        .postProductFeatureProperities{
            background-color: #46a8c3;
            border: 1px solid #46a8c3 !important;
            color: #fff;
            height: 35px;
            border-radius: 5px;
            transition: .6s all ease;
        }
        .postProductFeatureProperities:hover{
            background-color: #fff;
            color: #46a8c3;
        }
        .postProductFeatureProperities:focus{
            outline: none;
        }
    </style>

@endsection
@section('title')
{{trans('stores_dashboard.features')}}

@endsection

@section('content')
    <div class="my-account white-bg pb-60 signin-page ">
        <div class="container-fluid p-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">
                                <h4 class="panel-title">
                                    <i class="fa fa-align-center"></i>
                                    {{trans('stores_dashboard.features')}}
                                </h4>
                                <div class="panel-body">
                                    <form id="postProductFeatureForm" class="w-100">
                                        <div class="row align-items-center">
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <select class="form-control se-val" name="feature_id">
                                                        @foreach($features as $feature)
                                                            <option value="{{$feature->id}}">{{$feature->name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="option-btn d-flex justify-content-center">
                                                    {{csrf_field()}}
                                                    <input type="hidden" name="id" value="{{$product->id}}"/>
                                                    <button style="width: 150px;line-height: 0;"
                                                            class="btn btn-dark add-subtheme postProductFeature">
                                                            {{trans('stores_dashboard.add')}}
                                                        &nbsp;
                                                        <!-- <i class="spinner-ajax fa fa-spinner fa-spin"></i> -->
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                    <div class="row sub-theme">
                                        <form id="postProductFeatureProperitiesForm" class="container-fluid w-100 mt-4">

                                            @if($product->productfeatures()->count()>0)

                                                @foreach($product->productfeatures as $pfs)
                                                    <div class="collapes-div">
                                                        <!-- <button type="button" class="collapsible">  {{$pfs->feature->name}} </button> -->
                                                        <a style="color: #ffa11f" href="#" data-id="{{$pfs->id}}" class="de-collapse repfs{{$pfs->id}}">
                                                            <i class="fa fa-times" aria-hidden="true"></i>
                                                        </a>
                                                        <div class="">
                                                            <div class="row">
                                                                <div class="col-12 select-options">
                                                                    <div class="form-group">
                                                                        <label for="">{{$pfs->feature->name}}</label>
                                                                        <select class="select2 form-control" name="properities{{$pfs->id}}[]" multiple="multiple">
                                                                            @foreach($pfs->feature->properities as $properity)
                                                                                <option {{$pfs->productfeatureproperities()->where('properity_id',$properity->id)->first()?'selected':''}} value="{{$properity->id}}">{{$properity->name}}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>
                                                                    <div class="option-btn d-flex justify-content-between option-btn">
                                                                        <button type="button" class="btn chosen-toggle select-btn-all">
                                                                        {{trans('stores_dashboard.select_all')}}
                                                                        </button>
                                                                        <button type="button" class="btn chosen-toggle unselect-btn">
                                                                        {{trans('stores_dashboard.decline_all')}}
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <input type="hidden" name="productfeature_id[]" value="{{$pfs->id}}"/>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @endif
                                            <input type="hidden" name="id" value="{{$product->id}}"/>
                                            <button style="margin: auto;{{$product->productfeatures()->count()>0?'display:block':'display:none'}}"
                                                    type="submit"
                                                    class="btn col-6 postProductFeatureProperities">
                                                {{trans('stores_dashboard.save')}}
                                            </button>
                                            {{csrf_field()}}
                                        </form>
                                    </div>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        // $('.sub-theme').on('click', ".collapsible", function () {
        //     $(this).parent().find('.content').fadeToggle();
        // });
        $('.collapsible1').click(function () {
            $(this).siblings().fadeToggle();
            $('.collapsible12').toggleClass('active')
        });
        $('.sub-theme').on('click', ".collapsible", function() {
            $(this).siblings().fadeToggle();
            $(this).toggleClass('active')
        });
        $(document).on('click', '.postProductFeature', function (e) {

            e.preventDefault();

            //get form data
            var form = $('#postProductFeatureForm').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.postProductFeatures')}}",
                type: "POST",
                data: formData,
                dataType: "json",
                processData: false,
                contentType: false,
                cache: false,
                success: function (data) {
                    // undisable the submitted button and hide the spinner
                    $('.postProductFeature').removeAttr("disabled").css({opacity: '1'});
                    $('.spinner-ajax').css({display: 'none'});
                    //got a resposne?
                    if (data.key == 'success') {
                        //append theme
                        var sectionVal = data.feature_name;
                        var properities = data.properities;
                        var options = "";
                        $.each(properities, function (key, value) {
                            options += '<option value="' + value.id + '">' + value.name.ar + '</option>';
                        });
                        var theme_html =
                            '<div class="collapes-div">' +
                            // '<button type="button" class="collapsible"> ' + sectionVal + ' </button> ' +
                            '<a href="#" data-id="'+data.productfeature_id+'" class="de-collapse repfs'+data.productfeature_id+'">'+
                            '<i class="fa fa-times" aria-hidden="true"></i>'+
                            '</a>'+
                            '<div class="">' +
                            '<div class="row">' +
                            '<div class="col-12 select-options">' +
                            '<div class="form-group">' +
                            '<label for="">'+sectionVal+'</label>' +
                            '<select class="select2 form-control" name="properities' + data.productfeature_id + '[]" multiple="multiple">' +
                            options +
                            '</select>' +
                            '</div>' +
                            '<div class="option-btn d-flex justify-content-between">' +
                            '<button type="button" class="btn select-btn-all">{{trans("stores_dashboard.select_all")}}</button>' +
                            ' <button type="button" class="btn unselect-btn">{{trans("stores_dashboard.decline_all")}}</button>' +
                            '</div>' +
                            '</div>' +
                            '<input type="hidden" name="productfeature_id[]" value="' + data.productfeature_id + '"' +
                            '</div>';
                        $("#postProductFeatureProperitiesForm").prepend(theme_html);
                        $('.postProductFeatureProperities').css({
                            display: 'block'
                        });
                        $('.select2').select2();
                    } else {
                        Swal.fire({
                            title: data.msg,
                            position:'top',
                            timer: 3000,
                            type:'error',
                            showCloseButton: false,
                            showConfirmButton:false,
                            animation: true
                        })
                    }
                }
            });
        });
        $(document).ready(function() {
                $('.select2').select2();
            });
            $(document).on('click', '.select-btn-all', function () {
                    $(this).parents('.select-options').find(".select2 > option").prop("selected","selected");
                    $(this).parents('.select-options').find(".select2").trigger("change");
                });
            $(document).on('click', '.unselect-btn', function () {
                    $(this).parents('.select-options').find(".select2 > option").prop("selected","");
                    $(this).parents('.select-options').find(".select2").trigger("change");
                });
    </script>

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

            //get form data
            var form = $('#postProductFeatureProperitiesForm').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.postProductFeatureProperities')}}",
                type: "POST",
                data: formData,
                dataType: "json",
                processData: false,
                contentType: false,
                cache: false,
                success: function (data) {
                    // undisable the submitted button and hide the spinner
                    $('.postProductFeatureProperities').removeAttr("disabled").css({opacity: '1'});
                    $('.spinner-ajax').css({display: 'none'});
                    //got a resposne?
                    if (data.key == 'success') {
                        Swal.fire({
                            title: data.msg,
                            position:'top',
                            timer: 3000,
                            type:'success',
                            showCloseButton: false,
                            showConfirmButton:false,
                            animation: true
                        })
                        setInterval(function () {
                            location.assign(data.url);
                        }, 2000);
                    } else {
                        Swal.fire({
                            title: data.msg,
                            position:'top',
                            timer: 3000,
                            type:'error',
                            showCloseButton: false,
                            showConfirmButton:false,
                            animation: true
                        })
                    }
                }
            });
        });
    </script>

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

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

            $.ajax({
                url:"{{route('stores_dashboard.removeProductFeature')}}",
                type:"POST",
                data:{
                    id: id,
                    _token:_token
                },
                dataType:"json",
                success:function(data){
                    if(data.key == 'fail'){
                        swal({
                            title: data.msg,
                            type:'error',
                            timer: 1800,
                            showCloseButton: true,
                            showConfirmButton:false,
                            animation: true,
                        }).catch(swal.noop);
                    }else{
                        $('.repfs'+data.id).parents('.collapes-div').remove();
                    }
                }
            });
        });
    </script>
@endsection