{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: customers.blade.php
------------------------------------------------------
Use: The merchant's shop customers: a searchable list of
     buyers with a per-customer purchase summary, and a
     detail modal that lists their orders by id only -
     never a product name, never their installment plan.
=====================================================
--}}

@extends('layouts.merchant')

@section('title', __('front.shop.customers.title'))

@php use App\Support\Format; @endphp

@section('breadcrumb')
    <x-ui.breadcrumb :items="[
        ['label' => __('admin.breadcrumb.home'), 'url' => route('account.shop.index')],
        ['label' => __('front.shop.customers.breadcrumb')],
    ]" />
@endsection

@section('page')
    <div class="mb-5">
        <h1 class="mb-1 text-2xl font-bold tracking-tight">{{ __('front.shop.customers.title') }}</h1>
        <p class="text-sm text-ink-muted">{{ __('front.shop.customers.subtitle') }}</p>
    </div>

    <div class="rounded-2xl border border-line bg-white p-5.5"
         x-data="shopCustomers(@js(['detailBase' => route('account.shop.customers.show', '__ID__'), 'labels' => [
             'error' => __('front.shop.customers.modal.error'),
         ]]))">

        {{-- Header: title + search --}}
        <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
            <h2 class="text-[15px] font-bold">{{ __('front.shop.customers.card_title') }}</h2>
            <form method="GET" action="{{ route('account.shop.customers') }}" class="flex items-center gap-2">
                <div class="flex items-center rounded-[11px] border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3">
                    <svg class="size-4 text-ink-faint" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>
                    <input name="q" value="{{ $search }}" placeholder="{{ __('front.shop.customers.search_placeholder') }}"
                           class="w-40 border-none bg-transparent px-2 py-2.5 text-[13px] outline-none sm:w-52">
                </div>
                <button type="submit" class="rounded-[11px] bg-secondary-500 px-4 py-2.5 text-[13px] font-bold text-white transition hover:bg-secondary-600">{{ __('front.shop.customers.search_action') }}</button>
            </form>
        </div>

        @if ($customers->isEmpty())
            <div class="rounded-[14px] border border-dashed border-[#e3e1ec] bg-[#fbfbfd] px-4 py-12 text-center text-sm text-ink-muted">
                {{ $search !== '' ? __('front.shop.customers.empty_search') : __('front.shop.customers.empty') }}
            </div>
        @else
            <div class="overflow-x-auto rounded-[14px] border border-[#f0eff5]">
                <table class="w-full min-w-[720px] border-collapse text-right text-[13.5px]">
                    <thead>
                        <tr class="bg-[#faf9fd] text-ink-muted">
                            <th class="px-4 py-3.5 font-bold">{{ __('front.shop.customers.col_user') }}</th>
                            <th class="px-4 py-3.5 font-bold">{{ __('front.shop.customers.col_mobile') }}</th>
                            <th class="px-4 py-3.5 font-bold">{{ __('front.shop.customers.col_count') }}</th>
                            <th class="px-4 py-3.5 font-bold">{{ __('front.shop.customers.col_total') }}</th>
                            <th class="px-4 py-3.5 font-bold">{{ __('front.shop.customers.col_last') }}</th>
                            <th class="px-4 py-3.5 font-bold">{{ __('front.shop.customers.col_status') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($customers as $customer)
                            @php $blocked = $customer->blocked_at !== null; @endphp
                            <tr class="cursor-pointer border-t border-[#f0eff5] transition hover:bg-secondary-50/60"
                                x-on:click="open({{ $customer->id }})">
                                <td class="px-4 py-3.5">
                                    <div class="flex items-center gap-2.5">
                                        <span class="flex size-9 shrink-0 items-center justify-center rounded-full bg-secondary-50 text-[12px] font-bold text-secondary-500">{{ mb_substr($customer->first_name, 0, 1) }}.{{ mb_substr($customer->last_name, 0, 1) }}</span>
                                        <span class="font-bold">{{ trim($customer->first_name.' '.$customer->last_name) }}</span>
                                    </div>
                                </td>
                                <td class="px-4 py-3.5 text-ink-soft" dir="ltr">{{ Format::persianDigits($customer->mobile) }}</td>
                                <td class="px-4 py-3.5">{{ Format::persianDigits((string) $customer->orders_count) }} {{ __('front.shop.customers.count_unit') }}</td>
                                <td class="px-4 py-3.5 font-bold" dir="ltr">@toman((int) $customer->total_amount)</td>
                                <td class="px-4 py-3.5 text-ink-soft">@jalali($customer->last_paid_at)</td>
                                <td class="px-4 py-3.5">
                                    <span @class([
                                        'inline-block rounded-2xl px-2.5 py-1 text-[11.5px] font-bold',
                                        'bg-[#e7f7ee] text-green-600' => ! $blocked,
                                        'bg-[#f1f0f5] text-ink-muted' => $blocked,
                                    ])>{{ $blocked ? __('front.shop.customers.status.inactive') : __('front.shop.customers.status.active') }}</span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="mt-4 flex flex-wrap items-center justify-between gap-3">
                <span class="text-[13px] text-ink-faint">
                    {{ __('front.shop.customers.summary', [
                        'from' => Format::persianDigits((string) $customers->firstItem()),
                        'to' => Format::persianDigits((string) $customers->lastItem()),
                        'total' => Format::persianDigits((string) $customers->total()),
                    ]) }}
                </span>
                <div>{{ $customers->links() }}</div>
            </div>
        @endif

        {{-- ===== Customer detail modal ===== --}}
        <template x-teleport="body">
            <div x-show="shown" x-cloak class="fixed inset-0 z-[120] flex items-center justify-center p-4" x-transition.opacity>
                <div class="absolute inset-0 bg-ink/45 backdrop-blur-sm" x-on:click="close()"></div>
                <div class="relative flex max-h-[86vh] w-full max-w-lg flex-col overflow-hidden rounded-[22px] bg-white shadow-2xl" x-on:keydown.escape.window="close()">
                    {{-- Header --}}
                    <div class="flex items-center justify-between gap-3 border-b border-[#ececf2] px-6 py-5">
                        <div class="flex items-center gap-3">
                            <span class="flex size-11 items-center justify-center rounded-full bg-secondary-50 text-[15px] font-bold text-secondary-500" x-text="data.initials"></span>
                            <div>
                                <div class="text-base font-bold" x-text="data.name"></div>
                                <div class="text-[12.5px] text-ink-faint"><span dir="ltr" x-text="data.mobile"></span></div>
                            </div>
                        </div>
                        <button type="button" x-on:click="close()" class="grid size-8 place-items-center rounded-lg bg-[#f2f0fa] text-ink-soft transition hover:bg-[#e8e3f8]">
                            <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
                        </button>
                    </div>

                    <div class="overflow-y-auto px-6 py-5">
                        {{-- Loading / error --}}
                        <div x-show="loading" x-cloak class="py-10 text-center text-sm text-ink-muted">{{ __('front.shop.customers.modal.loading') }}</div>
                        <div x-show="error" x-cloak class="rounded-xl bg-secondary-50 px-4 py-6 text-center text-sm font-bold text-secondary-600" x-text="error"></div>

                        <div x-show="!loading && !error" x-cloak>
                            {{-- Stats --}}
                            <div class="mb-5 grid grid-cols-3 gap-3">
                                <div class="rounded-[13px] border border-[#f0eff5] bg-[#faf9fd] p-3 text-center">
                                    <div class="text-lg font-bold" x-text="data.count"></div>
                                    <div class="mt-1 text-[11px] text-ink-faint">{{ __('front.shop.customers.modal.count') }}</div>
                                </div>
                                <div class="rounded-[13px] border border-[#f0eff5] bg-[#faf9fd] p-3 text-center">
                                    <div class="text-lg font-bold" dir="ltr" x-text="data.total"></div>
                                    <div class="mt-1 text-[11px] text-ink-faint">{{ __('front.shop.customers.modal.total') }}</div>
                                </div>
                                <div class="rounded-[13px] border border-[#f0eff5] bg-[#faf9fd] p-3 text-center">
                                    <div class="pt-0.5 text-[13px] font-bold" x-bind:class="data.blocked ? 'text-ink-muted' : 'text-green-600'" x-text="data.status"></div>
                                    <div class="mt-1.5 text-[11px] text-ink-faint">{{ __('front.shop.customers.modal.status') }}</div>
                                </div>
                            </div>

                            <div class="mb-3 text-[13px] font-bold">{{ __('front.shop.customers.modal.orders_title') }}</div>
                            <div class="flex flex-col gap-3">
                                <template x-for="order in data.orders" :key="order.code">
                                    <a x-bind:href="order.url" target="_blank" rel="noopener" class="block rounded-[14px] border border-[#f0eff5] p-3.5 transition hover:border-secondary-500/40 hover:bg-[#fffafa]">
                                        <div class="flex items-center justify-between gap-2">
                                            <span class="flex items-center gap-2">
                                                <span class="text-[13px] font-bold text-secondary-500" dir="ltr" x-text="order.code"></span>
                                                <span class="rounded-lg px-2 py-0.5 text-[10.5px] font-bold"
                                                      x-bind:class="order.paid ? 'bg-[#e7f7ee] text-green-600' : (order.pending ? 'bg-[#fff5e6] text-amber-600' : 'bg-secondary-50 text-secondary-500')"
                                                      x-text="order.statusLabel"></span>
                                            </span>
                                            <span class="text-[12.5px] text-ink-faint" x-text="order.date"></span>
                                        </div>
                                        <div class="mt-2.5 flex flex-col gap-2 border-t border-[#f5f4f9] pt-2.5">
                                            <div class="flex items-center justify-between">
                                                <span class="text-[11.5px] text-ink-muted">{{ __('front.shop.customers.modal.order_amount') }}</span>
                                                <span class="text-[12.5px] font-bold"><span dir="ltr" x-text="order.amount"></span> {{ __('front.shop.orders.toman') }}</span>
                                            </div>
                                            <div class="flex items-center justify-between" x-show="order.paid">
                                                <span class="text-[11.5px] text-ink-muted">{{ __('front.shop.customers.modal.settled') }}</span>
                                                <span class="text-[12.5px] font-bold text-green-600">+ <span dir="ltr" x-text="order.settled"></span> {{ __('front.shop.orders.toman') }}</span>
                                            </div>
                                        </div>
                                    </a>
                                </template>
                            </div>

                            <p class="mt-4 flex items-start gap-1.5 text-[11.5px] leading-6 text-ink-faint">
                                <svg class="mt-0.5 size-3.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="10" width="18" height="11" rx="2.5"/><path d="M7 10V7a5 5 0 0 1 10 0v3"/></svg>
                                {{ __('front.shop.customers.modal.privacy_note') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </div>
@endsection