@extends('layouts.app')

@section('title', 'Detail Karyawan')
@section('breadcrumb', 'Manage Karyawan')
@section('sub-breadcrumb')
    {{-- <span class="kt-subheader__breadcrumbs-separator"></span> --}}
    <a class="kt-subheader__breadcrumbs-link">
        Detail Karyawan
    </a>
@endsection
@section('admin', 'kt-menu__item--open kt-menu__item--here')
@section('karyawan', 'kt-menu__item--open kt-menu__item--here')
@section('list-karyawan', 'kt-menu__item--active')
@section('content')

    <div class="col-md-12">
        <div class="row">
           {{-- begin: Basic Detail --}}
            <div class="col-md-4">
                <div class="kt-portlet">
                    <div class="kt-portlet__body">

                        @include('layouts.notification')
                        <div class="kt-widget kt-widget--user-profile-1 pb-0">
                            <div class="kt-widget__head">
                                <div class="kt-widget__content">
                                    <div class="kt-widget__section">
                                        <a class="kt-widget__username">
                                            {{$data['name']}}
                                            <i class="flaticon2-correct kt-font-success"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="kt-widget__body">
                                <div class="kt-widget__content">
                                    <div class="kt-widget__info">
                                        <span class="kt-widget__label">Email:</span>
                                        <a href="#" class="kt-widget__data">
                                            {{$data['email']}}
                                        </a>
                                    </div>
                                    <div class="kt-widget__info">
                                        <span class="kt-widget__label">Phone:</span>
                                        <a href="#" class="kt-widget__data">
                                            {{$data['phone']}}
                                        </a>
                                    </div>
                                    <div class="kt-widget__info">
                                        <span class="kt-widget__label">Level:</span>
                                        <span class="kt-widget__data">
                                            <span class="kt-badge kt-badge--inline kt-badge--success">
                                                Karyawan
                                            </span>
                                        </span>
                                    </div>
                                </div>
                                <style>
                                    .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
                                        -webkit-transition: color 0.3s ease;
                                        transition: color 0.3s ease;
                                        background: #f2f3f7;
                                        border-radius: 4px;
                                        color: #838799;
                                    }
                                </style>
                               {{-- begin:: Tab Title  --}}
                                <div class="kt-widget__items nav flex-column nav-pills mb-0" id="v-pills-tab" role="tablist" >
                                    <a class="kt-widget__item nav-link active" data-toggle="pill" href="#v-basic" role="tab" aria-controls="v-basic" aria-selected="true">
                                        <span class="kt-widget__section">
                                            <span class="kt-widget__icon">
                                                <i class="flaticon-home-2"></i>
                                            </span>
                                            <span class="kt-widget__desc">
                                                Detail Data User
                                            </span>
                                        </span>
                                    </a>
                                    <a class="kt-widget__item nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-logs" role="tab" aria-controls="v-logs" aria-selected="false">
                                        <span class="kt-widget__section">
                                            <span class="kt-widget__icon">
                                                <i class="fa fa-users"></i>
                                            </span>
                                            <span class="kt-widget__desc">
                                                Log Activity
                                            </span>
                                        </span>
                                    </a>


                                </div>

                               {{-- end:: Tab Title  --}}
                            </div>

                        </div>

                    </div>
                    {{-- <div class="container">
                        <button class="btn btn-secondary btn-back" type="button">Back</button>
                    </div> --}}
                    <br>
                </div>
            </div>
           {{-- end: Basic Detail --}}

           {{-- begin: Tab Content  --}}
            <div class="col-md-8">
                <div class="tab-content" id="v-pills-tabContent">
                   {{-- begin: Active Tab --}}
                    <div class="tab-pane fade show active" id="v-basic" role="tabpanel" aria-labelledby="v-pills-home-tab">
                        <div class="kt-portlet">
                            <div class="kt-portlet__head">
                                <div class="kt-portlet__head-label">
                                    <p class="kt-portlet__head-title">
                                        <i class="flaticon-home-2"></i> Detail Data User
                                    </p>
                                </div>
                            </div>
                            <div class="kt-portlet__body">
                                @if (!empty($data['user_karyawan']))
                                    @foreach ($data['user_karyawan'] as $key => $value)
                                        <div class="kt-portlet">
                                            <div class="kt-portlet__body">
                                                <div class="form-row">
                                                    <label class="col-md-3"> Outlet</label>
                                                    <p class="col-md-9">: {{$value['user_karyawan_outlets'][0]['brand_outlet_all']['name'] ?? '-'}}</p>
                                                </div>
                                                <div class="form-row">
                                                    <label class="col-md-3"> Displayed Name</label>
                                                    <p class="col-md-9">: {{$value['displayed_name']}}</p>
                                                </div>
                                                <div class="form-row">
                                                    <label class="col-md-3"> Jabatan</label>
                                                    <p class="col-md-9">: {{$value['jabatan']}}</p>
                                                </div>
                                                <div class="form-row">
                                                    <label class="col-md-3"> Level</label>
                                                    <p class="col-md-9">: {{$value['level']}}</p>
                                                </div>
                                                <div class="form-row">
                                                    <label class="col-md-3"> User Group</label>
                                                    <p class="col-md-9">:
                                                        @forelse($data['user_groups'] as $key => $user_group)
                                                            {{ ($key > 0 ? ", " : "") . $user_group['user_group']['name'] }}
                                                        @empty
                                                            -
                                                        @endforelse
                                                    </p>
                                                </div>
                                                @if (!empty($data['user_karyawan']))
                                                    @if (!empty($value['user_karyawan_features']))
                                                        <div class="form-row">
                                                            <label class="col-md-3"> Hak Akses</label>
                                                            <a class="col-md-9" href="#" data-toggle="modal" data-target="#access_{{$value['id']}}">:
                                                                <span class="badge badge-primary"><i class="fa fa-eye"></i> lihat</span>
                                                            </a>
                                                        </div>
                                                    @endif
                                                @endif

                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                    </div>
                   {{-- end: Active Tab --}}

                   {{-- begin: Log Activity --}}
                    <div class="tab-pane fade" id="v-logs" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                        <div class="kt-portlet">
                            {{-- <div class="kt-portlet__head">
                                <div class="kt-portlet__head-label">
                                    <p class="kt-portlet__head-title">
                                        <i class="fa fa-users"></i> Log
                                    </p>
                                </div>
                            </div> --}}
                            <div class="kt-portlet__body">
                                <table id="datatable" class="table table-hover table-responsive" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>Module</th>
                                            <th>Status</th>
                                            <th>Subject</th>
                                            <th>Email</th>
                                            {{-- <th>User</th> --}}
                                            <th>IP</th>
                                            <th>Agent</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                   {{-- end: Active Tab --}}
                </div>
            </div>
           {{-- end: Tab Content --}}
        </div>
    </div>

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

        <div class="modal fade" id="access_{{$value['id']}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header" style="border-bottom:0px;">
                <h5 class="modal-title" id="exampleModalLabel">Hak Akses User</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                </div>
                <div class="modal-body">
                    @if (!empty($value['user_karyawan_features']))
                        @foreach ($value['user_karyawan_features'] as $item)
                            <label class="kt-checkbox">
                                <input type="checkbox" checked="checked"> {{$item['feature']['desc']}}
                                <span></span>
                            </label><br/>
                        @endforeach
                    @endif
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
            </div>
        </div>
    @endforeach

    @endif
@endsection

@section('custom-script')
<script>
$(".btn-back").on("click", function(){
        window.history.back();
});
$(document).ready(function () {

    var c_url = window.location.href ;
    var url = c_url.replace("detail", "table-log")
    // console.log('url', url);
    $.fn.dataTable.ext.errMode = 'none';
    $('a[data-toggle="pill"]').on( 'shown.bs.tab', function (e) {
        $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
    } );
    $('#datatable').DataTable({
        responsive: true,
        processing: true,
        serverSide: true,
        "bFilter": true,
        "lengthChange": true,
        ajax: url,
        columns: [
            {data: 'DT_RowIndex', name: 'id', searchable: false, orderable: false},
            {data: 'module', name: 'module'},
            {data: 'response_status', name: 'response_status'},
            {data: 'subject', name: 'subject'},
            {data: 'email', name: 'email'},
            // {data: 'user', name: 'user'},
            {data: 'ip_address', name: 'ip_address'},
            {data: 'user_agent', name: 'user_agent'},
        ]
    }).on('processing.dt', function (e, settings, processing) {
        if (processing) {
            $('#datatable').hide();
            $('#loading').show();
        } else {
            $('#datatable').show();
            $('#loading').hide();
        }
    });
});

</script>
@endsection