@extends('backend.layouts.app')

@section('content')

<style>
/* ── Customer List Better Design ── */
.cust-wrapper { padding: 4px 0; }

/* Page header */
.cust-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}
.cust-page-header h1 {
    font-size: 20px;
    font-weight: 700;
    color: #1a202c;
    margin: 0;
}
.cust-page-header h1 span {
    background: linear-gradient(135deg, #f05a7e, #f6845a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Card */
.cust-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    border: none;
    overflow: hidden;
}
.cust-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    background: #fff;
}
.cust-card-header h5 {
    font-size: 15px;
    font-weight: 700;
    color: #1a202c;
    margin: 0;
}
.cust-search {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 50px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    outline: none !important;
    transition: border-color .2s !important;
    min-width: 220px;
}
.cust-search:focus { border-color: #f05a7e !important; }

/* Table */
.cust-table { width: 100%; border-collapse: collapse; }
.cust-table thead th {
    background: #f8fafc;
    padding: 11px 14px;
    font-size: 11px;
    font-weight: 700;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: .6px;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
}
.cust-table tbody tr {
    border-bottom: 1px solid #f7f7f7;
    transition: background .15s;
}
.cust-table tbody tr:hover { background: #fef8f9; }
.cust-table tbody td {
    padding: 12px 14px;
    font-size: 13px;
    color: #2d3748;
    vertical-align: middle;
}

/* Avatar */
.cust-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #fff;
    flex-shrink: 0;
}

/* Status badges */
.cust-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
}
.cust-badge-followup   { background: #fef0f4; color: #f05a7e; }
.cust-badge-win        { background: #eaf3de; color: #3b6d11; }
.cust-badge-notinterest{ background: #fcebeb; color: #a32d2d; }
.cust-badge-notlifting { background: #faeeda; color: #854f0b; }
.cust-badge-notworking { background: #f1efe8; color: #5f5e5a; }
.cust-badge-none       { background: #f1f5f9; color: #718096; }

/* Phone button */
.cust-phone-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e8faf6;
    color: #0f6e56;
    border-radius: 50px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background .15s;
}
.cust-phone-btn:hover { background: #9fe1cb; }

/* Action buttons */
.cust-action-btn {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all .15s;
    margin: 1px;
}
.cust-action-primary { background: #ebf8ff; color: #2b6cb0; }
.cust-action-primary:hover { background: #bee3f8; }
.cust-action-danger { background: #fcebeb; color: #a32d2d; }
.cust-action-danger:hover { background: #f7c1c1; }
.cust-action-success { background: #eaf3de; color: #3b6d11; }
.cust-action-success:hover { background: #c0dd97; }

/* Seller badge */
.cust-seller-badge {
    display: inline-flex; align-items: center; gap: 4px;
    background: #fef0f4; color: #f05a7e;
    border-radius: 50px; padding: 3px 8px;
    font-size: 11px; font-weight: 700;
}

/* Banned indicator */
.cust-banned { opacity: .5; }

/* ── Responsive ── */
@media (max-width: 991px) {
    .cust-table thead { display: none; }
    .cust-table tbody tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 12px;
        background: #fff;
    }
    .cust-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 7px 8px;
        border-bottom: 1px solid #f7f7f7;
        font-size: 13px;
    }
    .cust-table tbody td:last-child { border-bottom: none; }
    .cust-table tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 11px;
        color: #718096;
        text-transform: uppercase;
        letter-spacing: .5px;
        flex-shrink: 0;
        margin-right: 10px;
    }
    .cust-card-header { flex-direction: column; align-items: flex-start; }
    .cust-search { min-width: 100%; }
}

.btn-pink {
    background: linear-gradient(135deg, #f05a7e, #f6845a);
    color: #fff !important;
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
}
.btn-disabled {
    background-color: #e2e8f0 !important;
    color: #a0aec0 !important;
    pointer-events: none;
    cursor: not-allowed;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12px;
}
</style>

<div class="cust-wrapper">
<div class="cust-page-header">
    <h1>All <span>Customers</span></h1>
</div>

<!-- Messages etc. -->
<div class="cust-card">
    <form id="sort_customers" action="" method="GET">
        <div class="cust-card-header">
            <div class="d-flex align-items-center gap-10">
                <h5>{{ translate('Customers') }}</h5>
                @php
                    $incompleteCount = \App\Models\User::where('user_type','customer')
                        ->where(function($q){ $q->whereNull('name')->orWhere('name',''); })
                        ->count();
                @endphp
                @if($incompleteCount > 0)
                    <span style="font-size:11px;background:#faeeda;color:#854f0b;padding:3px 10px;border-radius:20px;font-weight:700;">
                        ⚠️ {{ $incompleteCount }} Incomplete
                    </span>
                @endif
                @if(auth()->user()->user_type == 'staff')
                    @if ($hasIncompleteLead || !$hasUnassignedLead)
                        <a href="javascript:void(0);" class="btn btn-disabled btn-sm">My Lead</a>
                    @else
                        <a href="{{ route('customer.popupleadsave') }}" class="btn btn-pink btn-sm">My Lead</a>
                    @endif
                @endif
            </div>
            <div class="d-flex align-items-center gap-10">
                @can('delete_customer')
                    <div class="dropdown">
                        <button class="btn border dropdown-toggle btn-sm" type="button" data-toggle="dropdown">
                            {{ translate('Bulk Action') }}
                        </button>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="#" onclick="bulk_delete()">{{ translate('Delete selection') }}</a>
                        </div>
                    </div>
                @endcan
            </div>
        </div>

        {{-- Filters Row --}}
        <div style="padding:12px 20px;border-bottom:1px solid #f0f0f0;background:#fafafa;display:flex;flex-wrap:wrap;gap:10px;align-items:center;">

            {{-- Name/Email/Phone Search --}}
            <div style="position:relative;flex:1;min-width:200px;display:flex;gap:6px;">
                <div style="position:relative;flex:1;">
                    <i class="las la-search" style="position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#a0aec0;font-size:14px;"></i>
                    <input type="text" class="cust-search" style="padding-left:34px;width:100%;" id="search" name="search"
                        value="{{ request('search') }}"
                        placeholder="Search name, email, phone, ID..."
                        onkeypress="if(event.key==='Enter'){event.preventDefault();$('#sort_customers').submit();}">
                </div>
                <button type="submit" style="background:linear-gradient(135deg,#f05a7e,#f6845a);color:#fff;border:none;border-radius:50px;padding:8px 16px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;">
                    🔍 Search
                </button>
            </div>

            {{-- Followup Status Filter --}}
            <select class="cust-search" name="followup_status" onchange="sort_customers()" style="min-width:150px;border-radius:50px!important;padding:8px 14px!important;">
                <option value="">💬 All Followup</option>
                <option value="followup"     {{ request('followup_status') == 'followup'     ? 'selected' : '' }}>Followup</option>
                <option value="win"          {{ request('followup_status') == 'win'          ? 'selected' : '' }}>✅ Win</option>
                <option value="not_interest" {{ request('followup_status') == 'not_interest' ? 'selected' : '' }}>❌ Not Interested</option>
                <option value="not_lifting"  {{ request('followup_status') == 'not_lifting'  ? 'selected' : '' }}>📵 Not Lifting</option>
                <option value="not_working"  {{ request('followup_status') == 'not_working'  ? 'selected' : '' }}>🔇 Not Working</option>
                <option value="not_connected"{{ request('followup_status') == 'not_connected'? 'selected' : '' }}>— Not Connected</option>
            </select>

            {{-- Incomplete Filter --}}
            <select class="cust-search" name="profile_status" onchange="sort_customers()" style="min-width:150px;border-radius:50px!important;padding:8px 14px!important;">
                <option value="">👤 All Profiles</option>
                <option value="complete"   {{ request('profile_status') == 'complete'   ? 'selected' : '' }}>✅ Complete</option>
                <option value="incomplete" {{ request('profile_status') == 'incomplete' ? 'selected' : '' }}>⚠️ Incomplete</option>
                <option value="otp_pending"{{ request('profile_status') == 'otp_pending'? 'selected' : '' }}>⏳ OTP Pending</option>
            </select>

            {{-- Referred Filter --}}
            <select class="cust-search" name="referred" onchange="sort_customers()" style="min-width:140px;border-radius:50px!important;padding:8px 14px!important;">
                <option value="">🔗 All Referrals</option>
                <option value="referred"     {{ request('referred') == 'referred'     ? 'selected' : '' }}>Referred</option>
                <option value="not_referred" {{ request('referred') == 'not_referred' ? 'selected' : '' }}>Not Referred</option>
            </select>

            {{-- Reward Points Filter --}}
            <select class="cust-search" name="reward_points" onchange="sort_customers()" style="min-width:150px;border-radius:50px!important;padding:8px 14px!important;">
                <option value="">⭐ Reward Points</option>
                <option value="has_points"  {{ request('reward_points') == 'has_points'  ? 'selected' : '' }}>Has Points</option>
                <option value="no_points"   {{ request('reward_points') == 'no_points'   ? 'selected' : '' }}>No Points</option>
                <option value="100"         {{ request('reward_points') == '100'         ? 'selected' : '' }}>100+ Points</option>
                <option value="500"         {{ request('reward_points') == '500'         ? 'selected' : '' }}>500+ Points</option>
                <option value="1000"        {{ request('reward_points') == '1000'        ? 'selected' : '' }}>1000+ Points</option>
            </select>

            {{-- Wallet Sort --}}
            <select class="cust-search" name="wallet_sort" onchange="sort_customers()" style="min-width:160px;border-radius:50px!important;padding:8px 14px!important;">
                <option value="">💰 Wallet Sort</option>
                <option value="high" {{ request('wallet_sort') == 'high' ? 'selected' : '' }}>💰 High → Low</option>
                <option value="low"  {{ request('wallet_sort') == 'low'  ? 'selected' : '' }}>💰 Low → High</option>
                <option value="has_balance"  {{ request('wallet_sort') == 'has_balance'  ? 'selected' : '' }}>Has Balance</option>
                <option value="zero_balance" {{ request('wallet_sort') == 'zero_balance' ? 'selected' : '' }}>Zero Balance</option>
            </select>

            {{-- Date Range --}}
            <input type="date" class="cust-search" name="date_from"
                value="{{ request('date_from') }}"
                style="min-width:130px;border-radius:50px!important;padding:8px 14px!important;"
                title="From date"
                onchange="sort_customers()">
            <input type="date" class="cust-search" name="date_to"
                value="{{ request('date_to') }}"
                style="min-width:130px;border-radius:50px!important;padding:8px 14px!important;"
                title="To date"
                onchange="sort_customers()">

            {{-- Clear Filters --}}
            @if(request()->anyFilled(['search','followup_status','profile_status','referred','reward_points','wallet_sort','date_from','date_to']))
                <a href="{{ route('customers.index') }}"
                   style="font-size:12px;color:#a0aec0;white-space:nowrap;text-decoration:none;border:1.5px solid #e2e8f0;border-radius:50px;padding:7px 14px;">
                    ✕ Clear
                </a>
            @endif
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
            <table class="cust-table">
                <thead>
                    <tr>
                        <th style="width:40px;">
                            <label class="aiz-checkbox mb-0">
                                <input type="checkbox" class="check-all">
                                <span class="aiz-square-check"></span>
                            </label>
                        </th>
                        <th>{{ translate('Customer') }}</th>
                        <th>{{ translate('Contact') }}</th>
                        <th>{{ translate('Followup') }}</th>
                        <th>{{ translate('Package') }}</th>
                        <th>{{ translate('Wallet') }}</th>
                        <th>{{ translate('Joined') }}</th>
                        @if(empty($business_partner_id))
                            <th class="text-right">{{ translate('Actions') }}</th>
                        @endif
                    </tr>
                </thead>
                <tbody>
                    @foreach($users as $user)
                        @php
                            // Use batch-loaded data — no per-row DB queries
                            $isSellerEmail = !empty($user->email) && isset($sellerEmails[$user->email]);
                            $balance = getWalletBallance(@$user->id);
                            $displayName = $user->name ?? null;
                            $isIncomplete = empty($displayName);
                            $isOtpPending = $isIncomplete && empty($user->email_verified_at);
                            $isNamePending = $isIncomplete && !empty($user->email_verified_at);
                            $initial = $isIncomplete ? '?' : strtoupper(substr($displayName, 0, 1));
                            // Referred by — from batch loaded data
                            $referralRow = $referralMap[$user->id] ?? null;
                            $referredBy  = $referralRow ? ($referrerMap[$referralRow->user_id] ?? null) : null;
                        @endphp
                        @if($user != null)
                        <tr class="{{ $user->banned == 1 ? 'cust-banned' : '' }}">
                            <td data-label="Select">
                                <label class="aiz-checkbox mb-0">
                                    <input type="checkbox" class="check-one" name="id[]" value="{{ $user->id }}">
                                    <span class="aiz-square-check"></span>
                                </label>
                            </td>
                            {{-- Customer (ID + Name + Email merged) --}}
                            <td data-label="Customer">
                                <div class="d-flex align-items-center gap-10">
                                    <div class="cust-avatar" style="width:34px;height:34px;font-size:12px;flex-shrink:0;{{ $isIncomplete ? 'background:linear-gradient(135deg,#a0aec0,#718096);' : '' }}">
                                        {{ $initial }}
                                    </div>
                                    <div style="min-width:0;">
                                        {{-- ID --}}
                                        <div style="font-size:10px;color:#a0aec0;margin-bottom:1px;">#{{ $user->id }}</div>

                                        {{-- Name row --}}
                                        @if($isOtpPending || $isNamePending)
                                            {{-- Inline edit form --}}
                                            <div class="name-edit-wrap" id="name-wrap-{{ $user->id }}">
                                                <div class="name-display" id="name-display-{{ $user->id }}">
                                                    @if($isOtpPending)
                                                        <span style="color:#a0aec0;font-style:italic;font-size:12px;">OTP Pending</span>
                                                        <span style="font-size:10px;background:#f1efe8;color:#5f5e5a;padding:1px 5px;border-radius:20px;font-weight:700;">⏳</span>
                                                    @else
                                                        <span style="color:#854f0b;font-style:italic;font-size:12px;">No Name</span>
                                                        <span style="font-size:10px;background:#faeeda;color:#854f0b;padding:1px 5px;border-radius:20px;font-weight:700;">⚠️</span>
                                                    @endif
                                                    <button type="button"
                                                        onclick="showNameEdit({{ $user->id }})"
                                                        style="background:none;border:none;cursor:pointer;padding:0 4px;"
                                                        title="Name add చేయండి">
                                                        <i class="las la-pen" style="font-size:12px;color:#667eea;"></i>
                                                    </button>
                                                </div>
                                                <div class="name-form d-none" id="name-form-{{ $user->id }}">
                                                    <div class="d-flex align-items-center gap-6">
                                                        <input type="text"
                                                            id="name-input-{{ $user->id }}"
                                                            placeholder="Enter name"
                                                            style="border:1.5px solid #667eea;border-radius:6px;padding:3px 8px;font-size:12px;width:120px;outline:none;">
                                                        <button type="button"
                                                            onclick="saveName({{ $user->id }})"
                                                            style="background:#667eea;color:#fff;border:none;border-radius:6px;padding:3px 8px;font-size:11px;cursor:pointer;font-weight:700;">
                                                            Save
                                                        </button>
                                                        <button type="button"
                                                            onclick="cancelNameEdit({{ $user->id }})"
                                                            style="background:#e2e8f0;color:#718096;border:none;border-radius:6px;padding:3px 6px;font-size:11px;cursor:pointer;">
                                                            ✕
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        @else
                                            <div style="font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px;">
                                                @if($user->banned == 1)
                                                    <i class="las la-ban text-danger" style="font-size:11px;"></i>
                                                @endif
                                                {{ $displayName }}
                                                @if($isSellerEmail)
                                                    <span class="cust-seller-badge ml-1">🏪</span>
                                                @endif
                                            </div>
                                        @endif

                                        {{-- Email --}}
                                        @if(!$isIncomplete)
                                            <div style="font-size:11px;color:#a0aec0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;">
                                                {{ $user->email }}
                                            </div>
                                        @endif

                                        {{-- Reward Points --}}
                                        @if(!empty($user->reward_points))
                                            <div style="margin-top:2px;">
                                                <span style="font-size:10px;background:#fef9c3;color:#854d0e;padding:1px 7px;border-radius:20px;font-weight:700;">
                                                    ⭐ RP: {{ $user->reward_points }}
                                                </span>
                                            </div>
                                        @endif

                                        {{-- Referred By --}}
                                        @if($referredBy)
                                            <div style="margin-top:2px;">
                                                <span style="font-size:10px;color:#667eea;">
                                                    👤 Ref: {{ $referredBy->name ?? '#'.$referredBy->id }}
                                                </span>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td data-label="Contact">
                                <button class="cust-phone-btn click-to-call" data-phone="{{ $user->phone }}" type="button">
                                    <i class="las la-phone"></i>
                                    {{ $user->phone }}
                                </button>
                            </td>
                            <td data-label="Followup">
                                @if($user->latestDetail)
                                    @php $status = $user->latestDetail->follow_up_status; @endphp
                                    @if($status == 'followup')
                                        <span class="cust-badge cust-badge-followup">Followup</span>
                                    @elseif($status == 'not_interest')
                                        <span class="cust-badge cust-badge-notinterest">Not Interested</span>
                                    @elseif($status == 'win')
                                        <span class="cust-badge cust-badge-win">Win</span>
                                    @elseif($status == 'not_lefting' || $status == 'not_lifting')
                                        <span class="cust-badge cust-badge-notlifting">Not Lifting</span>
                                    @elseif($status == 'not_working')
                                        <span class="cust-badge cust-badge-notworking">Not Working</span>
                                    @else
                                        <span class="cust-badge cust-badge-none">Not Connected</span>
                                    @endif
                                @else
                                    <span class="cust-badge cust-badge-none">Not Connected</span>
                                @endif
                            </td>
                            <td data-label="Package">
                                <span style="font-size:12px;">
                                    {{ $user->customer_package?->getTranslation('name') ?? 'N/A' }}
                                </span>
                            </td>
                            <td data-label="Wallet">
                                <a href="{{ route('customers.wallet', $user->id) }}"
                                   style="font-weight:600;color:#667eea;font-size:13px;text-decoration:none;"
                                   title="View wallet transactions">
                                    {{ single_price($balance) }}
                                    <i class="las la-external-link-alt" style="font-size:11px;"></i>
                                </a>
                            </td>
                            <td data-label="Joined">
                                <div style="font-size:12px;color:#718096;">
                                    {{ $user->created_at->format('d M y') }}<br>
                                    <span style="font-size:11px;">{{ $user->created_at->format('h:i A') }}</span>
                                </div>
                            </td>
                            @if(empty($business_partner_id))
                            <td data-label="Actions" class="text-right" style="white-space:nowrap;">
                                {{-- Response popup --}}
                                <button type="button"
                                    class="cust-action-btn cust-action-primary edit-popup-btn"
                                    data-toggle="modal" data-target="#popupbpLead"
                                    data-popup-id="{{ $user->id }}"
                                    data-popup-userid="{{ $user->id }}"
                                    data-user-response=""
                                    data-user-folloup=""
                                    data-user-createdby=""
                                    data-user-createdbyName=""
                                    data-user-createddate=""
                                    title="Response">
                                    <i class="las la-comment"></i>
                                </button>
                                @can('pay_to_customer')
                                    <button type="button" onclick="customer_payment_modal('{{ $user->id }}')"
                                        class="cust-action-btn cust-action-primary" title="{{ translate('Pay to Customer') }}">
                                        <i class="las la-money-bill"></i>
                                    </button>
                                @endcan
                                @can('login_as_customer')
                                    <a href="{{ route('customers.login', encrypt($user->id)) }}"
                                        class="cust-action-btn cust-action-primary" title="{{ translate('Log in as Customer') }}">
                                        <i class="las la-sign-in-alt"></i>
                                    </a>
                                @endcan
                                @can('ban_customer')
                                    @if($user->banned != 1)
                                        <button type="button" onclick="confirm_ban('{{ route('customers.ban', encrypt($user->id)) }}')"
                                            class="cust-action-btn cust-action-danger" title="{{ translate('Ban') }}">
                                            <i class="las la-user-slash"></i>
                                        </button>
                                    @else
                                        <button type="button" onclick="confirm_unban('{{ route('customers.ban', encrypt($user->id)) }}')"
                                            class="cust-action-btn cust-action-success" title="{{ translate('Unban') }}">
                                            <i class="las la-user-check"></i>
                                        </button>
                                    @endif
                                @endcan
                                @can('delete_customer')
                                    <a href="#" class="cust-action-btn cust-action-danger confirm-delete"
                                        data-href="{{ route('customers.destroy', $user->id) }}" title="{{ translate('Delete') }}">
                                        <i class="las la-trash"></i>
                                    </a>
                                @endcan
                            </td>
                            @endif
                        </tr>
                        @endif
                    @endforeach
                </tbody>
            </table>
            </div>
            <div class="px-4 py-3">
                {{ $users->appends(request()->input())->links() }}
            </div>
        </div>
    </form>
</div>
</div>

<div class="text-form">
    <!-- Modal -->
    <div class="modal fade" id="popupbpLead" tabindex="-1" role="dialog" aria-labelledby="popupbpLeadLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="popupbpLeadLabel">{{ translate('Update User Response Text') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="updatePopupForm">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" id="popup_id" name="popup_id" value="">
                        <input type="hidden" id="created_by" name="created_by" value="{{ Auth::id() }}">
                        <div class="form-group">
                            <label for="user_response_text">{{ translate('User Response Text') }}</label>
                            <textarea class="form-control" id="user_response_text" name="user_response_text" rows="3" placeholder="{{ translate('Enter user response text') }}" required></textarea>
                        </div>
                        <div class="form-group">
                            <label for="follow_up_status">Response</label>
                               <select class="form-control" id="follow_up_status" name="follow_up_status" required>
                                    <option value=''>--Please Select--</option>
                                    <option value="followup">Followup</option>
                                    <option value="not_interest">Not Interested</option>
                                    <option value="win">Win</option>
                                    <option value="not_lifting">Not Lifting</option>
                                    <option value="not_working">Not Working</option>
                                </select>
                        </div>

                        <div id="popup-history" class="mt-3"></div>

                        <!-- <div class="form-group mt-3 border-top pt-2" id="show_responses">
                            <label>Details</label>
                              User response text 
                            <div class="mb-2">
                                <span id="user_detail_response_text" class="text-secondary fst-italic">N/A</span>
                            </div>

                            <div id="popup-details" class="d-flex flex-wrap gap-2">
                                <span><strong>Created By:</strong> <span id="created-by-name">N/A</span></span>
                                <span class="mx-2">|</span>
                                <span><strong>Date:</strong> <span id="created-date">N/A</span></span>
                            </div>
                        </div> -->
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ translate('Close') }}</button>
                        <button type="submit" class="btn btn-primary">{{ translate('Save') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="confirm-ban">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h6">{{translate('Confirmation')}}</h5>
                <button type="button" class="close" data-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>{{translate('Do you really want to ban this Customer?')}}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-dismiss="modal">{{translate('Cancel')}}</button>
                <a type="button" id="confirmation" class="btn btn-primary">{{translate('Proceed!')}}</a>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="payment_modal">
    <div class="modal-dialog">
        <div class="modal-content" id="payment-modal-content">

        </div>
    </div>
</div>

<div class="modal fade" id="confirm-unban">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h6">{{translate('Confirmation')}}</h5>
                <button type="button" class="close" data-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>{{translate('Do you really want to unban this Customer?')}}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-dismiss="modal">{{translate('Cancel')}}</button>
                <a type="button" id="confirmationunban" class="btn btn-primary">{{translate('Proceed!')}}</a>
            </div>
        </div>
    </div>
</div>


@endsection

@section('modal')
    @include('modals.delete_modal')
@endsection

@section('script')
    <script type="text/javascript">

        // ── Inline Name Edit Functions ──
        function showNameEdit(id) {
            document.getElementById('name-display-' + id).classList.add('d-none');
            document.getElementById('name-form-' + id).classList.remove('d-none');
            document.getElementById('name-input-' + id).focus();
        }

        function cancelNameEdit(id) {
            document.getElementById('name-form-' + id).classList.add('d-none');
            document.getElementById('name-display-' + id).classList.remove('d-none');
        }

        function saveName(id) {
            var name = document.getElementById('name-input-' + id).value.trim();
            if (!name) {
                alert('Name enter చేయండి!');
                return;
            }
            $.ajax({
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                url: '{{ url("admin/customers/update-name") }}/' + id,
                type: 'POST',
                data: { name: name },
                success: function(response) {
                    if (response.success) {
                        location.reload();
                    }
                },
                error: function(xhr) {
                    console.log(xhr.responseText);
                    alert('Error! Status: ' + xhr.status);
                }
            });
        }

        // Enter key తో save
        $(document).on('keypress', '[id^="name-input-"]', function(e) {
            if (e.which === 13) {
                var id = this.id.replace('name-input-', '');
                saveName(id);
            }
        });
       // Handle modal data population when edit button is clicked
       $(document).on('click', '.edit-popup-btn', function() {
            
            $('#show_responses').show();
            var popupId = $(this).data('popup-id');
            var userID=$(this).data('popup-userid');
            var userResponse = $(this).data('user-response');
            var userFollowup = $(this).data('user-folloup');
            var userCreatedBy = $(this).data('user-createdby');

            if (!userResponse || userResponse === "") {
                $('#show_responses').hide();
            }
            var userCreatedByName = $(this).data('user-createdbyname');
            var userCreatedDateTime = $(this).data('user-createddate'); // e.g., "2025-02-10 14:23:00"

            // Convert to Date object
            var dateObj = new Date(userCreatedDateTime);

            // Month names
            var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", 
                        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

            // Ordinal function
            function getOrdinal(n) {
                if (n > 3 && n < 21) return n + 'th';
                switch (n % 10) {
                    case 1: return n + "st";
                    case 2: return n + "nd";
                    case 3: return n + "rd";
                    default: return n + "th";
                }
            }

            // Format date
            var formattedDate = getOrdinal(dateObj.getDate()) + ' ' + months[dateObj.getMonth()] + ' ' + dateObj.getFullYear();

            // Format time
            var hours = dateObj.getHours();
            var minutes = dateObj.getMinutes().toString().padStart(2, '0');
            var ampm = hours >= 12 ? 'PM' : 'AM';
            hours = hours % 12;
            hours = hours ? hours : 12; // 0 => 12
            var formattedTime = hours + ':' + minutes + ' ' + ampm;

            // Combine date and time
            var dateTimeText = formattedDate + ' ' + formattedTime;

            // Set values in modal
            $('#popup_id').val(popupId);
            $('#user_response_text').val('');
            //$('#created_by').val(userCreatedBy);
            
            //$('#user_detail_response_text').html(userResponse || 'N/A');
            //$('#created-by-name').html(userCreatedByName || 'N/A');
            //$('#created-date').html(dateTimeText);
              $('#popup-history').html('<p>Loading history...</p>');
             // AJax  Show the  Full History of the User 
               $.ajax({
                    url: "{{ route('customer.popup.history', '') }}/" + popupId,
                    type: 'GET',
                    success: function(response) {
                        if (response.success) {
                            var html = '';
                            // Filter out records with null user_response_text
                            var filteredData = response.data.filter(item => item.user_response_text);

                            if (filteredData.length > 0) {
                                filteredData.forEach(function(item) {
                                    // Format date & time
                                    var dateObj = new Date(item.created_at);
                                    var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", 
                                                "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
                                    var day = dateObj.getDate();
                                    var ordinal = (day > 3 && day < 21) ? day + 'th' : 
                                                (day % 10 === 1 ? day + "st" : day % 10 === 2 ? day + "nd" : day % 10 === 3 ? day + "rd" : day + "th");
                                    var formattedDate = ordinal + ' ' + months[dateObj.getMonth()] + ' ' + dateObj.getFullYear();
                                    var hours = dateObj.getHours();
                                    var minutes = dateObj.getMinutes().toString().padStart(2, '0');
                                    var ampm = hours >= 12 ? 'PM' : 'AM';
                                    hours = hours % 12;
                                    hours = hours ? hours : 12;
                                    var formattedTime = hours + ':' + minutes + ' ' + ampm;

                                    html += `
                                        <div class="form-group mt-3 border-top pt-2">
                                        <div class="d-flex flex-wrap gap-2">
                                                <span>${formattedDate} ${formattedTime}</span> 
                                                <span class="mx-2">|</span>
                                                <span>${item.created_by_user?.name ?? 'N/A'}</span>
                                            </div>
                                            <div class="mb-2">
                                                <span class="text-secondary fst-italic">${item.user_response_text}</span>
                                            </div>
                                        </div>
                                    `;
                                });
                            } else {
                                html = '<p>No history found.</p>';
                            }
                            $('#popup-history').html(html);
                        } else {
                            $('#popup-history').html('<p>Error loading history</p>');
                        }
                    },
                    error: function() {
                        $('#popup-history').html('<p>Server error while loading history.</p>');
                    }
                });
           });

         // Handle form submission
        $(document).on('submit', '#updatePopupForm', function(e) {
            e.preventDefault();

            let formData = new FormData($('#updatePopupForm')[0]);
            
            var popupId =  formData.get('popup_id');
            var userResponseText =  formData.get('user_response_text');
            var follow_up_status =  formData.get('follow_up_status');
            var createdby   = formData.get('created_by');
           
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{ route('customer.popup.update', '') }}/" + popupId,
                type: 'POST',
                data: {
                    popupId:popupId,
                    user_response_text: userResponseText,
                    follow_up_status: follow_up_status,
                    created_by:createdby,
                },
                success: function (response) {
                    if(response.success) {
                        $('#popupbpLead').modal('hide');
                        location.reload();
                        AIZ.plugins.notify('success', response.message);
                    } else {
                        AIZ.plugins.notify('error', 'Something went wrong');
                    }
                },
                error: function (xhr) {
                    AIZ.plugins.notify('error', 'Something went wrong');
                }
            });
        });   
        // Script Ends For the Responses

        

        $(document).on("change", ".check-all", function() {
            if(this.checked) {
                // Iterate each checkbox
                $('.check-one:checkbox').each(function() {
                    this.checked = true;
                });
            } else {
                $('.check-one:checkbox').each(function() {
                    this.checked = false;
                });
            }
        });

        function customer_payment_modal(id){
            $.post('{{ route('customers.payment_modal') }}',{_token:'{{ @csrf_token() }}', id:id}, function(data){
                $('#payment_modal #payment-modal-content').html(data);
                $('#payment_modal').modal('show', {backdrop: 'static'});
                $('.demo-select2-placeholder').select2();
            });
        }

        function sort_customers(el){
            $('#sort_customers').submit();
        }
        function confirm_ban(url)
        {
            $('#confirm-ban').modal('show', {backdrop: 'static'});
            document.getElementById('confirmation').setAttribute('href' , url);
        }

        function confirm_unban(url)
        {
            $('#confirm-unban').modal('show', {backdrop: 'static'});
            document.getElementById('confirmationunban').setAttribute('href' , url);
        }

        function bulk_delete() {
            var data = new FormData($('#sort_customers')[0]);
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{route('bulk-customer-delete')}}",
                type: 'POST',
                data: data,
                cache: false,
                contentType: false,
                processData: false,
                success: function (response) {
                    if(response == 1) {
                        location.reload();
                    }
                }
            });
        }
        
        function ClickToCallAdmin(phone)
        {
           // var data = new FormData($('#ClickToCallForm')[0]);
            var formData = new FormData();
            formData.append('phone', phone);
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{route('clicktocall.admin')}}",
                type: 'POST',
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function (response) {
                    console.log(response.data.code);
                    
                    if (response.data.code === 200) {
                        $('.success_message').html('<b>' + response.data.msg + '</b>').fadeIn().delay(4000).fadeOut();
                    } else {
                        $('.error_message').html('<b>' + response.data.msg + '</b>').fadeIn().delay(4000).fadeOut();
                    }
                    
                }
            });
        }
        $(document).on('click', '.click-to-call', function () {
            var phone = $(this).data('phone'); // Get phone number from the clicked element
            ClickToCallAdmin(phone);
        });


        document.addEventListener('DOMContentLoaded', function () {
        function applyAlternateRows() {
            const rows = document.querySelectorAll('.table-responsive-stacked .aiz-table tbody tr');
            rows.forEach((tr, idx) => {
            tr.classList.remove('row-even', 'row-odd');
            tr.classList.add(((idx + 1) % 2 === 0) ? 'row-even' : 'row-odd');
            });
        }

        // initial
        applyAlternateRows();

        // re-apply on window resize (optional)
        window.addEventListener('resize', function() {
            applyAlternateRows();
        });

        // If rows are added dynamically, call applyAlternateRows() after update.
        });
</script>
@endsection