@extends('layouts.main')
@section('content')
<!--begin::Card-->
<div class="card card-custom">
    <div class="card-header">
        <div class="card-title">
            <span class="card-icon">
                <i class="flaticon-users text-primary"></i>
            </span>
            <h3 class="card-label">Manage Profiles</h3>
        </div>
        <div class="card-toolbar">

            @if ($loggedUserDetails['guard'] == 'user' || $loggedUserDetails['is_hr'] == 1 || $loggedUserDetails['is_admin'] == 1)
                <!-- Modal for Export beigin -->
                <a href="{{ route('profile.export') }}" class="btn btn-primary font-weight-bolder">
                    <span class="svg-icon svg-icon-md">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <rect x="0" y="0" width="24" height="24"/>
                                <path d="M17,8 C16.4477153,8 16,7.55228475 16,7 C16,6.44771525 16.4477153,6 17,6 L18,6 C20.209139,6 22,7.790861 22,10 L22,18 C22,20.209139 20.209139,22 18,22 L6,22 C3.790861,22 2,20.209139 2,18 L2,9.99305689 C2,7.7839179 3.790861,5.99305689 6,5.99305689 L7.00000482,5.99305689 C7.55228957,5.99305689 8.00000482,6.44077214 8.00000482,6.99305689 C8.00000482,7.54534164 7.55228957,7.99305689 7.00000482,7.99305689 L6,7.99305689 C4.8954305,7.99305689 4,8.88848739 4,9.99305689 L4,18 C4,19.1045695 4.8954305,20 6,20 L18,20 C19.1045695,20 20,19.1045695 20,18 L20,10 C20,8.8954305 19.1045695,8 18,8 L17,8 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                <rect fill="#000000" opacity="0.3" transform="translate(12.000000, 8.000000) scale(1, -1) rotate(-180.000000) translate(-12.000000, -8.000000) " x="11" y="2" width="2" height="12" rx="1"/>
                                <path d="M12,2.58578644 L14.2928932,0.292893219 C14.6834175,-0.0976310729 15.3165825,-0.0976310729 15.7071068,0.292893219 C16.0976311,0.683417511 16.0976311,1.31658249 15.7071068,1.70710678 L12.7071068,4.70710678 C12.3165825,5.09763107 11.6834175,5.09763107 11.2928932,4.70710678 L8.29289322,1.70710678 C7.90236893,1.31658249 7.90236893,0.683417511 8.29289322,0.292893219 C8.68341751,-0.0976310729 9.31658249,-0.0976310729 9.70710678,0.292893219 L12,2.58578644 Z" fill="#000000" fill-rule="nonzero" transform="translate(12.000000, 2.500000) scale(1, -1) translate(-12.000000, -2.500000) "/>
                            </g>
                        </svg>
                    </span> DOWNLOAD ACTIVE PROFILES
                </a>
                <!-- Modal for Export end  -->
           @endif

           &nbsp;

            <!--begin::Button-->
            <a href="{{ route('profile.create') }}" class="btn btn-primary font-weight-bolder">
            <span class="svg-icon svg-icon-md">
                <!--begin::Svg Icon | path:assets/media/svg/icons/Design/Flatten.svg-->
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <polygon points="0 0 24 0 24 24 0 24"/>
                        <path d="M18,8 L16,8 C15.4477153,8 15,7.55228475 15,7 C15,6.44771525 15.4477153,6 16,6 L18,6 L18,4 C18,3.44771525 18.4477153,3 19,3 C19.5522847,3 20,3.44771525 20,4 L20,6 L22,6 C22.5522847,6 23,6.44771525 23,7 C23,7.55228475 22.5522847,8 22,8 L20,8 L20,10 C20,10.5522847 19.5522847,11 19,11 C18.4477153,11 18,10.5522847 18,10 L18,8 Z M9,11 C6.790861,11 5,9.209139 5,7 C5,4.790861 6.790861,3 9,3 C11.209139,3 13,4.790861 13,7 C13,9.209139 11.209139,11 9,11 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                        <path d="M0.00065168429,20.1992055 C0.388258525,15.4265159 4.26191235,13 8.98334134,13 C13.7712164,13 17.7048837,15.2931929 17.9979143,20.2 C18.0095879,20.3954741 17.9979143,21 17.2466999,21 C13.541124,21 8.03472472,21 0.727502227,21 C0.476712155,21 -0.0204617505,20.45918 0.00065168429,20.1992055 Z" fill="#000000" fill-rule="nonzero"/>
                    </g>
                </svg>
                <!--end::Svg Icon-->
            </span>Create Profile</a>
            <!--end::Button-->
        </div>
    </div>
    <div class="card-body">
        <!--begin: Datatable-->
        <table class="table table-bordered table-hover table-checkable" id="datatable">
            <thead>
                <tr>
                    <th>Profile Name</th>
                    <th>Email</th>
                    <th>Position</th>
                    <th>Team</th>
                    <th>Mobile</th>
                    <th>Actions</th>
                </tr>
            </thead>
        </table>
        <!--end: Datatable-->
    </div>
</div>
<!--end::Card-->
@endsection
@section('sub_header')
<div class="subheader py-2 py-lg-6 subheader-transparent" id="kt_subheader">
    <div class="container d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
        <!--begin::Info-->
        <div class="d-flex align-items-center flex-wrap mr-1">
            <!--begin::Page Heading-->
            <div class="d-flex align-items-baseline flex-wrap mr-5">
                <!--begin::Page Title-->
                <h5 class="text-dark font-weight-bold my-1 mr-5">Manage Profiles</h5>
                <!--end::Page Title-->
                <!--begin::Breadcrumb-->
                <ul class="breadcrumb breadcrumb-transparent breadcrumb-dot font-weight-bold p-0 my-2 font-size-sm">
                    <li class="breadcrumb-item text-muted">
                        <a href="" class="text-muted">List</a>
                    </li>
                </ul>
                <!--end::Breadcrumb-->
            </div>
            <!--end::Page Heading-->
        </div>
        
    </div>
</div>
@endsection
@section('theam_css')
<link href="{{ $common->getTheamUrl('assets/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />

@endsection

@section('js_file')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="{{ $common->getTheamUrl('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
@endsection

@section('page_js')
    <script>
        var ajax_datatable_list = null;
        $(document).ready(function(){
           initializeDatatable(); 
           $('body').tooltip({selector: '[data-toggle="tooltip"]'});
           $('body').on('click','.disable-profile', disableProfileHandler);

            @if(Session::has('success'))
                toastr.success("{{Session::get('success')}}");
            @endif 
            @if(Session::has('error'))
                toastr.error("{{Session::get('error')}}");
            @endif
            $('[data-toggle="tooltip"]').tooltip()

        })

        function initializeDatatable() {
            if (ajax_datatable_list) {
                ajax_datatable_list.destroy();
            }

            ajax_datatable_list = $('#datatable').DataTable({
                'paging': true,
                'lengthChange': true,
                "lengthMenu": [[10, 25, 50, 100, 200, -1], [10, 25, 50, 100, 200, "All"]],
                'searching': true,
                'ordering': true,
                "processing": true,
                "serverSide": true,
                "pageLength" : datatablePageLength,
                "ajax": {
                    "url": "{{route('profile.ajax.getlist')}}",
                    "data":{status:1},
                    "dataSrc": "lists"
                },
                "columns": [
                    
                    {
                        sortable: true,
                        "render": function(data, type, full, meta) {
                            let html = full.profile_first_name+' '+full.profile_last_name
                            html += full.is_dot==1 ? ' <i class="icon-xs fas fa-circle text-success " data-toggle="tooltip" title="Has DOT"></i>' : ''
                            html += full.is_trainer==1 ? ' <i class="icon-xs fas fa-circle text-warning " data-toggle="tooltip" title="Trainer"></i>' : ''
                            html += full.is_ops==1 ? ' <i class="icon-xs fas fa-circle text-primary " data-toggle="tooltip" title="OPS"></i>' : ''
                            return html
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.profile_email;
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            // return full.profile_designation!=null ? full.profile_designation.name : '';

                            return full.profile_designation != null ?  full.profile_designation.status != 0 ? full.profile_designation.name : '' : '';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.profile_team!=null ? full.profile_team.team_name : '';
                        }
                    },
                    {
                        sortable: true,
                        "render": function(data, type, full, meta) {
                            //return full.mobile.totalCount!=null ? full.badgeDetails.totalCount : '';
                            return full.mobile!=null ? full.mobile : '';
                        }
                    },
                    
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            var html = '';
                            
                            html += `
                            <a href="${getWebUrl('profiles/edit/'+full.id)}" class="btn btn-md btn-light-warning btn-icon btn-circle" data-toggle="tooltip" title="Edit Profile"><i class="flaticon-edit-1"></i></a>
                            `;

                            if(full.profile_designation != null ){
                                if(full.profile_designation.status != 0){
                                    html += `
                                    <a href="${getWebUrl('profiles/career-path/'+full.id)}" class="btn btn-md btn-light-info btn-icon btn-circle" data-toggle="tooltip" title="Career Path"><i class="la la-user-tag"></i></a>
                                    `;
                                }
                            }
                           
                            html += `
                            <a href="javascript:" class="btn btn-md btn-light-danger btn-icon btn-circle disable-profile" data-toggle="tooltip" title="Disable Profile" data-id="${full.id}"><i class="la la-user-alt-slash"></i></a>
                            `;
                            return html;
                        }
                    },
                ]
            });
            return ajax_datatable_list;
        }

        function disableProfileHandler() {
            var profileId = $(this).attr('data-id');
                Swal.fire({
                    title: "Are you sure?",
                    text: "This Profile will disable after your action!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonText: "Yes, disable it!",
                    closeOnConfirm: false,
                    showLoaderOnConfirm: true,
                }).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            url: "{{route('profile.ajax.status.change')}}",
                            type: 'get',
                            dataType: 'json',
                            data: {profileId:profileId},                    
                            success: function (response) {
                                if(response.status){
                                    Swal.fire(
                                        "Disable!",
                                        response.message,
                                        "success"
                                    )
                                }else{
                                   toastr.error(response.message); 
                                }
                            },
                            error: function (response) {
                                toastr.error("An error occurred");                                
                            },
                            complete:function(){
                                initializeDatatable();
                            }
                        }); 
                    }
                });
        }
    </script>
@endsection