@php(
    $headerOption = [
        'title' => '',
        'noCardView' => true,
    ]
)
@extends('front.layouts.layout', $headerOption)

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-flex align-items-center justify-content-between">
                <h4 class="mb-0 font-size-18">Users</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">Dashboard</a></li>
                        <li class="breadcrumb-item active">Users</li>
                    </ol>
                </div>

            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="d-flex justify-content-between mb-3">
                <div class="w-f-150">
                    <select class="form-control border-radius-100">
                        <option>All Status</option>
                    </select>
                </div>
                <div class="d-flex align-items-center gap-10">
                    <div class="search-box">
                        <div class="position-relative">
                            <input type="text" class="form-control" placeholder="Search...">
                            <i class="bx bx-search-alt search-icon"></i>
                        </div>
                    </div>
                    <a href="javascript:void(0);" class="btn btn-light btn-rounded waves-effect">Download All</a>
                    <a href="javascript:void(0);"
                        class="btn btn-primary btn-rounded waves-effect waves-light right-bar-toggle"><span
                            id="heading-tag">Create User</span></a>

                </div>
            </div>
            <div class="table-responsive policy-table mb-0" data-pattern="priority-columns">
                <table id="tech-companies-1" class="table table-striped">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Name <i class="bx bx-chevron-up ml-1"></i></th>
                            {{-- <th>Company</th> --}}
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Role</th>
                            {{-- <th data-priority="3"></th> --}}
                            <th data-priority="3">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (count($data))
                            @foreach ($data as $key => $val)
                                <tr>
                                    <td>
                                        {{-- @if ($val->creator_id == auth()->user()->id || $val->owner_id == auth()->user()->id) --}}
                                            <a href="javascript:void(0);" data-id="{{ $val->id }}"
                                            class="right-bar-toggle company" data-mode="company"><i
                                                class="bx bx-edit font-size-20"></i></a>
                                        {{-- @endif --}}

                                        {{-- <a href="javascript:void(0);" data-id="{{ $val->id }}" class="del-company"><i
                                            class="bx bx-copy-alt font-size-20 ml-1 mr-1"></i></a> --}}
                                    </td>
                                    <td>{{ $val->full_name }}</td>
                                    {{-- <td>{{ $val->company_name }}</td> --}}
                                    <td>{{ $val->email }}</td>
                                    <td>{{ $val->phone }}</td>
                                    <td>{{ $val->role_title }}</td>

                                    <td><span class="badge badge-pill badge-soft-{{ $val->statuses[$val->status]['badge'] }} font-size-12">{!! $val->statuses[$val->status]['name'] !!}</span></td>
                                    <td class="w-20">
                                        <div class="media justify-content-end">
                                            <button type="button"
                                                class="btn btn-warning btn-rounded waves-effect waves-light del-company"
                                                data-id="{{ $val->id }}"><i
                                                    class="mdi mdi-delete font-size-15"></i></button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                        <tr>
                            <td colspan="4" class="text-center">No Data Found</td>
                        </tr>
                        @endif

                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- modal -->
    <div class="right-bar right-bar-xl">
        <div data-simplebar class="h-100">
            <div class="rightbar-title px-3 py-4">
                <a href="javascript:void(0);" class="right-bar-toggle float-right" id="close-modal">
                    <i class="mdi mdi-close noti-icon"></i>
                </a>
                <h5 class="m-0">Create new User</h5>
            </div>

            <div class="px-3 pt-4">
                <div id="formrow-plantitle">
                    <h2 class="card-title mb-2">User Info</h2>
                    <hr>
                </div>

                <form class="mt-4" id="employeeForm">
                    <input type="hidden" id="requirmentid" value="" />

                    <div class="form-group" id="formrow-firstname">
                        <label for="formrow-firstname-input">First Name <sup class="text-danger">*</sup></label>
                        <input type="text" class="form-control" id="formrow-firstname-input" data-parsley-required="true">
                    </div>

                    <div class="form-group" id="formrow-lastname">
                        <label for="formrow-lastname-input">Last Name <sup class="text-danger">*</sup></label>
                        <input type="text" class="form-control" id="formrow-lastname-input" data-parsley-required="true">
                    </div>

                    <div class="form-group" id="formrow-email">
                        <label for="formrow-email-input">Email <sup class="text-danger">*</sup></label>
                        <input type="email" class="form-control" id="formrow-email-input" data-parsley-type="email"
                            data-parsley-trigger="keyup"
                            data-parsley-checkemail="true"
                            data-parsley-checkemail-message="This email id alredy exists."
                            required="true">
                    </div>

                    <div class="form-group" id="formrow-phone">
                        <label for="formrow-phone-input">Phone <sup class="text-danger">*</sup></label>
                        <input type="phone" class="form-control input-mask" id="formrow-phone-input"
                            data-parsley-trigger="keyup"
                            data-parsley-checkphone="true"
                            data-parsley-checkphone-message="This phone number alredy exists."
                            required="true"
                            data-inputmask="'mask': '(999) 999-9999'"
                            im-insert='true'">
                    </div>
                    {{--
                    data-parsley-pattern="^[\d\+\-\.\(\)\/\s]*$"
                    data-parsley-maxlength="10" data-parsley-maxlength-message="maxlength ten number"
                    data-parsley-type="digits" data-parsley-type-message="only numbers"
                     --}}
                    {{-- <div class="form-group" id="formrow-companyaddress">
                        <label for="formrow-companyaddress-input">Address <sup class="text-danger">*</sup></label>
                        <input type="text" class="form-control" id="formrow-companyaddress-input">
                    </div> --}}

                    {{-- <div class="row">

                        <div class="col-md-12" id="formrow-companydesc">
                            <div class="form-group">
                                <label for="formrow-companydesc-input">About the company <sup class="text-danger">*</sup></label>
                                <textarea type="text" id="con-desc" class="form-control heg-adj" rows="7"></textarea>
                            </div>
                        </div>
                    </div> --}}

                    <div id="formrow-planyear">
                        <h2 class="card-title mb-2 mt-4">Company <sup class="text-danger">*</sup></h2>
                        <hr>
                        @php($companylist =  $companylist)
                        {!! Form::select('company_id[]', $companylist, null, ['class' => 'form-control', 'id' => 'company_id', 'multiple' => true, 'data-parsley-required' => true]) !!}
                    </div>


                    <div id="formrow-role">
                        <h2 class="card-title mb-2 mt-4">Select Role <sup class="text-danger">*</sup></h2>
                        <hr>
                        @foreach ( $roles as $key => $value)
                            <div class="form-check form-check-inline">
                                <input class="form-check-input role" type="radio" name="role" id="role_{{ $key }}" value="{{ $key }}" {{ $key == 6 ? 'checked' : '' }}>
                                <label class="form-check-label" for="role">{{ $value }}</label>
                            </div>
                        @endforeach
                    </div>

                </form>
                <div class="d-flex justify-content-end gap-10 border-top pt-4 pb-4">
                    <a href="javascript:void(0)"
                        class="btn btn-outline-primary btn-rounded waves-effect waves-light px-5 py-2"
                        onclick="closeCreateModal()">Cancel</a>
                    <a href="javascript:void(0)" id="req_submit_btn" onclick="onUpdateRequirement()"
                        data-loading-text="<i class='bx bx-loader-alt bx-spin'></i> Processing..."
                        class="btn btn-primary btn-rounded px-5 py-2">Save</a>
                </div>
            </div>



        </div>
    </div>



    </div>
@endsection
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
    var app_url = "