@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>
                <p class="fs-14">@lang('Total Count') : <span class="text--dark">{{ $userCount }}</span></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 customerSearch" type="text" value="{{ request()->search }}" placeholder="@lang('Search')">
                    </div>
                    <div class="datepicker-inner d-none d-sm-flex">
                        <input type="text" placeholder="mm dd, yyyy" value="{{ request()->date }}" class="date-picker-input datepicker2a dateFilter">
                    </div>
                </div>
                <div class="flex-align gap-3">
                    <a href="{{ route('admin.customer.add') }}" class="btn btn--base btn--sm">@lang('Add Customer')
                        <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="customer">
                            @include('admin.partials.svg.list_view')

                        </button>
                        <button class="layout-view-action-btn grid-view" data-key="customer">
                            @include('admin.partials.svg.grid_view')
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="customer-card-wrapper">

            @forelse ($users as $user)
                <div class="customer-card customerDetails" data-key="customer" data-customer="{{ $user->id }}">
                    <div class="customer-card-thumb">
                        <img src="{{ getImage(getFilePath('userProfile') . '/' . $user->image, getFileSize('userProfile'), true) }}" alt="customer">
                    </div>
                    <div class="customer-card-content">
                        <div class="customer-card-info">
                            <a href="{{ route('admin.customer.overview', $user->id) }}" class="name">{{ $user->fullname }}</a>
                            <p class="email">{{ $user->email }}</p>
                        </div>
                        <div class="flex-align gap-1 list-view-none">
                            <p class="fs-12">@lang('Total Tickets'): <span class="text--dark">{{ $user->total_tickets }}</span></p>
                            <p class="fs-12">@lang('Open Tickets'): <span class="text--dark">{{ $user->open_tickets }}</span></p>
                        </div>
                        <div class="customer-card-text grid-view-none">
                            @lang('Total Tickets'): <span class="text--dark">{{ $user->total_tickets }}</span>
                        </div>
                        <div class="customer-card-text grid-view-none">
                            @lang('Open Tickets'): <span class="text--dark">{{ $user->open_tickets }}</span>
                        </div>
                        <div class="customer-card-text grid-view-none">
                            @lang('Created Time'): <span class="text--dark">{{ showDateTime($user->created_at) }}</span>
                        </div>
                        <div class="customer-card-action">
                            <a class="action-btn" href="{{ route('admin.ticket.add') }}?user={{ $user->id }}" data-bs-toggle="tooltip" data-bs-placement="top" title="@lang('Add Ticket')">
                                @include('admin.partials.svg.ticket')
                            </a>
                            <a class="action-btn" href="{{ route('admin.customer.edit', $user->id) }}" data-bs-toggle="tooltip" data-bs-placement="top" title="@lang('Edit')">
                                @include('admin.partials.svg.edit')
                            </a>
                        </div>
                    </div>
                </div>
            @empty
                <x-empty-message message="No customer found" />
            @endforelse
        </div>

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

    </div>
@endsection

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

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

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

            function redirectWithParams() {
                var search = $('.customerSearch').val().trim();
                var date = $('.dateFilter').val().trim();
                var params = [];
                if (search) params.push('search=' + encodeURIComponent(search));
                if (date) params.push('date=' + encodeURIComponent(date));
                var url = "{{ route('admin.customer.list') }}";
                if (params.length) url += '?' + params.join('&');
                window.location.href = url;
            }

            $('.customerSearch').on('keydown', function(e) {
                if (e.key === 'Enter') {
                    redirectWithParams();
                }
            });

            $(".dateFilter").flatpickr({
                mode: "range",
                dateFormat: "M j, Y",
                disableMobile: true,
                locale: {
                    rangeSeparator: "-"
                },
                onClose: function() {
                    redirectWithParams();
                }
            });

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

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

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