@extends('companyuser::layouts.master')
@section('title',__('companyuser::permissions.Roles'))
@section('breadcrumb')
<link href="{{asset('assets/css/style-svgFont.css') }}" rel="stylesheet">
<div class="row breadcrumbs-top">
    <div class="breadcrumb-wrapper col-xs-12">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a>@lang('companyuser::permissions.users and permissions')</a>
            </li>
            <li class="breadcrumb-item active"><a href="#">@lang('companyuser::permissions.Roles')</a>
            </li>
        </ol>
    </div>
</div>
@endsection

@section('content')
<section>
    <div class="container-fluid">
            <div class="col-xs-6 headTitle">
                <h3 class="py-half">@lang('companyuser::permissions.Roles')</h3>
            </div>
            <div class="headBtns fixed-btns">
                @can('permissions.roles.create')
                <a href="{{ route('company.roles.create', $subdomain) }}" class="pull-right" title='@lang("Create")'>
                <span class="icon-Add action-icon"></span>
                    <!-- <button type="button" class="btn btn-soundcloud btn-min-width text-white">@lang("Create")
                        <img alt="add" src="{{asset('assets/images/svg/plus.svg')}}"></button> -->

                </a>
                @endcan
            </div>
        @include('companyuser::errors.lists')
        <section id="configuration" class="mt-2">
            <div class="row">
                <div class="col-xs-12">
                    <div class="card">
                        <div class="card-body collapse in">
                                <table
                                    class="table table-striped table-column dataex-res-configuration  @if(app()->getlocale() == 'ar') ar-language-file @endif"
                                    style="width:100%;display: inline-table;">
                                    <thead>
                                        <tr>
                                            <th>@lang('companyuser::permissions.Role name')</th>
                                            <th>@lang('companyuser::permissions.Role name in arabic')</th>
                                            <th>@lang('Action')</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($roles as $role)
                                        <tr>
                                            <td>{{$role['name']}}</td>
                                            <td>{{$role['name_ar']}}</td>
                                            <td>
                                                @can('permissions.roles.edit')
                                                <a href="{{route('company.roles.edit',['subdomain' => $subdomain, 'role' =>  $role['id']])}}"
                                                    class='btn btni rounded-circle font-small-2 btn-info btn-xs btn-edit text-white'
                                                    data-toggle="tooltip" data-placement="bottom"
                                                    title="@lang('Edit')"><i class="fa fa-pencil"></i>
                                                </a>
                                                @endcan
                                                @can('permissions.roles.delete')
                                                <a href="" target="_blank"
                                                    class="btn btni rounded-circle font-small-2 btn-sm  btn-danger delete-role text-white"
                                                    data-toggle="modal" data-target="#favoritesModal"
                                                    data-url="{{ route('company.roles.destroy', ['subdomain' => $subdomain, 'role' =>  $role['id']] ) }}">
                                                    <i class="fa fa-trash" data-toggle="tooltip" data-placement="bottom"
                                                        title="@lang('Delete')"></i>
                                                </a>
                                                @endcan
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                        </div>
                    </div>
                </div>
            </div>
</section>
</section>

{{---------------- popup fo deleted role -------------------------------}}
<div class="modal fade" id="favoritesModal" tabindex="-1" role="dialog" aria-labelledby="favoritesModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="favoritesModalLabel">@lang('Delete')</h4>
            </div>
            <div class="modal-body">
                <p> @lang('Are You Sure to delete this?')
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default mx-1" data-dismiss="modal">@lang('No')</button>
                <span class="pull-right">
                    <form id="delete-form" action="" method="POST" class="form">
                        @csrf
                        @method('delete')
                        <button type="submit" class="btn btn-primary">@lang('Yes')</button>
                    </form>
                </span>
            </div>
        </div>
    </div>
</div>
@endsection
@section('extra_scripts')
    <script>
        gtag('event', 'web_user_and_permission_role_list');
        console.log('web_user_and_permission_role_list event');
    </script>
<script>
    window.addEventListener('DOMContentLoaded', function () {
        (function ($) {
            // For A Delete Record Popup
            //handel desktop(click) and mobile(touchstart) browsers
            $(document).on('touchstart click', '.delete-role', function(){
                var url = $(this).attr('data-url');
                $("#delete-form").attr("action", url);
            });
        })(jQuery);
    });

</script>
@endsection