@extends('admin.layouts.app')

@section('title', 'Master Data')

@section('content')
        <!-- TOPBAR -->

        <div class="top_bar page-content" style="min-height:534px">
            <!-- LOADER -->
            <div class="loader">
                <div class="top_status_bar load">
                    <div class="progress_bar bar" style="left: 0px;">
                    </div>
                </div>
            </div>
            <!-- END LOADER -->
            <!-- BREADCRUMBS -->
            <div class="breadcrumbs">
                <ul>
                    <li><a href="{{ route('admin.dashboard') }}">Home</a></li>
                    <li><a href="{{ route('admin.settings.index') }}" class="">Settings</a></li>
                    <li><a href="#" class="breadcrumb_link" onclick="return false">Master Data</a></li>
                </ul>
                <button class="btn btn-large pull-right help theme_btn help_btn">?</button>
            </div>
            <!-- END BREADCRUMBS -->
        </div>
        <!-- END TOPBAR -->
<div class="page-content">
    <!-- BEGIN PAGE HEADER-->
    <!-- BEGIN PAGE BAR -->
    <div class="row">
        <div class="col-md-12">
            <div class="portlet setting_landing">
                <div class="portlet-title" style="border-bottom: 0">
                    <div class="caption">
                        <h2>
                            Master Data
                            <span>Setup master data within your business in .</span>
                        </h2>
                    </div>
                    <div class="actions btn-set" style="background: #fff;  position: fixed;right: 17px;z-index: 1;">
                    </div>
                </div>
                <hr>
                <div class="portlet-body">
                    <div class="settings">

                        {{--Contact type--}}


                        @if(!empty($data['master_data']))
                        @foreach($data['master_data'] as $key => $masterdata)

                        {{-- if(!is_null($master_data) && !empty($master_data)){
                        foreach($master_data as $each_lookup){
                         --}}

                         <div class="settings_inner_row">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="col-md-4">

                                        <span class="main_title"> {{str_replace('_',' ', $masterdata['title'])}}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="row each_row">
                                <div class="col-md-12">
                                    <div class="col-md-4">
                                        {{--<span class="sub_heading">How you need to composite work groups?</span>--}}
                                        {{--<span class="sub_heading">Setup group players from the pool of your employees and system users, one can be a member of different groups as well.</span>--}}
                                    </div>
                                    <div class="col-md-1"></div>
                                    <div class="col-md-6">

                                        <div class="row">
                                            <div class="portlet-body">
                                                <div class="products box contact_types master_data">
                                                    <div class="header_tbl">
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="col-md-11 row_header b4_del_header">
                                                                    Options
                                                                </div>
                                                                <div class="del_header"></div>
                                                            </div>
                                                        </div>
                                                    </div>



                                                    @if ($masterdata['name'] != '')
                                                                                                        @foreach ($explode as $key => $each_val)

                                                    <div class="row_inner_wrap"
                                                        data-record_uuid="{{  $masterdata['master_data_uuid'] }}">
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="col-md-11 inner_row b4_del_header">
                                                                    <input type="text" old-value="{{ $each_val }}"
                                                                        class="validate form-control options master_contact_type"
                                                                        readonly value="{{$each_val}}">
                                                                </div>
                                                                <div class="del_icon del_contact_type"
                                                                    data-option_uuid="{{  $masterdata['master_data_uuid'] }}"
                                                                    style="">
                                                                    <i class="fa fa-trash-o del del_data"
                                                                        aria-hidden="true"></i>
                                                                </div>
                                                                <div class="add_icon add_contact_type"
                                                                    data-option_uuid="{{  $masterdata['master_data_uuid'] }}"
                                                                    style="display: none;">
                                                                    <i class="fa fa-plus add_row add_row_data"></i>
                                                                </div>
                                                                <div class="edit_icon edit_contact_type"
                                                                    data-option_uuid="{{ $masterdata['master_data_uuid']}}"
                                                                    style="display: none;">
                                                                    <i class="fa fa-check edit_row edit_row_data"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    @endforeach
                                                    @endif



                                                    <div class="row_inner_wrap contact_type_clone"
                                                        data-record_uuid="{{  $masterdata['master_data_uuid'] }}">
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="col-md-11 inner_row b4_del_header">
                                                                    <input type="text"
                                                                        class="validate form-control options master_contact_type master_input"
                                                                        placeholder="Add options with comma separated"
                                                                        value="">
                                                                </div>
                                                                <div class="del_icon del_contact_type"
                                                                    style="display: none;">
                                                                    <i class="fa fa-trash-o del del_data"
                                                                        aria-hidden="true"></i>
                                                                </div>
                                                                <div class="add_icon add_contact_type">
                                                                    <i class="fa fa-plus add_row add_row_data "></i>
                                                                </div>
                                                                <div class="edit_icon edit_contact_type"
                                                                    style="display: none;">
                                                                    <i class="fa fa-check edit_row edit_row_data"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                        <!--TEAM MEMBER CATEGORY-->
                                    </div>
                                </div>
                            </div>
                         </div>


                        @endforeach
                        @endif


                        {{--For quotes components--}}

                        <div class="settings_inner_row">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="col-md-4">
                                        <span class="main_title">Quote Components</span>
                                    </div>
                                </div>
                            </div>
                            <div class="row each_row">
                                <div class="col-md-12">
                                    <div class="col-md-4">
                                        {{--<span class="sub_heading">How you need to composite work groups?</span>--}}
                                        {{--<span class="sub_heading">Setup group players from the pool of your employees and system users, one can be a member of different groups as well.</span>--}}
                                    </div>
                                    <div class="col-md-1"></div>
                                    <div class="col-md-6">

                                        <div class="row">

                                            <div class="portlet-body">
                                                <div class="products box contact_types master_data">
                                                    <div class="header_tbl">
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="col-md-11 row_header b4_del_header">
                                                                    Options
                                                                </div>
                                                                <div class="del_header"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <input type="hidden" class="components" value="1">

                                                    <div class="component_clone">

                                                    @if (!empty($data['components'])) 

                                                    @foreach ($data['components'] as $key => $component)


                                                    <div class="row_inner_wrap"
                                                        data-record_uuid="{{ $component['component_uuid'] }}">
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="col-md-11 inner_row b4_del_header">
                                                                    <input type="text"
                                                                        class="validate form-control options master_contact_type"
                                                                        readonly
                                                                        data_value="{{  $component['component_name'].'^'. $component['component_uuid'] }}"
                                                                        value="{{ $component['component_name'] }}">
                                                                </div>
                                                                <div class="del_icon del_component_type"
                                                                    data-option_uuid="{{ $component['component_uuid'] }}"
                                                                    style="">
                                                                    <i class="fa fa-trash-o del del_data"
                                                                        aria-hidden="true"></i>
                                                                </div>
                                                                <div class="add_icon add_component_type"
                                                                    data-option_uuid="{{ $component['component_uuid'] }}"
                                                                    style="display: none;">
                                                                    <i class="fa fa-plus add_row add_row_data"></i>
                                                                </div>
                                                                <div class="edit_icon edit_component_type"
                                                                    data-option_uuid="{{ $component['component_uuid'] }}"
                                                                    style="display: none;">
                                                                    <i class="fa fa-check edit_row edit_row_data"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    @endforeach
                                                    @endif
                                                    </div>


                                                    <div class="row_inner_wrap contact_type_clone" data-record_uuid="">
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="col-md-11 inner_row b4_del_header">
                                                                    <input type="text"
                                                                        class="validate form-control options master_contact_type master_input"
                                                                        placeholder="Add options with comma separated"
                                                                        value="">
                                                                </div>
                                                                <div class="del_icon del_component_type"
                                                                    style="display: none;">
                                                                    <i class="fa fa-trash-o del del_data"
                                                                        aria-hidden="true"></i>
                                                                </div>
                                                                <div class="add_icon add_component_type">
                                                                    <i class="fa fa-plus add_row add_row_data "></i>
                                                                </div>
                                                                <div class="edit_icon edit_component_type"
                                                                    style="display: none;">
                                                                    <i class="fa fa-check edit_row edit_row_data"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                        <!--TEAM MEMBER CATEGORY-->
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>

                </div>
                <!--------------------------------------1ST ROW --------------------------------------->
            </div>
        </div>
    </div>
</div>
</div>
</div>
<!-- END CONTENT BODY -->
</div>

<!-- //SWEET_ALERT START// -->
<div id="sweetalert_wrap" class="sweet_alert_wrap">
    <!-- Sweet alert -->
    <div class="sweet-alert showSweetAlert" data-custom-class="" data-has-cancel-button="true"
        data-has-confirm-button="true" data-allow-outside-click="false" data-has-done-function="true"
        data-animation="pop" data-timer="null">
        <div class="sa-icon sa-warning pulseWarning" style="display: block;">
            <span class="sa-body pulseWarningIns"></span>
            <span class="sa-dot pulseWarningIns"></span>
        </div>
        <h2>Are You Sure?</h2>
        {{-- <p>Your recently changed data in this model will be lost.</p> --}}
        <div class="sa-button-container">
            <button class="cancel" tabindex="2">Cancel</button>
            <div class="sa-confirm-button-container">
                <button class="confirm" tabindex="1">Confirm</button>
            </div>
        </div>
    </div>
</div>

@stop

@section('styles')
<link rel="stylesheet" type="text/css" href="{{ asset('css/settings.css') }}" />
@stop

@section('admin_js')
<script type="text/javascript">


var target;
var parent_target
$('body').on('click','.del_contact_type',function(){
    $('.confirm').addClass('del_contact');
    $('#sweetalert_wrap').show();

    
     target = $(this).parent();
     parent_target = $(this).parent().parent().parent();
       
       
});
$('body').on('click','.del_contact',function(){
    var type = 2;
    var del = 1;
    parent_target = parent_target;
    target = target;
    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
        var option_val = target.find('.options').val();
        var record_uuid = parent_target.attr('data-record_uuid');

        $('#busyloading').show();
        var formData = new FormData();
            formData.append('_token', CSRF_TOKEN);
            formData.append('option', option_val);
            formData.append('record_uuid', record_uuid);
            formData.append('type', type);
           
            $.ajax({
                url: "{{ route('admin.settings.master-data.store') }}",
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function (response) {
                    //var result = $.parseJSON(res);
                    if (response.status ==
                        "{{ config('globalConstants.response_status.success_response') }}") {

                            target.find('.options').removeClass('error_custom');
                
                var type = 2
                // console.log('here');
                $('#sweetalert_wrap').hide();
                parent_target.remove();
                alertbox('success', response.message);
              
                $('#busyloading').hide();

                        }
                    }
            });
    });



$(document).on('click','.cancel',function(){

$('#sweetalert_wrap').hide();
return false;

});
    $('body').on('click', '.add_contact_type,.edit_contact_type', function () { 

        
        var edit = '0';
        var add = '0';
        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
        var parent_target = $(this).parent().parent().parent();
        var target = $(this).parent();
        var top_parent_target = $(this).parent().parent().parent().parent();
        if ($(this).hasClass('edit_contact_type')) {
            edit = 1;
        }
        if ($(this).hasClass('add_contact_type')) {
            add = 1;
        }

        // For component check to store data in different table instead of master data


        // For component check to store data in different table instead of master data


        var record_uuid = parent_target.attr('data-record_uuid');
        var option_val = target.find('.options').val();
        var old = target.find('.options').attr('old-value');
        

        if (option_val == '' || option_val == null || option_val.length < 2) {
            target.find('.options').addClass('error_custom');
            alertbox('danger', 'There are errors on page');
            $('#busyloading').hide();

        } else {

            $('#busyloading').show();

            if (add == 1) {
                type = 1

            }  else if (edit == 1) {
                type = 3;
              
            }


            // console.log(contact_types);
            // return false;

            var formData = new FormData();
            formData.append('_token', CSRF_TOKEN);
            formData.append('record_uuid', record_uuid);
            formData.append('option', option_val);
            formData.append('type', type);
            formData.append('old_value', old);
            $.ajax({
                url: "{{ route('admin.settings.master-data.store') }}",
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function (response) {
                    //var result = $.parseJSON(res);
                    if (response.status ==
                        "{{ config('globalConstants.response_status.success_response') }}") {

                            target.find('.options').removeClass('error_custom');
            if (add == 1) {
                type = 1;
                target.find('.options').removeClass('master_input');
                target.find('.options').attr('readonly', 'readonly');
                var split_each = [];
                if (option_val.indexOf(',') > -1) {
                    split_each = $.unique(option_val.split(','));
                    
                } else {
                    split_each[0] = option_val;
                }
         
                
                $.each(split_each, function (i, v) {
                    var each_option = $.trim(v);

                    var clone = top_parent_target.find('.contact_type_clone').clone();
                    clone.find('input').val('');
                    clone.find('.options').val(each_option);
                    // clone.find('.options').attr('data_value', each_option + '^0'); // for components

                    clone.find('.add_icon').hide();
                    clone.find('.del_icon').show();
                    clone.find('.del_data').show();
                    clone.find('.edit_icon').hide();

                   
                    clone.removeClass('contact_type_clone');

                    top_parent_target.find('.row_inner_wrap:last').before(clone);
                });
                target.find('input').removeAttr('readonly');
                target.find('.options').val('');
                target.find('.options').addClass('master_input');

            
            } else if (edit == 1) {
                type = 3;
                target.find('.options').attr('old-value', option_val);
                $(this).parent().parent().find('.del_icon').show();
                $(this).parent().parent().find('.edit_icon').hide();
            }


                        alertbox('success', response.message);
                        $('#busyloading').hide();
                    } else if (response.status ==
                        "{{ config('globalConstants.response_status.warning_response') }}"
                    ) {
                        target.find('.del_icon').hide();
                         target.find('.edit_icon').show();
                         target.find('.options').removeAttr('readonly');

                        alertbox('warning', response.message);
                        $('#busyloading').hide();

                    } else if (response.status ==
                        "{{ config('globalConstants.response_status.error_response') }}") {
                        alertbox('danger', response.errors.option);
                        $('#busyloading').hide();
                    }
                }


            });


        }

        
    });


    //For edit group name to make write able on click field
    $('body').on('click', '.options', function () {
        var attr = $(this).attr('readonly');
        if (typeof attr !== typeof undefined && attr !== false) {

            $(".options").attr('readonly', 'readonly');
            $(".options").parent().parent().find('.edit_icon').hide();
            $(".options").parent().parent().find('.add_icon').hide();
            $(".options").parent().parent().find('.del_icon').show();

            $(".master_input").removeAttr('readonly');
            $(".master_input").parent().parent().find('.edit_icon').hide();
            $(".master_input").parent().parent().find('.add_icon').show();
            $(".master_input").parent().parent().find('.del_icon').hide();


            $(this).removeAttr('readonly').focus();
            $(this).parent().parent().find('.edit_icon').show();
            $(this).parent().parent().find('.add_icon').hide();
            $(this).parent().parent().find('.del_icon').hide();
        }
    });

    // $('body').on('blur', '.options', function () {
    //     $(this).parent().parent().find('.edit_icon').hide();
    //         $(this).parent().parent().find('.add_icon').hide();
    //         $(this).parent().parent().find('.del_icon').show(); 
    // });

 
    $('body').on('input', '.options', function () {

        var data_value = $(this).attr('data_value');
        if (typeof data_value != 'undefined') {
            var splitted = data_value.split('^');
            var c_value = $(this).val();
            $(this).attr('data_value', c_value + '^' + splitted[1]);
        }
    });

    $(window).click(function () {

        $('.options').filter(function () {
            if (this.value != '' && !($(this).hasClass('error_custom')) && !($(this).hasClass('master_input'))) {
                $(this).attr('readonly', 'readonly');
            }
            $(this).parent().parent().find('.edit_icon').hide();
            $(this).parent().parent().find('.del_icon').show();
        });
    });

    $('body').on('click', '.options', function (event) {
        event.stopPropagation();
    });


    $('body').on('click', '.add_component_type', function (e) {

    $('#busyloading').show();

    var target = $(this).parent();
    var parent_target = $(this).parent().parent().parent();
    var top_parent_target = $(this).parent().parent().parent().parent();
    /*VALIDATE AND ADD NEW ROW SCRIPT*/
    var component = target.find('.options').val();
    // var description = parent_target.find('.desc_category').val();
    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
    
    if (component == '' || component == null || component.length < 2) {
            target.find('.options').addClass('error_custom');
            alertbox('danger', 'There are errors on page');
            $('#busyloading').hide();

        } else {

            $('#busyloading').show();

        target.find('.options').removeClass('error_custom');
        e.preventDefault();
        formData = new FormData();
        formData.append('component', component);
        // formData.append('description', description);
        formData.append('_token', CSRF_TOKEN);
        $.ajax({
            type: 'POST',
            url: "{{ route('admin.settings.component.store') }}",
            data: formData,
            contentType: false,
            processData: false,
            success: function (response) {
                console.log(response);

                if (response.status =="{{ config('globalConstants.response_status.success_response') }}"
                ) {
                  

                    alertbox('success', response.message);
                //     $('#busyloading').hide();
                $(".component_clone").html(response.data);
                $(".master_input").val('');
                $('#busyloading').hide();
                } else if (response.status ==
                    "{{ config('globalConstants.response_status.warning_response') }}") {
                        target.find('.options').addClass('error_custom');
                        target.find('input').removeAttr('readonly');
                    alertbox('warning', response.message);
                    $('#busyloading').hide();

                } else if (response.status ==
                    "{{ config('globalConstants.response_status.error_response') }}") {
                        target.find('.options').addClass('error_custom');
                        target.find('input').removeAttr('readonly');
                    alertbox('danger', response.errors);
                    $('#busyloading').hide();
                }

            },
            error: function (response) {
                console.log(response);
                $('#busyloading').hide();
                alertbox('danger', "Server error");
            }

        });
    }
    });
    var target
    $('body').on('click', '.del_component_type', function (e) {

        target = $(this).parent();
       var id = $(this).attr('data-option_uuid');

        $('#sweetalert_wrap').show();
        $('.confirm').addClass('data-option_uuid');
        $(".confirm").attr("data-option_uuid", id);
    });
    $(document).on('click', '.cancel', function () {
        $(".confirm").removeAttr("data-option_uuid");
        $('#sweetalert_wrap').hide();
        return false;
    });
    $(document).on('click', '.data-option_uuid', function () {
       
        var id = $(this).attr("data-option_uuid");
        target = target;
        
       $.ajax({
                type: 'DELETE',
                url: "{{ url('admin/settings/component') }}/" + id,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function (response) {
                    if (response.status ==
                        "{{ config('globalConstants.response_status.success_response') }}"
                    ) {
                        $('#sweetalert_wrap').hide();
                        target.remove();

                        alertbox('success', response.success);
                        $('#busyloading').hide();
                    } else if (response.status ==
                        "{{ config('globalConstants.response_status.warning_response') }}"
                    ) {
                        alertbox('warning', response.message);
                        $('#busyloading').hide();

                    } else if (response.status ==
                        "{{ config('globalConstants.response_status.error_response') }}"
                    ) {
                        alertbox('danger', response.errors
                            .option);
                        $('#busyloading').hide();
                    }
                },
                error: function (response) {
                    $('#busyloading').hide();
                    alertbox('danger', "Server error");
                }


            });

      
    });
    
    $('body').on('click', '.edit_component_type', function (e) {

        var target = $(this).parent();
        var id =$(this).attr('data-option_uuid');
        var component = target.find('.options').val();
        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
        var url =  "{{ url('admin/settings/component') }}/" + id;

        if (component == '' || component == null || component.length < 2) {
            target.find('.options').addClass('error_custom');
            alertbox('danger', 'There are errors on page');
            $('#busyloading').hide();

        } else {

            $('#busyloading').show();

        target.find('.options').removeClass('error_custom');
        e.preventDefault();
        formData = new FormData();
        formData.append('component', component);
         formData.append('_token', CSRF_TOKEN);
         formData.append('_method', "PUT");
        $.ajax({
            type: 'POST',
            url: url,
            data: formData,
            contentType: false,
            processData: false,
            success: function (response) {
                console.log(response);
                
                if (response.status =="{{ config('globalConstants.response_status.success_response') }}") {
                        $(this).parent().parent().find('.del_icon').show();
                         $(this).parent().parent().find('.edit_icon').hide();
                        target.find('.del_icon').attr('data-option_uuid',
                            response.data.component_uuid);
                            target.find('.add_icon').attr('data-option_uuid',
                            response.data.component_uuid);
                            target.find('.edit_icon').attr('data-option_uuid',
                            response.data.component_uuid);
                            target.find('.edit_field').attr('data-option_uuid',
                            response.data.component_uuid);
                       target.find('.edit_icon').hide();
                       target.find('.del_icon').show();
                       target.find('.options').attr('readonly', 'readonly');
                       
                        alertbox('success', response.message);
                        $('#busyloading').hide();
                    } else if (response.status == "{{ config('globalConstants.response_status.warning_response') }}") {

                        target.find('.edit_icon').hide();
                        target.find('.del_icon').show();
                        target.find('.options').attr('readonly', 'readonly');
                        alertbox('warning', response.message);
                        $('#busyloading').hide();

                    } else if (response.status ==
                        "{{ config('globalConstants.response_status.error_response') }}"
                    ) {
                        alertbox('danger', response.errors.group_select);
                        $('#busyloading').hide();
                    }
                },
                error: function (response) {
                    $('#busyloading').hide();
                    alertbox('danger', "Server error");
                }

            });

            }
        });


</script>
@stop