@extends('backend.representative.layouts.representative-app')

@section('title', 'Managers')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Store Managers</h1>
    </div>
    <div class="ms-auto pageheader-btn">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
            <li class="breadcrumb-item active" aria-current="page">Managers</li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="mb-3 d-flex justify-content-end">
                    <a href="{{ route('portal-representative.managers.create') }}" class="btn btn-primary">
                        <i class="fe fe-user-plus me-1"></i> Add Manager
                    </a>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered text-nowrap border-bottom w-100" id="datatable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Store</th>
                                <th>Status</th>
                                <th>Created</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($managers as $manager)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $manager->name }}</td>
                                    <td>{{ $manager->email }}</td>
                                    <td>{{ $manager->store?->name ?? '—' }}</td>
                                    <td>
                                        <span class="badge bg-{{ $manager->status === 'active' ? 'success' : 'warning' }}">
                                            {{ ucfirst($manager->status) }}
                                        </span>
                                    </td>
                                    <td>{{ $manager->created_at->format('M d, Y') }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center py-4">No managers found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function () {
        if (!$.fn.DataTable.isDataTable('#datatable')) {
            $('#datatable').DataTable({
                order: [],
                lengthMenu: [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, "All"]
                ],
                pagingType: "full_numbers",
                dom: "<'row justify-content-between table-topbar'<'col-md-2 col-sm-4 px-0'l><'col-md-2 col-sm-4 px-0'f>>tipr",
            });
        }
    });
</script>
@endpush