@extends('layouts.commonmaster')

@section('title') | Dashboard @endsection

@section('content')

<!-- Page body -->
<div class="page-body">
    <div class="container-xl">
        <div class="col-12 mb-3">
            <div class="card card-md">
                <div class="card-stamp card-stamp-lg">
                    <div class="card-stamp-icon bg-primary">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><path d="M10 10l.01 0" /><path d="M14 10l.01 0" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-10">
                            <h3 class="h1">{{ $org_name }} Clerks</h3>
                            <div class="markdown text-dark">
                                This page serves as the central hub for managing clerks within the system, providing tools to oversee
                                their roles, assign permissions, and manage related administrative tasks. To add new clerks
                                to the system, simply click the button below and follow the guided steps.
                            </div>
                            <div class="mt-3">
                                <a href="#" class="btn btn-primary">
                                    Add Clerk
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12">
            <div class="card">
                <div class="table-responsive">
                    <table class="table card-table table-vcenter text-nowrap datatable">
                        <thead>
                            <tr>
                                <th class="w-1">No.
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-sm icon-thick" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 15l6 -6l6 6" /></svg>
                                </th>
                                <th>Name</th>
                                <th>Username</th>
                                <th>Phone Number </th>
                                <th>Email</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                            $number = 0
                            @endphp
                            @foreach($org_clerks as $oc)
                            <tr>
                            @php
                            $number++;
                            @endphp

                                <td>{{ $number }}</td>
                                <td><span class="text-secondary">{{ $oc->name }}</span></td>
                                <td>{{ $oc->username }}</td>
                                <td>
                                    <span class="flag flag-xs flag-country-us me-2"></span>
                                    {{ $oc->phonenumber }}
                                </td>
                                <td>
                                    {{ $oc->email }}
                                </td>
                                <td class="text">
                                    <span class="dropdown">
                                        <button class="btn dropdown-toggle align-text-top" data-bs-boundary="viewport" data-bs-toggle="dropdown">Actions</button>
                                        <div class="dropdown-menu dropdown-menu-end">
                                            <a class="dropdown-item" href="#">
                                                View Stats
                                            </a>
                                            <a class="dropdown-item" href="#">
                                                Deactivate Clerk
                                            </a>
                                        </div>
                                    </span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection()

@push('scripts')
<script>

</script>
@endpush