{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: index.blade.php
------------------------------------------------------
Use: Admin list of live shops with the merchant-fee
     management behind each row's detail page.
=====================================================
--}}

@extends('layouts.admin')

@section('title', __('admin.shops_manage.title'))

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

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

    <x-ui.info-box class="mb-5">
        {{ __('admin.shops_manage.info') }}
    </x-ui.info-box>

    <div class="rounded-2xl border border-line bg-white p-5">
        <div class="mb-4.5 flex flex-wrap items-center justify-between gap-3.5">
            <div class="inline-flex flex-wrap gap-0.5 rounded-xl bg-[#f2f0fa] p-1">
                @foreach (__('admin.shops_manage.filters') as $key => $label)
                    <a href="{{ route('admin.shops.index', array_filter(['status' => $key === 'all' ? null : $key, 'q' => $search ?: null])) }}"
                       @class([
                           'rounded-[9px] px-4 py-2 text-[13px] font-bold transition',
                           'bg-white text-primary-600 shadow-sm' => $status === $key,
                           'text-ink-muted hover:text-primary-600' => $status !== $key,
                       ])>{{ $label }}</a>
                @endforeach
            </div>

            <form method="GET" action="{{ route('admin.shops.index') }}" class="flex items-center rounded-[11px] border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3 transition focus-within:border-primary-600 focus-within:bg-white">
                @if ($status !== 'all')
                    <input type="hidden" name="status" value="{{ $status }}">
                @endif
                <svg class="size-4 shrink-0 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 type="text" name="q" value="{{ $search }}" placeholder="{{ __('admin.shops_manage.search_placeholder') }}" class="w-44 border-none bg-transparent px-2 py-2.5 text-[13px] outline-none placeholder:text-ink-faint sm:w-56">
            </form>
        </div>

        <div class="overflow-x-auto rounded-[14px] border border-[#f0eff5]">
            <table class="w-full min-w-[760px] border-collapse text-right text-[13.5px]">
                <thead>
                    <tr class="bg-[#faf9fd] text-ink-muted">
                        <th class="px-4.5 py-3.5 font-bold">{{ __('admin.shops_manage.columns.shop') }}</th>
                        <th class="px-4.5 py-3.5 font-bold">{{ __('admin.shops_manage.columns.slug') }}</th>
                        <th class="px-4.5 py-3.5 font-bold">{{ __('admin.shops_manage.columns.sales') }}</th>
                        <th class="px-4.5 py-3.5 font-bold">{{ __('admin.shops_manage.columns.customers') }}</th>
                        <th class="px-4.5 py-3.5 font-bold">{{ __('admin.shops_manage.columns.fee') }}</th>
                        <th class="px-4.5 py-3.5 font-bold">{{ __('admin.shops_manage.columns.status') }}</th>
                        <th class="px-4.5 py-3.5 text-center font-bold">{{ __('admin.shops_manage.columns.actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($shops as $shop)
                        <tr class="border-t border-[#f0eff5] transition hover:bg-[#faf9fd]">
                            <td class="px-4.5 py-3.5">
                                <div class="flex items-center gap-3">
                                    <span class="flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-[10px] bg-[#efeafb] text-[11px] font-bold text-primary-600">
                                        @if ($shop->logo_path)
                                            <img src="{{ route('media.shop-logo', $shop) }}" alt="{{ $shop->name }}" class="size-full object-cover">
                                        @else
                                            {{ mb_substr($shop->name, 0, 2) }}
                                        @endif
                                    </span>
                                    <div class="min-w-0">
                                        <span class="block font-bold">{{ $shop->name }}</span>
                                        @if ($shop->province)
                                            <span class="block text-[11.5px] text-ink-faint">{{ $shop->province }}@if ($shop->city)، {{ $shop->city }}@endif</span>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td class="px-4.5 py-3.5 text-ink-soft" dir="ltr">{{ $shop->slug }}</td>
                            <td class="px-4.5 py-3.5 font-bold" dir="ltr">@toman((int) $shop->sales_total)</td>
                            <td class="px-4.5 py-3.5 text-ink-soft">@fa((int) $shop->customers_count)</td>
                            <td class="px-4.5 py-3.5 text-[12.5px] text-ink-soft">{{ __('admin.shops_manage.fee_display', [
                                'percent' => \App\Support\Format::persianDigits(\App\Support\Format::percentFromBp($shop->fee_percent)),
                                'cap' => \App\Support\Format::tomanFa((int) $shop->fee_cap),
                            ]) }}</td>
                            <td class="px-4.5 py-3.5">
                                @if ($shop->isApproved())
                                    <span class="rounded-2xl bg-[#e7f7ee] px-2.5 py-1 text-xs font-bold text-green-600">{{ __('admin.shops_manage.statuses.approved') }}</span>
                                @else
                                    <span class="rounded-2xl bg-[#f1f0f5] px-2.5 py-1 text-xs font-bold text-ink-muted">{{ __('admin.shops_manage.statuses.rejected') }}</span>
                                @endif
                            </td>
                            <td class="px-4.5 py-3.5 text-center">
                                <a href="{{ route('admin.shops.show', $shop) }}" class="inline-flex rounded-lg bg-[#f2f0fa] px-4 py-2 text-[12.5px] font-bold text-primary-600 transition hover:bg-[#e8e3f8]">{{ __('admin.shops_manage.detail') }}</a>
                            </td>
                        </tr>
                    @empty
                        <tr class="border-t border-[#f0eff5]">
                            <td colspan="7" class="px-4.5 py-12 text-center text-sm text-ink-muted">{{ __('admin.shops_manage.empty') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection