@extends('admin.layouts.master')

@section('content')
    <div class="customer-list">
        <div class="customer-list-header">
            <div class="flex-align gap-3">
                <p class="fw-medium text--dark">{{ __($pageTitle) }}</p>
            </div>

            <div class="flex-end gap-3 customer-list-header-action">
                <div class="flex-align gap-3 flex-1 justify-content-lg-end">
                    <div class="customer-search">
                        <span class="icon">
                            <i class="fa-solid fa-magnifying-glass"></i>
                        </span>
                        <input class="customer-search-input agentSearch" type="text" value="{{ request()->search }}" placeholder="@lang('Search')">
                    </div>
                </div>
                <div class="flex-align gap-3">
                    <a href="{{ route('admin.agent.add') }}" class="btn btn--base btn--sm">@lang('New Agent')
                        <span class="icon">
                            <i class="fa-solid fa-plus"></i>
                        </span>
                    </a>
                    <div class="layout-view-action-inner">
                        <button class="layout-view-action-btn list-view" data-key="agent">
                            @include('admin.partials.svg.list_view')
                        </button>
                        <button class="layout-view-action-btn grid-view" data-key="agent">
                            @include('admin.partials.svg.grid_view')
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="customer-card-wrapper">
            @forelse ($admins as $admin)
                <div class="customer-card agentDetails" data-key="agent" data-agent="{{ $admin->id }}">
                    <div class="customer-card-thumb">
                        <img src="{{ getImage(getFilePath('adminProfile') . '/' . $admin->image, getFileSize('adminProfile'), true) }}" alt="customer">
                    </div>
                    <div class="customer-card-content">
                        <div class="customer-card-info">
                            <a href="{{ route('admin.agent.overview', $admin->id) }}" class="name">{{ __($admin->name) }}</a>
                            <p class="email">{{ $admin->email }}</p>
                        </div>
                        <div class="flex-align gap-1 list-view-none">
                            <p class="fs-12">@lang('Total Tickets'): <span class="text--dark">{{ $admin->total_tickets }} </span></p>
                            <p class="fs-12">@lang('Open Tickets'): <span class="text--dark">{{ $admin->open_tickets }} </span></p>
                        </div>
                        <div class="customer-card-text grid-view-none">
                            @lang('Total Tickets'): <span class="text--dark">{{ $admin->total_tickets }}</span>
                        </div>
                        <div class="customer-card-text grid-view-none">
                            @lang('Open Tickets'): <span class="text--dark">{{ $admin->open_tickets }}</span>
                        </div>
                        <div class="customer-card-text grid-view-none">
                            @lang('Created Date'): <span class="text--dark">{{ showDateTime($admin->created_at) }}</span>
                        </div>
                        <div class="customer-card-action">
                            <a class="action-btn" href="{{ route('admin.department.list') }}?admin={{ $admin->id }}" data-bs-toggle="tooltip" data-bs-placement="top" title="@lang('Department')">
                                @include('admin.partials.svg.department')
                            </a>

                            @if (auth('admin')->user()->super_admin)
                                <a class="action-btn" href="{{ route('admin.agent.edit', $admin->id) }}" data-bs-toggle="tooltip" data-bs-placement="top" title="@lang('Edit')">
                                    @include('admin.partials.svg.edit')
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            @empty
                <x-empty-message message="No agent found" />
            @endforelse
        </div>

        @if ($admins->hasPages())
            <div class="pagination-wrapper">
                {{ paginateLinks($admins) }}
            </div>
        @endif
    </div>
@endsection

@push('style')
    <style>
        .agentDetails {
            cursor: pointer;
        }

        .pagination-wrapper {
            margin-top: auto;
        }
    </style>
@endpush

@push('script')
    <script>
        (function($) {
            "use strict";

            $('.agentSearch').on('keydown', function(e) {
                if (e.key === 'Enter') {
                    var query = $(this).val().trim();
                    window.location.href = "{{ route('admin.agent.list') }}" + '?search=' + encodeURIComponent(query);
                }
            });

            let route = `{{ route('admin.agent.overview', '') }}`;

            $('.agentDetails').on('click', function(e) {
                if ($(e.target).closest('.action-col').length) {
                    return;
                }
                let agent = $(this).data('agent');
                window.location.href = route + '/' + agent;
            });

        })(jQuery);
    </script>
@endpush
