@extends('backend.screens.settings.layout')

@section('setting-content')
    <div class="text-right">
        <x-admin.form.button type="modal" target="#add-admin">
            <i class="fa fa-plus"></i>
            <span class="ml-1">
                 Add Admin
            </span>
        </x-admin.form.button>
    </div>
    <x-admin.table.view>
        @php
            $columns = [
                'SNo.',
                'Admin Name',
                'Date',
                'Email',
                'Action'
            ];
        @endphp
        <x-admin.table.head :columns="$columns"/>
        <tbody>
        @forelse($admins as $index => $admin)
            <tr>
                <td>{{ $index + $admins->firstItem() }}</td>
                <td><x-admin.table.user :name="$admin->name" /></td>
                <td>{{ $admin->created_at->format('M d, Y') }}</td>
                <td>{{ $admin->email }}</td>
                <td>
                    @php
                        $menus = [
                            [
                                'to' => "#",
                                'fa-icon' => 'fa fa-edit',
                                'title' => 'Edit',
                                'type' => 'modal',
                                'id' => 'edit-admin-'.$admin->id
                            ],
                            [
                                'to' => route('admin.setting.admin.delete', $admin->id),
                                'fa-icon' => 'fa fa-trash',
                                'title' => 'Delete',
                                'class' => 'has-confirmation',
                                'data-message' => 'Are you sure you want to delete this admin?'
                            ],
                        ];
                    @endphp
                    <x-admin.table.menu.kebab :menus="$menus" />
                </td>
            </tr>
        @empty
            <tr>
                <td colspan="5">Admin not found</td>
            </tr>
        @endforelse
        </tbody>
    </x-admin.table.view>
    @include('backend.shared.pagination', ['paginator' => $admins])

    <!-- Start Add Modal -->
    <x-admin.modal.modal id="add-admin" title="Add Admin">
        <form action="{{ route('admin.setting.admin.store').'#add-admin' }}" method="post">
            @csrf
            <div class="row">
                <div class="col-6">
                    <x-admin.form.field
                        label="Admin Name"
                        placeholder="Enter name here"
                        id="name"
                        class="mb-2"
                    />
                </div>
                <div class="col-6">
                    <x-admin.form.field
                        label="Admin Email"
                        placeholder="Enter email here"
                        id="email"
                        type="email"
                        class="mb-2"
                    />
                </div>
                <div class="col-12">
                    <x-admin.form.field
                        label="Password"
                        placeholder="Enter password"
                        id="password"
                        type="password"
                        class="mb-2"
                    />
                </div>
                <div class="col-12">
                    <x-admin.form.tag-select
                        label="Permissions"
                        id="abilities"
                        :items="config('abilities.permissions')"
                        itemValue="key"
                        itemText="name"
                        class="mb-2"
                    />
                </div>
                <div class="col-12">
                    <x-admin.form.button type="submit">
                        Add
                    </x-admin.form.button>
                </div>
            </div>
        </form>
    </x-admin.modal.modal>
    <!-- End Add Modal -->

    @foreach($admins as $index => $admin)
        <!-- Start Edit Modal -->
        <x-admin.modal.modal id="edit-admin-{{ $admin->id }}" title="Edit Admin">
            <form action="{{ route('admin.setting.admin.update', $admin->id).'#edit-admin-'.$admin->id }}" method="post">
                @csrf
                <div class="row">
                    <div class="col-6">
                        <x-admin.form.field
                            label="Admin Name"
                            placeholder="Enter name here"
                            id="name"
                            class="mb-2"
                            value="{{ $admin->name }}"
                        />
                    </div>
                    <div class="col-6">
                        <x-admin.form.field
                            label="Admin Email"
                            placeholder="Enter email here"
                            id="email"
                            type="email"
                            class="mb-2"
                            value="{{ $admin->email }}"
                        />
                    </div>
                    <div class="col-12">
                        <x-admin.form.field
                            label="Password"
                            placeholder="Set new password"
                            id="password"
                            type="password"
                            class="mb-2"
                        />
                    </div>
                    <div class="col-12">
                        <x-admin.form.tag-select
                            label="Permissions"
                            id="abilities"
                            :items="config('abilities.permissions')"
                            itemValue="key"
                            itemText="name"
                            class="mb-2"
                            :selected="$admin->abilities->pluck('name')->toArray()"
                        />
                    </div>
                    <div class="col-12">
                        <x-admin.form.button type="submit">
                            Save
                        </x-admin.form.button>
                    </div>
                </div>
            </form>
        </x-admin.modal.modal>
        <!-- End Edit Modal -->
    @endforeach

@endsection