@extends('layouts.app')


@section('title', 'Edit Karyawan')
@section('breadcrumb', 'Manage Karyawan')


@section('sub-breadcrumb')
    {{-- <span class="kt-subheader__breadcrumbs-separator"></span> --}}

    <a class="kt-subheader__breadcrumbs-link">
        Edit Karyawan
    </a>
@endsection
@section('admin', 'kt-menu__item--open kt-menu__item--here')
@section('karyawan', 'kt-menu__item--open kt-menu__item--here')
@section('edit-karyawan', 'kt-menu__item--active')
@section('content')
    <div class="kt-portlet">
        <div class="kt-portlet__body">
            @include('layouts.notification')

            <form action="{{route('karyawan.update')}}" method="POST">
                @csrf
                <input type="hidden" name="id" value="{{$get_karyawan['user']['id']}}">
                <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" value="{{$get_karyawan['user']['name']}}">
                            </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" value="{{$get_karyawan['user']['email']}}">
                            </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" value="{{$get_karyawan['UserKaryawanView'][0]['jabatan'] ?? 'Admin'}}">
                            </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']}}" @foreach ($get_karyawan['user']['user_groups'] as $key => $user_group) {{ ($user_group['id_user_group'] == $value['id'] ? "selected" : "") }} @endforeach>{{$value['name']}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        {{-- <div class="form-group">
                            <label>Hak Akses (Features) <span style="color:red;">*</span> :</label> <br/>
                            <div class="input-group">
                                <select name="hak_akses" id="hak_akses" class="form-control">
                                    <option value="">-- Pilih Hak Akses --</option>
                                    <option {{($get_karyawan['UserKaryawanView']['level'] == "Admin") ? 'selected' : ''}} value="Admin">Admin</option>
                                    <option {{($get_karyawan['UserKaryawanView']['level'] == "Karyawan")? 'selected' : ''}} value="Karyawan">Karyawan</option>
                                </select>
                            </div>
                        </div> --}}


                        <div class="form-group">
                            <label>Reset PIN</label><br>
                        <a class="btn btn-danger" href="{{ url('/admin/karyawan/reset/'.$get_karyawan['user']['email']) }}" title="{{$get_karyawan['user']['name']}}"> RESET</span></a>
                        </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">
                                                @if(count($get_karyawan['UserKaryawanView']) == 0)
                                                <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" id="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-karyawan"  style="display:none;">
                                            <br>
                                            <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-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-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>
                                                @else
                                                @foreach($get_karyawan['UserKaryawanView'] as $key1 => $value1)
                                                <div data-repeater-item="admin2" class="form-group repeater-item row align-items-center">
                                                    <div class="col-md-12">
                                                        <label>Brands<span style="color:red;">*</span> :</label> <br/>
                                                        @foreach($value1['user_karyawan_outlets'] as $outlet => $brands)
                                                        <div class="input-group">
                                                            <select name="list_brand"  class="form-control list_brand">
                                                                <option value="">-- Choose Brand --</option>
                                                                @foreach ($brand['data'] as $key => $item)
                                                                    <option value="{{$item['id']}}"  {{($brands['brand_outlet']['id_brand'] == $item['id']) ? 'selected' : ''}}>{{$item['name']}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        @endforeach
                                                        <br>
                                                    </div>
                                                    <div class="col-md-6 repeater-outlet">
                                                        <label>Hak Akses (Features) <span style="color:red;">*</span> :</label> <br/>
                                                        <div class="input-group">
                                                            <select name="hak_akses" id="hak_akses" class="form-control">
                                                                <option value="">-- Pilih Hak Akses --</option>
                                                                <option {{($value1['level'] == "Admin") ? 'selected' : ''}} value="Admin">Admin</option>
                                                                <option {{($value1['level'] == "Karyawan")? 'selected' : ''}} value="Karyawan">Karyawan</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 repeater-outlet">
                                                        <label>Outlet <span style="color:red;">*</span> :</label> <br/>
                                                        @foreach($value1['user_karyawan_outlets'] as $outlet => $outlets)
                                                        <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']}}"  {{($outlets['id_outlet'] == $item['id']) ? 'selected' : ''}}>{{$item['name']}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        @endforeach
                                                    </div>
                                                    <br>
                                                    {{-- Div Class Checklist --}}
                                                    <div class="col-md-12 checkbox-karyawan"  style="display:none;">
                                                        <br>
                                                        <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-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>

                                                    @if ($value1['level'] == "Admin")
                                                        <div class="col-md-12 admin-repeater" >
                                                            <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']}}" @foreach($value1['user_karyawan_features']  as $ug) {{($ug['id_feature'] == $value['id']) ? 'checked="checked"' : ''}} @endforeach> {{$value['desc']}}
                                                                        <span></span>
                                                                    </label>
                                                                @endforeach
                                                            </div>
                                                        </div>
                                                    @endif


                                                    @if ($value1['level'] == "Karyawan")
                                                        <div class="col-md-12 karyawan-repeater">
                                                            <br>
                                                            <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']}}" @foreach($value1['user_karyawan_features'] as $ug) {{($ug['id_feature'] == $value['id']) ? 'checked="checked"' : ''}} @endforeach> {{$value['desc']}}
                                                                        <span></span>
                                                                    </label>
                                                                @endforeach
                                                            </div>
                                                        </div>
                                                    @endif

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

                                            @endforeach
                                            @endif
                                            </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="float-md-left">
                    <button type="submit" class="btn btn-warning pull-right">
                        <i class="fa fa-edit"></i> Update
                    </button>
                    <button type="reset" class="btn btn-secondary pull-right mr-1 btn-back">
                        Back
                    </button>
                </div>
            </form>
            <div class="kt-separator kt-separator--dashed"></div>
        </div>
    </div>
@endsection

@section('custom-script')
    <script>

    $(".btn-back").on("click", function(){
        window.history.back();
    });

       $(document).ready(function() {
            $('.outlet-select2').select2({
                placeholder: " Eg: Jilid 1"
            });
            $('#user_group').select2({
                placeholder: " Eg: Kasir"
            });

            var n = $('.align-items-center').length;

            if(n <= 1){
                $('.btn-delete').hide();
            }

            $('.btn-danger').click(function(event){
                event.preventDefault();

                var me = $(this),
                    url = me.attr('href'),
                    title = me.attr('title'),
                    csrf_token = $('meta[name="csrf-token"]').attr('content');

                    swal.fire({
                        title: 'Are you sure want to reset PIN ' + title + ' ?',
                        text: 'You won\'t be able to revert this!',
                        type: 'warning',
                        input: 'password',
                        inputAttributes: {
                            autocapitalize: 'off',
                            placeholder: "Masukan Master PIN",
                            maxlength: 6,
                            autocomplete: "new-password"
                        },
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes, delete it!'
                    }).then((result) => {

                            if (result.value) {
                                // console.log(result);
                                $('#loading').show();
                                $.ajax({
                                    url: url,
                                    type: "GET",
                                    data: {
                                        '_method': 'POST',
                                        '_token': csrf_token,
                                        'pin': result.value
                                    },
                                    success: function (response) {
                                        $('#loading').hide();
                                        // console.log(response)
                                        if (response.status == "fail") {
                                            swal.fire({
                                                type: 'error',
                                                title: 'Oops...',
                                                text: response.messages
                                            });
                                        }
                                        if (response.status == "success") {
                                            $('#datatable').DataTable().ajax.reload();
                                            swal.fire({
                                                type: 'success',
                                                title: 'Success!',
                                                text: 'Pin has been reset!!'
                                            });
                                        }
                                    },
                                    error: function (xhr) {
                                        $('#loading').hide();
                                        swal.fire({
                                            type: 'error',
                                            title: 'Oops...',
                                            text: 'Something went wrong!'
                                        });
                                    }
                                });
                            }
                        });
                    })
        });
    </script>
    <script>
          var selected_items = {!! json_encode($outlet_karyawan) !!};
		  var	prev_id_item;

          $("#kt_repeater_1").on('click','.btn-delete', function(){
            var n = $(this).parent().parent().parent().find('.align-items-center').length;

            if(n <= 2){
                $(this).parent().parent().parent().parent().find('.btn-delete').hide();
            }

            //

            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;
					});
                    // selected_items.push(id_item)


          })

            $("#kt_repeater_1").on('click','#repeater', function(){
                $('#kt_repeater_1 .repeater-item:last-child').find('.admin-repeater').hide();
                $('#kt_repeater_1 .repeater-item:last-child').find('.karyawan-repeater').hide();

                var n = $(this).parent().parent().find('.align-items-center');


                $('#kt_repeater_1 .repeater-item:last-child').find('.repeater-outlet').hide();
                // $(this).parent().parent().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);
                }
            });

            //Keluar gan

            });

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

                // $(this).css( "background-color", "red" ); //Jika disini bisa jadi merah
                var url = '{{ route("karyawan.outlet", ":val") }}';
                url = url.replace(':val', val);

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

                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"
                // });
                            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;
                            });

                        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('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','#hak_akses', function(){


                var value = $(this).val();
                if(value == "Admin"){

                    $(this).parent().parent().parent().find('.checkbox-admin').show();
                    // $('.admin-repeater').hide();
                    // $('.karyawan-repeater').hide(); //Edit ini

                    $(this).parent().parent().parent().find('.checkbox-karyawan').hide();
                    $(this).parent().parent().parent().find('.karyawan-repeater').hide();
                    $(this).parent().parent().parent().find('.admin-repeater').hide();

                }
                else if(value == "Karyawan"){

                    $(this).parent().parent().parent().find('.checkbox-karyawan').show();
                    $(this).parent().parent().parent().find('.checkbox-admin').hide();
                    // $('.admin-repeater').hide(); //Edit ini
                    // $('.karyawan-repeater').hide();
                    $(this).parent().parent().parent().find('.karyawan-repeater').hide();
                    $(this).parent().parent().parent().find('.admin-repeater').hide();

                }

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

            })



    </script>
    <script>
        $(document).ready(function() {
            $(".kt-checkbox-list #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() {
            $(".kt-checkbox-list #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