@extends('layouts.app')

@section('title', 'Create Karyawan')
@section('breadcrumb', 'Manage Karyawan')
@section('sub-breadcrumb')
    {{-- <span class="kt-subheader__breadcrumbs-separator"></span> --}}
    <a class="kt-subheader__breadcrumbs-link">
        Create Karyawan
    </a>
@endsection
{{-- @section('admin', 'kt-menu__item--open kt-menu__item--here') --}}
@section('karyawan', 'kt-menu__item--open kt-menu__item--here')
@section('create-karyawan', 'kt-menu__item--active')
@section('content')
    <div class="kt-portlet">
        <div class="kt-portlet__body">
            @include('layouts.notification')
            <form action="{{route('karyawan.store')}}" method="POST">
                @csrf
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Nama Karyawan <span style="color:red;">*</span> :</label>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="flaticon-user"></i></span></div>
                                <input type="text" id="name" name="name" class="form-control m-input" placeholder="E.g: Mary Morstan " data-col-index="0">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Email Karyawan <span style="color:red;">*</span> :</label> <br/>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="flaticon-email"></i></span></div>
                                <input type="email" id="email" name="email" class="form-control m-input" placeholder="E.g: marymorstan@jiwaportal.com " data-col-index="0">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Phone  :</label> <br/>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-phone"></i></span></div>
                                <input type="text" id="phone" name="phone" class="form-control m-input" placeholder="E.g: 0800000000" pattern="\d*" maxlength="15" data-col-index="0">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Jabatan Karyawan <span style="color:red;">*</span> :</label> <br/>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-id-card"></i></span></div>
                                <input type="text" id="jabatan" name="jabatan" class="form-control m-input" placeholder="E.g: Supervisor" data-col-index="0">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>User Group :</label> <br/>
                            <div class="input-group">
                                <select name="user_groups[]" id="user_group" class="form-control" multiple="multiple">
                                    @foreach ($get_user_group as $key => $value)
                                        <option value="{{$value['id']}}">{{$value['name']}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">

                        <div id="kt_repeater_1">

                            <div class="form-group form-group-last row">
                                <div data-repeater-list="formR" class="col-lg-10">
                                    <div data-repeater-item="admin2" value="" class="form-group repeater-item row align-items-center">
                                        <div class="col-md-12">
                                            <label>Brands <span style="color:red;">*</span> :</label> <br/>
                                            <div class="input-group">
                                                <select name="list_brand"  class="form-control list_brand">
                                                    <option value="">-- Pilih Brand --</option>
                                                    @foreach ($brand['data'] as $key => $item)
                                                        <option value="{{$item['id']}}">{{$item['name']}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <br>
                                        </div>
                                        <div class="col-md-6 repeater-outlet" style="display:none">
                                            <label>Hak Akses (Features) <span style="color:red;">*</span> :</label> <br/>
                                            <div class="input-group">
                                                <select name="hak_akses"  class="form-control hak_akses">
                                                    <option value="">-- Pilih Hak Akses --</option>
                                                    <option value="Admin">Admin</option>
                                                    <option value="Karyawan">Karyawan</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6 repeater-outlet" style="display:none">
                                            <label>Outlet <span style="color:red;">*</span> :</label> <br/>
                                            <div class="input-group select2-repeater">
                                                <select name="outlet" class="js-example-basic-single outlet-select2"  style="width:100%!important;">
                                                    <option value="">--Outlet--</option>
                                                    {{-- @foreach ($get_outlet as $key => $item)
                                                        <option value="{{$item['id']}}">{{$item['name']}}</option>
                                                    @endforeach --}}
                                                </select>
                                            </div>
                                        </div>
                                        <br>
                                        {{-- Div Class Checklist --}}
                                        <div class="col-md-12 checkbox-admin" style="display:none">
                                            <br>
                                            <div class="kt-checkbox-list">
                                                <label class="kt-checkbox">
                                                    <input id="all_admin" type="checkbox"> Select All
                                                    <span></span>
                                                </label>
                                                @foreach ($get_access_admin as $key => $value)
                                                    <label class="kt-checkbox">
                                                        <input class="admin_single" type="checkbox"   name="admin"  value="{{$value['id']}}"> {{$value['desc']}}
                                                        <span></span>
                                                    </label>
                                                @endforeach
                                            </div>
                                        </div>

                                        <div class="col-md-12 checkbox-karyawan"  style="display:none;">
                                            <div class="kt-checkbox-list">
                                                <label class="kt-checkbox">
                                                    <input id="all_karyawan" type="checkbox"> Select All
                                                    <span></span>
                                                </label>
                                                @foreach ($get_access_karyawan as $key => $value)
                                                    <label class="kt-checkbox">
                                                        <input class="karyawan_single" type="checkbox" name="karyawan" value="{{$value['id']}}"> {{$value['desc']}}
                                                        <span></span>
                                                    </label>
                                                @endforeach
                                            </div>
                                        </div>

                                        <div class="col-lg-4">
                                            <br>
                                            <a href="javascript:;" val="" data-repeater-delete="" class="btn btn-bold btn-sm btn-label-brand btn-delete">
                                                 Delete
                                            </a>
                                        </div>

                                    </div>
                                </div>
                             </div>
                             <br>
                             <div class="float-md-right">
                                <a href="javascript:;" id="repeater" data-repeater-create="" class="btn btn-bold btn-sm btn-label-brand">
                                    <i class="la la-plus"></i> Add
                                </a>
                            </div>
                            <br><br>
                        </div>

                        <br>
                    </div>
                </div>
                <div class="col-md-8 float-md-right">
                    <button type="submit" class="btn btn-primary pull-right">
                        <i class="fa fa-save"></i> Create
                    </button>
                    <button type="reset" class="btn btn-secondary pull-right mr-1">
                        Reset
                    </button>
                </div>
            </form>
            <div class="kt-separator kt-separator--dashed"></div>
        </div>
    </div>
@endsection

@section('custom-script')
    <script>
        $(document).ready(function() {
            $('.repeater-outlet').hide();
            $('.outlet-select2').select2({
                placeholder: " Eg: Jilid 1"
            });
            $('#user_group').select2({
                placeholder: " Eg: Kasir"
            });

            $('.btn-delete').hide();




        });
    </script>
    <script>

            var selected_items = []
		    var	prev_id_item;

            $("#kt_repeater_1").on('click','#repeater', function(){

                // $(this).parent().parent().parent().find('.select2-repeater .outlet-select2').select2({
                //     placeholder: " Select Outlet"
                // });

                // $(this).parent().parent().find('.repeater-outlet').hide();

                $(this).parent().parent().parent().find(".kt-checkbox-list #all_admin").change(function() {

                if (this.checked) {
                    $(this).parent().parent().parent().find(".kt-checkbox-list .admin_single").each(function() {
                        this.checked=true;
                    });
                } else {
                    $(".admin_single").each(function() {
                        this.checked=false;
                    });
                }
            });

            $(this).parent().parent().parent().parent().find(".kt-checkbox-list .admin_single").click(function () {
                if ($(this).is(":checked")) {
                    var isAllChecked = 0;

                    $(this).parent().parent().parent().parent().find(".kt-checkbox-list .admin_single").each(function() {
                        if (!this.checked)
                            isAllChecked = 1;
                    });

                    if (isAllChecked == 0) {
                        $(this).parent().parent().parent().parent().find(".kt-checkbox-list #all_admin").prop("checked", true);
                    }
                }
                else {
                    $(this).parent().parent().parent().parent().find(".kt-checkbox-list #all_admin").prop("checked", false);
                }
            });



            $(this).parent().parent().parent().find(".kt-checkbox-list #all_karyawan").change(function() {
                if (this.checked) {
                    $(this).parent().parent().parent().find(".kt-checkbox-list .karyawan_single").each(function() {
                        this.checked=true;
                    });
                } else {
                    $(this).parent().parent().parent().find(".kt-checkbox-list .karyawan_single").each(function() {
                        this.checked=false;
                    });
                }
            });

            $(this).parent().parent().parent().find(".kt-checkbox-list .karyawan_single").click(function () {
                if ($(this).is(":checked")) {
                    var isAllChecked = 0;

                    $(this).parent().parent().parent().find(".kt-checkbox-list .karyawan_single").each(function() {
                        if (!this.checked)
                            isAllChecked = 1;
                    });

                    if (isAllChecked == 0) {
                        $(this).parent().parent().parent().parent().find(".kt-checkbox-list #all_karyawan").prop("checked", true);
                    }
                }
                else {
                    $(this).parent().parent().parent().parent().find(".kt-checkbox-list #all_karyawan").prop("checked", false);
                }
            });

            });

            $("#kt_repeater_1").on('click','.btn-delete', function(){
            var id_item =$(this).parent().parent().find('.select2-repeater .outlet-select2').val();
					id_item = parseInt(id_item);	// convert string to int

					selected_items = jQuery.grep(selected_items, function(value) {
						return value != id_item;
					});
          })



            $('#kt_repeater_1').on('select2:open', '.outlet-select2', function(e) {
			    prev_id_item = $(this).val();
		    });



            $("#kt_repeater_1").on('change','.outlet-select2', function(){
                // var selectedCountry = $(this).children("option:selected").val();
                var id_item = $(this).val();
                // console.log(selected_items);
                id_item = parseInt(id_item);
                var check = jQuery.inArray(id_item,selected_items);
                if ( check >= 0 && id_item != prev_id_item) {
                    $(this).val(prev_id_item).trigger("change");
                    swal.fire({
                        type: 'error',
                        title: 'Oops...',
                        text: 'The item has been selected'
                    });
                }
                else{
                    selected_items = jQuery.grep(selected_items, function(value) {
                        return value != prev_id_item;
                    });
                    selected_items.push(id_item)
                }

            });


            $("#kt_repeater_1").on('change','.list_brand', function(){
                var val = $(this).val();
                if (val) {
                    $('#loading').show().delay(2000).fadeOut();
                } else {
                    $('#loading').hide();
                }
                var url = '{{ route("karyawan.outlet", ":val") }}';
                url = url.replace(':val', val);

                var id_item =$(this).parent().parent().parent().find('.select2-repeater .outlet-select2').val();


                id_item = parseInt(id_item);	// convert string to int

                selected_items = jQuery.grep(selected_items, function(value) {
                return value != id_item;
                });



                $.ajax({
                    url: url,
                    type: 'get',
                    cache: false,
                    success: (return_data) => {

                        $(this).parent().parent().parent().find('.repeater-outlet').show();
                        $(this).parent().parent().parent().find('.select2-repeater .outlet-select2').html('');

                        $(this).parent().parent().parent().find('.select2-repeater .outlet-select2').select2({
                            placeholder: " Choose Outlet"
                        });

                        var optionWarehouse = '<option value="">--Choose Accurate Warehouse--</option>'
                            $(this).parent().parent().parent().find('.select2-repeater .outlet-select2').append(optionWarehouse);



                        // $(this).parent().parent().parent().find('.select2-repeater .outlet-select2').select2({
                //     placeholder: " Select Outlet"
                // });

                        jQuery.each(return_data.result, (i, val) => {
                            var option = '<option value="'+val.id+'">'+val.name+'</option>'
                            $(this).parent().parent().parent().find('.select2-repeater .outlet-select2').append(option);

                        });
                    }
                });
            })



            $("#kt_repeater_1").on('change','.hak_akses', function(){
                var value = $(this).val();


                if(value == "Admin"){
                    console.log('admin');
                    $(this).parent().parent().parent().find('.checkbox-admin').show();
                    $(this).parent().parent().parent().find('.checkbox-karyawan').hide();
                }
                else if(value == "Karyawan"){
                    console.log('karyawan');
                    $(this).parent().parent().parent().find('.checkbox-karyawan').show();
                    $(this).parent().parent().parent().find('.checkbox-admin').hide();
                }

                else{
                    $(this).parent().parent().parent().find('.checkbox-karyawan').hide();
                    $(this).parent().parent().parent().find('.checkbox-admin').hide();
                }
                // $(this).parent().parent().find('checkbox-admin').css('background','red');

            })

            $('.list_brand', function(){
                var val = $(this).val();
                if (val) {
                    $('#loading').show().delay(2000).fadeOut();
                } else {
                    $('#loading').hide();
                }


                var url = '{{ route("karyawan.outlet", ":val") }}';
                url = url.replace(':val', val);

                var id_item =$('.select2-repeater .outlet-select2').val();

                id_item = parseInt(id_item);	// convert string to int

                selected_items = jQuery.grep(selected_items, function(value) {
                return value != id_item;
                });

                $.ajax({
                    url: url,
                    type: 'get',
                    cache: false,
                    success: function(return_data) {
                        $(this).parent().parent().find('.checkbox-admin').show();
                        $('.repeater-outlet').show();

                        $('.outlet-select2').select2({
                            placeholder: " Choose Outlet"
                        });

                        var optionWarehouse = '<option value="">--Choose Outlet--</option>'
                            $('.outlet-select2').append(optionWarehouse);


                        jQuery.each(return_data.result, function(i, val) {
                            var option = '<option value="'+val.id+'">'+val.name+'</option>'
                            $('.outlet-select2').append(option);

                        });
                    }
                });


            });



            $("#hak_akses").change(function() {
                $("#admin").hide();
                $("#karyawan").hide();
                if ($(this).val() == "Admin") {
                    $("#admin").show();
                }
                if ($(this).val() == "Karyawan") {
                    $("#karyawan").show();
                }

                var selectedStatus = $(this).children("option:selected").val();

                $("#repeater").on('click', function(){
                    console.log('Cek')
                    $('#outlet').select2({
                placeholder: " Eg: Jilid 1"
                });
                 $('#user_group').select2({
                placeholder: " Eg: Kasir"
                });

                if(selectedStatus == "Admin"){
                    $("#admin").show();
                }
            })
            });




    </script>
    <script>
        $(document).ready(function() {
            $("#all_admin").change(function() {
                if (this.checked) {
                    $(".admin_single").each(function() {
                        this.checked=true;
                    });
                } else {
                    $(".admin_single").each(function() {
                        this.checked=false;
                    });
                }
            });

            $(".admin_single").click(function () {
                if ($(this).is(":checked")) {
                    var isAllChecked = 0;

                    $(".admin_single").each(function() {
                        if (!this.checked)
                            isAllChecked = 1;
                    });

                    if (isAllChecked == 0) {
                        $("#all_admin").prop("checked", true);
                    }
                }
                else {
                    $("#all_admin").prop("checked", false);
                }
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            $("#all_karyawan").change(function() {
                if (this.checked) {
                    $(".karyawan_single").each(function() {
                        this.checked=true;
                    });
                } else {
                    $(".karyawan_single").each(function() {
                        this.checked=false;
                    });
                }
            });

            $(".karyawan_single").click(function () {
                if ($(this).is(":checked")) {
                    var isAllChecked = 0;

                    $(".karyawan_single").each(function() {
                        if (!this.checked)
                            isAllChecked = 1;
                    });

                    if (isAllChecked == 0) {
                        $("#all_karyawan").prop("checked", true);
                    }
                }
                else {
                    $("#all_karyawan").prop("checked", false);
                }
            });
        });
    </script>
@endsection