@extends('backEnd.layouts.master')
@section('title', 'My Customers')

@push('styles')
<link rel="stylesheet" href="{{ asset('backEnd/css/customer-insights.css') }}?v={{ @filemtime(public_path('backEnd/css/customer-insights.css')) ?: time() }}">
<style>
.mc-panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}
.mc-tab-all {
    display: inline-block;
    background: #22c55e;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 7px 18px;
    border-radius: 4px;
    text-decoration: none;
}
.mc-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 14px; }
.mc-table thead th {
    background: #f3f4f6;
    border-bottom: 1px solid #d1d5db;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 700;
    color: #374151;
    white-space: nowrap;
}
.mc-table tbody td {
    border-bottom: 1px solid #e5e7eb;
    padding: 14px;
    vertical-align: middle;
}
.mc-table tbody tr:nth-child(even) { background: #f9fafb; }
.mc-table tbody tr:nth-child(odd)  { background: #fff; }
.mc-table tbody tr:hover { background: #f3f4f6 !important; }
.mc-id { font-weight: 800; color: #16a34a; font-size: 15px; text-decoration: none; }
.mc-id:hover { text-decoration: underline; }
.mc-col-name { width: 18%; min-width: 160px; }
.mc-col-phone { width: 16%; min-width: 170px; }
.mc-phone-wrap { display: flex; flex-direction: column; gap: 4px; }
.mc-phone-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mc-phone-mark { display: flex; gap: 6px; font-size: 11px; }
.mc-phone-mark button {
    border: 0; background: none; padding: 0; color: #6b7280; text-decoration: underline;
    cursor: pointer;
}
.mc-phone-mark button:hover { color: #16a34a; }
.mc-phone-mark button.is-no:hover { color: #dc2626; }
.mc-wa-btn-sm {
    width: 26px; height: 26px; font-size: 13px; flex-shrink: 0;
}
.mc-col-last-order { width: 120px; white-space: nowrap; font-size: 13px; color: #374151; }
.mc-last-order-wrap { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.mc-last-order-ago {
    display: inline-block;
    background: #fee2e2;
    color: #dc2626;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    line-height: 1.3;
}
.mc-last-order-date { color: #2563eb; font-weight: 600; text-decoration: none; }
.mc-last-order-date:hover { text-decoration: underline; }
.mc-col-address { width: 28%; min-width: 240px; }
.mc-col-rank .ci-tier-badge-sm { font-size: 10px; padding: 3px 8px; }
.mc-col-orders { width: 95px; text-align: center; white-space: nowrap; }
.mc-orders-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; padding: 4px 10px; border-radius: 999px;
    font-size: 13px; font-weight: 800; text-decoration: none;
}
.mc-orders-count.has-orders { background: #dbeafe; color: #1d4ed8; }
.mc-orders-count.is-zero { background: #f3f4f6; color: #9ca3af; }
.mc-col-status { width: 200px; }
.mc-name { font-weight: 700; color: #111827; font-size: 15px; line-height: 1.4; }
.mc-name-link { font-weight: 700; color: #15803d; font-size: 15px; line-height: 1.4; text-decoration: none; }
.mc-name-link:hover { color: #166534; text-decoration: underline; }
.mc-phone { color: #374151; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.mc-phone:hover { color: #16a34a; }
.mc-loc-main { font-weight: 600; color: #111827; font-size: 14px; margin-bottom: 3px; }
.mc-loc-sub { color: #374151; font-size: 13px; line-height: 1.6; max-width: none; }
.mc-addr-label { font-weight: 700; color: #111827; font-size: 13px; }
.mc-status-top {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 700;
}
.mc-score { color: #374151; min-width: 32px; }
.mc-stat-link { color: #2563eb; text-decoration: none; }
.mc-stat-link:hover { text-decoration: underline; }
.mc-stat-link.is-r { color: #dc2626; }
.mc-courier-badge {
    display: inline-block;
    background: #374151;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    line-height: 1.45;
    white-space: nowrap;
}
.mc-courier-badge a {
    color: #fff;
    text-decoration: none;
}
.mc-courier-badge a:hover {
    text-decoration: underline;
    color: #bbf7d0;
}
.mc-courier-badge .is-off {
    color: #9ca3af;
}
.mc-page .form-label { font-size: 14px; }
.mc-page .form-select,
.mc-page .form-control { font-size: 14px; }
.mc-phone-intl { display: block; font-size: 11px; color: #6b7280; margin-top: 2px; }
.mc-wa-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 999px; font-size: 10px; font-weight: 800;
    margin-left: 4px; vertical-align: middle;
}
.mc-wa-badge.is-yes { background: #dcfce7; color: #166534; }
.mc-wa-badge.is-no { background: #fee2e2; color: #991b1b; }
.mc-wa-badge.is-unknown { background: #f3f4f6; color: #6b7280; }
.mc-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.mc-wa-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 6px; background: #25d366; color: #fff;
    text-decoration: none; border: none; font-size: 14px;
}
.mc-wa-btn:hover { background: #1ebe57; color: #fff; }
.mc-wa-btn:disabled { opacity: .45; cursor: not-allowed; }
.mc-toolbar {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    padding: 12px 14px; background: #f8fafc; border-bottom: 1px solid #e5e7eb;
}
</style>
@endpush

@section('content')
@php
    $formatCourier = function (array $stat): string {
        $d = (int) ($stat['d'] ?? 0);
        $r = (int) ($stat['r'] ?? 0);
        return ($d === 0 && $r === 0) ? '-' : ($d . '-' . $r);
    };

    $courierOrderUrl = function (string $phone, string $courier) {
        return route('admin.orders.shipped', [
            'search'         => $phone,
            'courier_filter' => $courier,
        ]);
    };
@endphp

<div class="container-fluid py-3 mc-page">

    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <div class="d-flex align-items-center gap-3 flex-wrap">
            <h4 class="fw-bold mb-0" style="font-size:1.35rem">My Customers</h4>
            <a href="{{ route('admin.customers.index') }}" class="mc-tab-all">
                All ({{ number_format($totalAll) }})
            </a>
            @if(($filteredCount ?? $totalAll) !== $totalAll)
            <span class="text-muted small">Showing {{ number_format($filteredCount) }} filtered</span>
            @endif
        </div>
        <div class="d-flex gap-2 flex-wrap">
            @can('customers.block')
            <a href="{{ route('admin.customers.blocked') }}" class="btn btn-outline-danger btn-sm px-3">
                <i class="fas fa-user-slash me-1"></i> Blocked Customers
            </a>
            @endcan
            <a href="{{ route('admin.social.whatsapp') }}" class="btn btn-outline-success btn-sm px-3">
                <i class="fab fa-whatsapp me-1"></i> Templates
            </a>
            <button type="button" class="btn btn-success btn-sm px-3" id="btnConvertCustomers">
                <i class="fas fa-sync-alt me-1"></i> Convert Customers
            </button>
        </div>
    </div>

    <div class="card shadow-sm border-0 mb-3">
        <div class="card-body py-3">
            <form method="GET" class="row g-2 align-items-end">
                <div class="col-md-2">
                    <label class="form-label small fw-semibold mb-1">Districts</label>
                    <select name="district" class="form-select form-select-sm" onchange="this.form.upazila.value=''; this.form.submit()">
                        <option value="">All Districts</option>
                        @foreach($districts as $d)
                        <option value="{{ $d }}" {{ ($district ?? '') === $d ? 'selected' : '' }}>{{ $d }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small fw-semibold mb-1">Upazila</label>
                    <select name="upazila" class="form-select form-select-sm">
                        <option value="">All Upazila</option>
                        @foreach($upazilas as $u)
                        <option value="{{ $u }}" {{ ($upazila ?? '') === $u ? 'selected' : '' }}>{{ $u }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small fw-semibold mb-1">WhatsApp</label>
                    <select name="whatsapp" class="form-select form-select-sm" onchange="this.form.submit()">
                        <option value="">All</option>
                        <option value="yes" {{ ($whatsapp ?? '') === 'yes' ? 'selected' : '' }}>WhatsApp আছে (W)</option>
                        <option value="no" {{ ($whatsapp ?? '') === 'no' ? 'selected' : '' }}>WhatsApp নেই (✕)</option>
                        <option value="unknown" {{ ($whatsapp ?? '') === 'unknown' ? 'selected' : '' }}>Mark হয়নি (?)</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small fw-semibold mb-1">Customer Rank</label>
                    <select name="tier_filter" class="form-select form-select-sm" onchange="this.form.submit()">
                        <option value="">All Ranks</option>
                        @foreach($insightsSettings['tiers'] ?? [] as $tier)
                        <option value="{{ $tier['key'] }}" {{ ($tierFilter ?? '') === ($tier['key'] ?? '') ? 'selected' : '' }}>{{ $tier['name'] ?? ucfirst($tier['key']) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small fw-semibold mb-1">Total Orders</label>
                    <select name="orders_filter" class="form-select form-select-sm" onchange="this.form.submit()">
                        <option value="">All</option>
                        <option value="0" {{ ($ordersFilter ?? '') === '0' ? 'selected' : '' }}>No order (0)</option>
                        @foreach([1, 2, 3, 4, 5] as $n)
                        <option value="{{ $n }}" {{ ($ordersFilter ?? '') === (string) $n ? 'selected' : '' }}>{{ $n }} {{ $n === 1 ? 'order' : 'orders' }}</option>
                        @endforeach
                        <option value="5+" {{ ($ordersFilter ?? '') === '5+' ? 'selected' : '' }}>5+ orders</option>
                        <option value="10+" {{ ($ordersFilter ?? '') === '10+' ? 'selected' : '' }}>10+ orders</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label small fw-semibold mb-1">Search</label>
                    <div class="d-flex gap-1">
                        <div class="live-search-wrap flex-grow-1">
                            <input type="text" name="search"
                                   class="form-control form-control-sm live-search-input"
                                   value="{{ $search ?? '' }}"
                                   placeholder="Name, phone, email…"
                                   autocomplete="off">
                        </div>
                        <button type="submit" class="btn btn-success btn-sm px-3"><i class="fas fa-search"></i></button>
                    </div>
                </div>
                <div class="col-auto">
                    @if(request()->hasAny(['district','upazila','search','q','whatsapp','orders_filter','tier_filter']))
                    <a href="{{ route('admin.customers.index') }}" class="btn btn-secondary btn-sm px-3 ms-1">Reset</a>
                    @endif
                </div>
            </form>
        </div>
    </div>

    <div class="mc-panel">
        <div class="mc-toolbar">
            <select id="waTemplateSelect" class="form-select form-select-sm" style="width:240px">
                <option value="">— WhatsApp Template —</option>
                @foreach($waTemplates ?? [] as $groupKey => $group)
                    @if(!empty($group['options']))
                    <optgroup label="{{ $group['label'] ?? ucfirst($groupKey) }}">
                        @foreach($group['options'] as $key => $label)
                        <option value="{{ $key }}">{{ $label }}</option>
                        @endforeach
                    </optgroup>
                    @endif
                @endforeach
            </select>
            <button type="button" class="btn btn-success btn-sm" id="btnBulkWhatsApp" title="Selected customers">
                <i class="fab fa-whatsapp me-1"></i> Send Offer
            </button>
            <div class="vr mx-1 d-none d-md-block"></div>
            <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#exportCustomersModal">
                <i class="fas fa-download me-1"></i> Export
            </button>
            <small class="text-muted ms-auto d-none d-lg-inline">Mark করা হলে আছে/নেই লুকায় · Filter + Export = search result</small>
        </div>
        <div id="liveSearchResults">
        <div class="table-responsive">
            <table class="mc-table">
                <thead>
                    <tr>
                        <th style="width:36px"><input type="checkbox" id="checkAllCustomers"></th>
                        <th style="width:70px">ID</th>
                        <th class="mc-col-name">Customer Name</th>
                        <th class="mc-col-phone">Phone Number</th>
                        <th class="mc-col-last-order">Last Order</th>
                        <th class="mc-col-address">Address</th>
                        <th class="mc-col-rank">Customer Rank</th>
                        <th class="mc-col-orders">Total Order</th>
                        <th class="mc-col-status">Status</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($customers as $customer)
                    @php
                        $phone = $customer->phone;
                        $pStat = $phoneStats[$phone] ?? ['delivered'=>0,'returned'=>0,'total'=>0,'score'=>0];
                        $cStat = $courierStats[$phone] ?? ['steadfast'=>['d'=>0,'r'=>0],'pathao'=>['d'=>0,'r'=>0],'redx'=>['d'=>0,'r'=>0]];
                        $hint  = $orderHints[$phone] ?? [];
                        $lastOrder = $lastOrderDates[$phone] ?? null;

                        $districtName = $customer->district ?: ($hint['district'] ?? '');
                        $upazilaName  = $customer->upazila ?: ($hint['upazila'] ?? '');
                        $addressLine  = $customer->address ?: ($hint['address'] ?? '');

                        $locMain = trim(
                            ($districtName ?: '') .
                            ($districtName && $upazilaName ? ' => ' : '') .
                            ($upazilaName ?: '')
                        );

                        $score = (int) ($pStat['score'] ?? 0);
                        $delivered = (int) ($pStat['delivered'] ?? 0);
                        $returned  = (int) ($pStat['returned'] ?? 0);
                        $phoneIntl = $phone ? \App\Services\WhatsAppService::toInternational($phone) : null;
                        $waLinkDefault = $phone ? \App\Services\WhatsAppService::buildCustomerLink($customer, 'offer_promo') : null;

                        $courierParts = [];
                        if ($steadfastOn) {
                            $label = 'S:' . $formatCourier($cStat['steadfast']);
                            $courierParts[] = '<a href="' . e($courierOrderUrl($phone, 'steadfast')) . '" title="Steadfast orders">' . $label . '</a>';
                        }
                        if ($pathaoOn) {
                            $label = 'P:' . $formatCourier($cStat['pathao']);
                            $courierParts[] = '<a href="' . e($courierOrderUrl($phone, 'pathao')) . '" title="Pathao orders">' . $label . '</a>';
                        }
                        if ($redxOn) {
                            $label = 'R:' . $formatCourier($cStat['redx']);
                            $courierParts[] = '<a href="' . e($courierOrderUrl($phone, 'redx')) . '" title="RedX orders">' . $label . '</a>';
                        }
                        if (empty($courierParts)) {
                            $courierParts[] = '<span class="is-off">No courier API enabled</span>';
                        }

                        $isBlocked = ! $customer->status || isset($blockedMap[$phone]);
                        $totalOrders = (int) ($pStat['total'] ?? $customer->orders_count ?? 0);
                        $customerTier = \App\Services\CustomerInsightsSettingsService::resolveTier(
                            (float) ($pStat['delivered_spend'] ?? 0),
                            $totalOrders,
                            $customer,
                            $insightsSettings ?? null
                        );
                    @endphp
                    <tr class="{{ $isBlocked ? 'table-danger' : '' }}">
                        <td><input type="checkbox" class="row-check-customer" value="{{ $customer->id }}"></td>
                        <td>
                            <a href="{{ route('admin.customers.show', $customer->id) }}" class="mc-id">{{ $customer->id }}</a>
                        </td>
                        <td class="mc-col-name">
                            <div class="mc-name">
                                <a href="{{ route('admin.customers.show', $customer->id) }}" class="mc-name-link" title="Customer Insights">{{ $customer->name }}</a>
                                @if($isBlocked)
                                <span class="badge bg-danger ms-1">Blocked</span>
                                @endif
                            </div>
                        </td>
                        <td class="mc-col-phone">
                            <div class="mc-phone-wrap">
                                <div class="mc-phone-line">
                                    @if($phoneIntl)
                                    <a href="tel:{{ $phoneIntl }}" class="mc-phone">{{ $phoneIntl }}</a>
                                    @if($customer->has_whatsapp === true)
                                    <span class="mc-wa-badge is-yes" title="WhatsApp আছে (saved)">W</span>
                                    @elseif($customer->has_whatsapp === false)
                                    <span class="mc-wa-badge is-no" title="WhatsApp নেই (saved)">✕</span>
                                    @else
                                    <span class="mc-wa-badge is-unknown" title="WhatsApp mark হয়নি">?</span>
                                    @endif
                                    @if($waLinkDefault)
                                    <button type="button"
                                            class="mc-wa-btn mc-wa-btn-sm btn-send-wa"
                                            data-customer-id="{{ $customer->id }}"
                                            title="WhatsApp message">
                                        <i class="fab fa-whatsapp"></i>
                                    </button>
                                    @endif
                                    @elseif($phone)
                                    <span class="mc-phone text-muted">{{ $phone }}</span>
                                    @else
                                    <span class="mc-phone text-muted">—</span>
                                    @endif
                                </div>
                                @if($waLinkDefault && $customer->has_whatsapp === null)
                                <div class="mc-phone-mark">
                                    <button type="button" class="btn-mark-wa"
                                            data-customer-id="{{ $customer->id }}" data-status="yes">আছে</button>
                                    <span class="text-muted">·</span>
                                    <button type="button" class="btn-mark-wa is-no"
                                            data-customer-id="{{ $customer->id }}" data-status="no">নেই</button>
                                </div>
                                @endif
                            </div>
                        </td>
                        <td class="mc-col-last-order">
                            @if(!empty($lastOrder['last_order_at']))
                            @php
                                $lastAt = \Carbon\Carbon::parse($lastOrder['last_order_at']);
                                $daysAgo = $lastAt->copy()->startOfDay()->diffInDays(now()->startOfDay());
                                $agoLabel = $daysAgo === 0 ? 'আজ' : ($daysAgo . ' din age');
                            @endphp
                            <div class="mc-last-order-wrap">
                                <span class="mc-last-order-ago">{{ $agoLabel }}</span>
                                @if(!empty($lastOrder['order_id']))
                                <a href="{{ route('admin.orders.show', $lastOrder['order_id']) }}" class="mc-last-order-date" title="Order #{{ $lastOrder['order_id'] }}">
                                    {{ $lastAt->format('d M Y') }}
                                </a>
                                @else
                                <span class="mc-last-order-date" style="color:#374151">{{ $lastAt->format('d M Y') }}</span>
                                @endif
                            </div>
                            @else
                            <span class="text-muted">—</span>
                            @endif
                        </td>
                        <td class="mc-col-address">
                            @if($locMain)
                            <div class="mc-loc-main">{{ $locMain }}</div>
                            @endif
                            @if($addressLine)
                            <div class="mc-loc-sub">
                                <span class="mc-addr-label">Address:</span> {{ $addressLine }}
                            </div>
                            @elseif(!$locMain)
                            <div class="mc-loc-sub">—</div>
                            @endif
                        </td>
                        <td class="mc-col-rank">
                            @include('backEnd.customer.partials.tier-badge', ['tier' => $customerTier, 'sm' => true])
                        </td>
                        <td class="mc-col-orders">
                            @if($totalOrders > 0 && $phone)
                            <a href="{{ route('admin.orders.index', ['search' => $phone]) }}"
                               class="mc-orders-count has-orders"
                               title="View orders">{{ $totalOrders }}</a>
                            @else
                            <span class="mc-orders-count is-zero">0</span>
                            @endif
                        </td>
                        <td class="mc-col-status">
                            <div class="mc-status-top">
                                <span class="mc-score">{{ $score }}%</span>
                                <a href="{{ route('admin.orders.delivered', ['search' => $phone]) }}" class="mc-stat-link" title="Delivered orders">
                                    D:{{ $delivered > 0 ? $delivered : '' }}
                                </a>
                                <a href="{{ route('admin.orders.returned', ['search' => $phone]) }}" class="mc-stat-link is-r" title="Returned / cancelled orders">
                                    R:{{ $returned > 0 ? $returned : '' }}
                                </a>
                            </div>
                            <span class="mc-courier-badge">{!! implode(', ', $courierParts) !!}</span>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="text-center py-5 text-muted">
                            <i class="fas fa-users fa-2x d-block mb-2 opacity-50"></i>
                            No customers found.
                            @if(!($search ?? '') && !($district ?? '') && !($whatsapp ?? ''))
                            <div class="mt-2"><button type="button" class="btn btn-sm btn-success" onclick="document.getElementById('btnConvertCustomers').click()">
                                <i class="fas fa-sync-alt me-1"></i> Convert from Orders
                            </button></div>
                            @endif
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($customers->hasPages())
        <div class="p-3">{{ $customers->links() }}</div>
        @endif
        </div>
    </div>
</div>

<div class="modal fade" id="exportCustomersModal" tabindex="-1" aria-labelledby="exportCustomersModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exportCustomersModalLabel">Export Customers</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label fw-semibold">Export scope</label>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="exportScope" id="exportScopeSelected" value="selected">
                        <label class="form-check-label" for="exportScopeSelected">Selected rows only</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="exportScope" id="exportScopeFiltered" value="filtered" checked>
                        <label class="form-check-label" for="exportScopeFiltered">Current search/filter result ({{ number_format($filteredCount ?? 0) }})</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="exportScope" id="exportScopeAll" value="all">
                        <label class="form-check-label" for="exportScopeAll">All customers ({{ number_format($totalAll ?? 0) }})</label>
                    </div>
                </div>
                <div class="mb-2">
                    <label class="form-label fw-semibold">Columns</label>
                    <div class="row g-2">
                        @foreach($exportColumns ?? [] as $key => $meta)
                        <div class="col-6">
                            <div class="form-check">
                                <input class="form-check-input export-column-check" type="checkbox"
                                       value="{{ $key }}" id="exportCol{{ $key }}"
                                       @checked($meta['default'] ?? false)>
                                <label class="form-check-label" for="exportCol{{ $key }}">{{ $meta['label'] }}</label>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                <small class="text-muted">Phone column always exports as 8801xxxxxxxx format.</small>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-outline-secondary btn-sm" id="btnExportCsv">
                    <i class="fas fa-file-csv me-1"></i> CSV
                </button>
                <button type="button" class="btn btn-success btn-sm" id="btnExportExcel">
                    <i class="fas fa-file-excel me-1"></i> Excel
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
@php
    $exportFilterQuery = request()->only('district', 'upazila', 'search', 'q', 'whatsapp', 'orders_filter', 'tier_filter');
@endphp
<script>
const waLinkUrl = @json(route('admin.customers.whatsapp-link'));
const markWaUrl = @json(url('/admin/customers'));
const exportCustomersUrl = @json(route('admin.customers.export'));
const exportFilterQuery = @json($exportFilterQuery);

function buildExportUrl(format) {
    const scope = document.querySelector('input[name="exportScope"]:checked')?.value || 'filtered';
    const columns = [...document.querySelectorAll('.export-column-check:checked')].map(el => el.value);

    if (!columns.length) {
        alert('কমপক্ষে একটা column select করুন।');
        return null;
    }

    if (scope === 'selected') {
        const ids = getSelectedCustomerIds();
        if (!ids.length) {
            alert('Selected export-এর জন্য customer select করুন।');
            return null;
        }
    }

    const url = new URL(exportCustomersUrl, window.location.origin);
    url.searchParams.set('format', format);
    url.searchParams.set('scope', scope);

    if (scope === 'selected') {
        url.searchParams.set('ids', getSelectedCustomerIds().join(','));
    } else if (scope === 'filtered') {
        Object.entries(exportFilterQuery).forEach(([key, value]) => {
            if (value !== null && value !== undefined && value !== '') {
                url.searchParams.set(key, value);
            }
        });
    }

    columns.forEach(col => url.searchParams.append('columns[]', col));
    return url.toString();
}

document.getElementById('btnExportCsv')?.addEventListener('click', function () {
    const url = buildExportUrl('csv');
    if (url) window.location.href = url;
});

document.getElementById('btnExportExcel')?.addEventListener('click', function () {
    const url = buildExportUrl('excel');
    if (url) window.location.href = url;
});

function markWhatsAppStatus(customerId, status) {
    return fetch(`${markWaUrl}/${customerId}/mark-whatsapp`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
            'Accept': 'application/json',
        },
        body: JSON.stringify({ status: status }),
    }).then(r => r.json());
}

document.querySelectorAll('.btn-mark-wa').forEach(btn => {
    btn.addEventListener('click', function () {
        markWhatsAppStatus(this.dataset.customerId, this.dataset.status)
            .then(data => {
                if (data.success) {
                    if (typeof toastr !== 'undefined') toastr.success(data.message);
                    setTimeout(() => location.reload(), 400);
                } else {
                    alert(data.message || 'Update failed');
                }
            })
            .catch(() => alert('Request failed'));
    });
});

function getSelectedCustomerIds() {
    return [...document.querySelectorAll('.row-check-customer:checked')].map(cb => cb.value);
}

function openWhatsAppLink(customerId, templateKey) {
    const url = new URL(waLinkUrl, window.location.origin);
    url.searchParams.set('customer_id', customerId);
    url.searchParams.set('template', templateKey || document.getElementById('waTemplateSelect')?.value || 'offer_promo');

    return fetch(url.toString(), {
        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
    })
        .then(r => r.json())
        .then(data => {
            if (!data.success || !data.url) {
                throw new Error(data.message || 'WhatsApp link failed');
            }
            window.open(data.url, '_blank');
            return data;
        });
}

document.querySelectorAll('.btn-send-wa').forEach(btn => {
    btn.addEventListener('click', function () {
        const template = document.getElementById('waTemplateSelect')?.value || 'offer_promo';
        openWhatsAppLink(this.dataset.customerId, template).catch(err => alert(err.message));
    });
});

document.getElementById('btnBulkWhatsApp')?.addEventListener('click', function () {
    const ids = getSelectedCustomerIds();
    const template = document.getElementById('waTemplateSelect')?.value;
    if (!template) {
        alert('আগে WhatsApp template select করুন।');
        return;
    }
    if (!ids.length) {
        alert('কমপক্ষে একজন customer select করুন।');
        return;
    }
    if (!confirm(ids.length + ' জন customer-এ WhatsApp message পাঠাবেন?')) return;

    let i = 0;
    const sendNext = () => {
        if (i >= ids.length) return;
        openWhatsAppLink(ids[i], template)
            .catch(() => {})
            .finally(() => { i++; setTimeout(sendNext, 600); });
    };
    sendNext();
});

document.getElementById('checkAllCustomers')?.addEventListener('change', function() {
    document.querySelectorAll('.row-check-customer').forEach(cb => cb.checked = this.checked);
});

document.getElementById('btnConvertCustomers')?.addEventListener('click', function() {
    const btn = this;
    if (!confirm('Orders থেকে customer list sync করবেন?')) return;
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Converting…';

    fetch('{{ route('admin.customers.convert') }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
            'Accept': 'application/json',
        },
    })
    .then(r => r.json())
    .then(d => {
        if (d.success) {
            if (typeof toastr !== 'undefined') toastr.success(d.message);
            setTimeout(() => location.reload(), 800);
        } else {
            alert(d.message || 'Convert failed');
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-sync-alt me-1"></i> Convert Customers';
        }
    })
    .catch(() => {
        alert('Convert request failed.');
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-sync-alt me-1"></i> Convert Customers';
    });
});
</script>
@endpush