@extends("Admin.template" ,["table"=>true])
@section("content")
    <!-- Page header -->
    <div class="page-header page-header-light">
        <div class="page-header-content header-elements-md-inline">
            <div class="page-title d-flex">
                <h4><i class="icon-arrow-right6 mr-2"></i>
                    <span class="font-weight-semibold">   {{__('messages.in_layouts')}}</span>
                    -             {{__('messages.layout_type_'.$layout->layout_type)}}
                </h4>
                <a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
            </div>
        </div>
    </div>
    <!-- /page header -->


    <div class="content">
        <div class="card">
            <div class="card-header header-elements-inline">
                <h5 class="card-title"> {{__('messages.edit')}}
                    {{__('messages.layout_type_'.$layout->layout_type)}}
                </h5>
            </div>

            <div class="card-body">
                <form action="#" class="form1" id="form1">
                    @csrf
                    @method('PUT')
                    <div class="row">

                        <div class="col-md-6">
                            <div class="form-group ">
                                <label for="building_age"> {{__('messages.layout_type')}}</label>
                                <select class="form-control select select2 required " id="layout_type"
                                        name="layout_type" required
                                        onchange="CheckLayoutType(this.value)"
                                        data-msg="{{__('messages.select')}} {{__('messages.layout_type')}}"
                                >
                                    <option value="">{{__('messages.select')}} {{__('messages.layout_type')}}</option>
                                    <option value="1"     @if ($layout->layout_type == 1)   selected @endif >{{__('messages.layout_type_1')}} </option>
                                    <option value="2"     @if ($layout->layout_type == 2)   selected @endif >{{__('messages.layout_type_2')}} </option>
                                    <option value="3"     @if ($layout->layout_type == 3)   selected @endif >{{__('messages.layout_type_3')}} </option>
                                    <option value="4"     @if ($layout->layout_type == 4)   selected @endif >{{__('messages.layout_type_4')}} </option>
                                </select>
                            </div>
                        </div>



                    </div>

                    <div class="row" id="layout_type_content">
                        @if ($layout->layout_type == 1)
                            {{--layout_type_1--}}
                            {{--{{__('messages.label_box_1')}}--}}
                            <div class="col-md-6">
                                <div class="form-group ">
                                    <label for="building_age">{{__('messages.label_box_1')}}</label>
                                    <select class="form-control select select2 required layout_contents"
                                            id="layout_contents"
                                            name="layout_contents[0]"
                                            required
                                            data-msg="{{__('messages.select')}} {{__('messages.label_box_1')}}"
                                    >
                                        @foreach($InitContents as $InitContent)
                                            <option value="{{$InitContent->id}}" @if($InitContent->id == $layout->ContentsR[0]->content_id) selected @endif>{{$InitContent->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                        @elseif ($layout->layout_type == 2)

                            {{--layout_type_2--}}
                            {{--{{__('messages.label_box_2')}}--}}
                            <div class="col-md-6">
                                <div class="form-group ">
                                    <label for="building_age">{{__('messages.label_box_2')}}</label>
                                    <select class="form-control select select2 required layout_contents"
                                            id="layout_contents"
                                            name="layout_contents[0]" required
                                            data-msg="{{__('messages.select')}} {{__('messages.label_box_2')}}"
                                    >
                                        @foreach($InitContents as $InitContent)
                                            <option value="{{$InitContent->id}}" @if($InitContent->id == $layout->ContentsR[0]->content_id) selected @endif>{{$InitContent->name}}</option>

                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            {{--{{__('messages.label_box_3')}}--}}
                            <div class="col-md-6">
                                <div class="form-group ">
                                    <label for="building_age">{{__('messages.label_box_3')}}</label>
                                    <select class="form-control select select2 required layout_contents"
                                            id="layout_contents"
                                            name="layout_contents[1]" required
                                            data-msg="{{__('messages.select')}} {{__('messages.label_box_3')}}"
                                    >
                                        @foreach($InitContents as $InitContent)
                                            <option value="{{$InitContent->id}}" @if($InitContent->id == $layout->ContentsR[1]->content_id) selected @endif>{{$InitContent->name}}</option>

                                        @endforeach
                                    </select>
                                </div>
                            </div>


                        @elseif ($layout->layout_type == 3)
                            {{--layout_type_3--}}
                            {{--{{__('messages.label_box_4')}}--}}
                            <div class="col-md-6">
                                <div class="form-group ">
                                    <label for="building_age">{{__('messages.label_box_4')}}</label>
                                    <select class="form-control select select2 required layout_contents"
                                            id="layout_contents"
                                            name="layout_contents[0]"
                                            required
                                            data-msg="{{__('messages.select')}} {{__('messages.label_box_4')}}"
                                    >


                                        @foreach($InitContents as $InitContent)
                                            <option value="{{$InitContent->id}}" @if($InitContent->id == $layout->ContentsR[0]->content_id) selected @endif>{{$InitContent->name}}</option>
                                        @endforeach


                                    </select>
                                </div>
                            </div>


                        @elseif ($layout->layout_type == 4)
                            {{--layout_type_4--}}
                            {{--{{__('messages.label_box_5')}}--}}
                            <div class="col-md-6">
                                <div class="form-group ">
                                    <label for="building_age">{{__('messages.label_box_5')}}</label>
                                    <select class="form-control select select2 required layout_contents" id="layout_contents"
                                            name="layout_contents[0]" required
                                            data-msg="{{__('messages.select')}} {{__('messages.label_box_5')}}"
                                    >
                                        @foreach($InitContents as $InitContent)
                                            <option value="{{$InitContent->id}}" @if($InitContent->id == $layout->ContentsR[0]->content_id) selected @endif>{{$InitContent->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            {{--{{__('messages.label_box_6')}}--}}
                            <div class="col-md-6">
                                <div class="form-group ">
                                    <label for="building_age">{{__('messages.label_box_6')}}</label>
                                    <select class="form-control select select2 required layout_contents"
                                            id="layout_contents"
                                            name="layout_contents[1]" required
                                            data-msg="{{__('messages.select')}} {{__('messages.label_box_6')}}"
                                    >
                                        @foreach($InitContents as $InitContent)
                                            <option value="{{$InitContent->id}}" @if($InitContent->id == $layout->ContentsR[1]->content_id) selected @endif>{{$InitContent->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            {{--{{__('messages.label_box_7')}}--}}
                            <div class="col-md-6">
                                <div class="form-group ">
                                    <label for="building_age">{{__('messages.label_box_7')}} </label>
                                    <select class="form-control select select2 required layout_contents" id="layout_contents"
                                            name="layout_contents[2]" required
                                            data-msg="{{__('messages.select')}} {{__('messages.label_box_7')}} "
                                    >
                                        @foreach($InitContents as $InitContent)
                                            <option value="{{$InitContent->id}}" @if($InitContent->id == $layout->ContentsR[2]->content_id) selected @endif>{{$InitContent->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        @endif

                    </div>


                    <div class="alert alert-danger alert-styled-left alert-dismissible" style="display: none">
                        <button type="button" class="close" data-dismiss="alert"><span>×</span></button>
                        <span class="font-weight-semibold">{{__('messages.error')}}</span>
                        <error></error>
                    </div>
                    <button type="submit" class="btn bg-teal-400">{{__('messages.save')}}<i
                            class="icon-floppy-disk ml-2"></i></button>
                </form>
            </div>
        </div>
    </div>
    <!-- /content area -->
@endsection
@section('scripts')
    <script>
        var layout_type_1 = `      {{--layout_type_1--}}
        {{--{{__('messages.label_box_1')}}--}}

        <div class="col-md-6">
            <div class="form-group ">
                <label for="building_age">{{__('messages.label_box_1')}}</label>
                <select class="form-control select select2 required layout_contents"
                        id="layout_contents"
                        name="layout_contents[0]"
                        required
                        data-msg="{{__('messages.select')}} {{__('messages.label_box_1')}}"
                                    >
                                        <option value="">{{__('messages.select')}} {{__('messages.label_box_1')}}</option>
                                    </select>
                                </div>
                            </div>`;
        var layout_type_2 = `      {{--layout_type_2--}}
        {{--{{__('messages.label_box_2')}}--}}
        <div class="col-md-6">
            <div class="form-group ">
                <label for="building_age">{{__('messages.label_box_2')}}</label>
                <select class="form-control select select2 required layout_contents"
                        id="layout_contents"
                        name="layout_contents[0]" required
                        data-msg="{{__('messages.select')}} {{__('messages.label_box_2')}}"
                                    >
                                        <option value="">{{__('messages.select')}} {{__('messages.label_box_2')}}</option>
                                    </select>
                                </div>
                            </div>
                            {{--{{__('messages.label_box_3')}}--}}
        <div class="col-md-6">
            <div class="form-group ">
                <label for="building_age">{{__('messages.label_box_3')}}</label>
                <select class="form-control select select2 required layout_contents"
                        id="layout_contents"
                        name="layout_contents[1]" required
                        data-msg="{{__('messages.select')}} {{__('messages.label_box_3')}}"
                                    >
                                        <option value="">{{__('messages.select')}} {{__('messages.label_box_3')}}</option>
                                    </select>
                                </div>
                            </div>`;
        var layout_type_3 = `     {{--layout_type_3--}}
        {{--{{__('messages.label_box_4')}}--}}
        <div class="col-md-6">
            <div class="form-group ">
                <label for="building_age">{{__('messages.label_box_4')}}</label>
                <select class="form-control select select2 required layout_contents"
                        id="layout_contents"
                        name="layout_contents[0]"
                        required
                        data-msg="{{__('messages.select')}} {{__('messages.label_box_4')}}"
                                    >
                                        <option value="">{{__('messages.select')}} {{__('messages.label_box_4')}}</option>
                                    </select>
                                </div>
                            </div>`;
        var layout_type_4 = `     {{--layout_type_4--}}
        {{--{{__('messages.label_box_5')}}--}}
        <div class="col-md-6">
            <div class="form-group ">
                <label for="building_age">{{__('messages.label_box_5')}}</label>
                <select class="form-control select select2 required layout_contents" id="layout_contents"
                        name="layout_contents[0]" required
                        data-msg="{{__('messages.select')}} {{__('messages.label_box_5')}}"
                                    >
                                        <option value="">{{__('messages.select')}} {{__('messages.label_box_5')}}</option>
                                    </select>
                                </div>
                            </div>
                            {{--{{__('messages.label_box_6')}}--}}
        <div class="col-md-6">
            <div class="form-group ">
                <label for="building_age">{{__('messages.label_box_6')}}</label>
                <select class="form-control select select2 required layout_contents"
                        id="layout_contents"
                        name="layout_contents[1]" required
                        data-msg="{{__('messages.select')}} {{__('messages.label_box_6')}}"
                                    >
                                        <option value="">{{__('messages.select')}} {{__('messages.label_box_6')}}</option>
                                    </select>
                                </div>
                            </div>

                            {{--{{__('messages.label_box_7')}}--}}
        <div class="col-md-6">
            <div class="form-group ">
                <label for="building_age">{{__('messages.label_box_7')}} </label>
                <select class="form-control select select2 required layout_contents" id="layout_contents"
                        name="layout_contents[2]" required
                        data-msg="{{__('messages.select')}} {{__('messages.label_box_7')}} "
                                    >
                                        <option value="">{{__('messages.select')}} {{__('messages.label_box_7')}} </option>
                                    </select>
                                </div>
                            </div>
`;
        var contents = {!! $InitContents !!};
        function CheckLayoutType(value) {

            $('#layout_type_content').empty();
            if (value == 1 || value == 1) {
                $('#layout_type_content').html($(layout_type_1));
            }

            if (value == 2 || value == 2) {
                $('#layout_type_content').html($(layout_type_2));
            }

            if (value == 3 || value == 3) {
                $('#layout_type_content').html($(layout_type_3));
            }

            if (value == 4 || value == 4) {
                $('#layout_type_content').html($(layout_type_4));
            }
            $(".layout_contents").empty()
            if (contents.length <1){
                var newOption = new Option("لاتوجد محتويات لهذا القسم ", "", true, true);
                $('.layout_contents').append(newOption);
            }
            $.each(contents, function (key, value) {
                var newOption = new Option(value.name, value.id, false, false);
                $('.layout_contents').append(newOption);
            });
            $('#layout_type_content .select2').select2();
        }


        $('.select2').select2()




        $('input[type=file]').bind('change', function () {
            $(this).parent().parent().find('img').attr('src', window.URL.createObjectURL(this.files[0]));
        });
        $('.form1').validate({
            errorClass: 'validation-invalid-label',
            successClass: 'validation-valid-label',
            validClass: 'validation-valid-label',
            highlight: function (element, errorClass) {
                $(element).removeClass(errorClass);
            },
            unhighlight: function (element, errorClass) {
                $(element).removeClass(errorClass);
            },
            submitHandler: function (form) {
                var TempVals = [] ;
                var flag =  true ;
                $.each($(".layout_contents"), function () {
                    var val = $(this).val()  ;
                    if ( jQuery.inArray(val, TempVals) !== -1 ) {
                        flag =  false ;
                        Swal.fire(
                            'خطأ في الادخال',
                            "لايمكن تكرار المحتوى في المخطط",
                            'error'
                        )
                        return ;
                    }
                    TempVals.push(val)
                });

                if (flag ==  true){
                $('body').block({
                    message: '<i class="icon-spinner4 spinner"></i>',
                    overlayCSS: {backgroundColor: '#1b2024', opacity: 0.8, zIndex: 1200, cursor: 'wait'},
                    css: {border: 0, color: '#fff', padding: 0, zIndex: 1201, backgroundColor: 'transparent'}
                });
                var form_data = new FormData(document.forms["form1"]);
                $.ajax({
                    url: "{{route('layouts.update' ,  $layout)}}",
                    data: form_data,
                    contentType: false,
                    cache: false,
                    processData: false,
                    method: "POST",
                    success: function (result) {
                        console.log(result);
                        $('body').unblock();
                        if (result.error_code == 0) {
                            location.href = '{{route('layouts.index')}}';
                        } else {
                            $('error').text(result.error_msg);
                            $('.alert-danger').css('display', 'block');
                        }
                        setTimeout(function () {
                            $('.alert-danger').css('display', 'none');
                        }, 3000)
                    }
                });
                }
                return false;
            }
        });
    </script>
@endsection