@extends('backend.layouts.app')
@section('content')

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

/* Stats bar */
.ntf-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:20px; }
.ntf-stat { background:#fff; border-radius:14px; padding:16px 18px; box-shadow:0 2px 12px rgba(0,0,0,0.06); border-left:4px solid transparent; }
.ntf-stat:nth-child(1) { border-color:#667eea; }
.ntf-stat:nth-child(2) { border-color:#f05a7e; }
.ntf-stat:nth-child(3) { border-color:#34bfa3; }
.ntf-stat-label { font-size:11px; color:#718096; font-weight:600; text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.ntf-stat-value { font-size:22px; font-weight:800; color:#1a202c; }

/* Card */
.ntf-card { background:#fff; border-radius:16px; box-shadow:0 2px 16px rgba(0,0,0,0.07); overflow:hidden; }
.ntf-card-header { padding:16px 20px; border-bottom:1px solid #f0f0f0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.ntf-card-header h5 { font-size:15px; font-weight:700; color:#1a202c; margin:0; }

/* Action buttons */
.ntf-btn-primary { background:linear-gradient(135deg,#f05a7e,#f6845a); color:#fff; border:none; border-radius:10px; padding:9px 18px; font-size:13px; font-weight:700; cursor:pointer; transition:opacity .2s; white-space:nowrap; }
.ntf-btn-primary:hover { opacity:.9; color:#fff; text-decoration:none; }
.ntf-btn-secondary { background:#ebf8ff; color:#2b6cb0; border:none; border-radius:10px; padding:9px 18px; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; }
.ntf-btn-outline { background:transparent; color:#718096; border:1.5px solid #e2e8f0; border-radius:10px; padding:8px 16px; font-size:13px; cursor:pointer; white-space:nowrap; }
.ntf-btn-outline:hover { border-color:#f05a7e; color:#f05a7e; }

/* Filter section */
.ntf-filter-section { padding:16px 20px; background:#fafafa; border-bottom:1px solid #f0f0f0; }
.ntf-filter-title { font-size:11px; font-weight:700; color:#718096; text-transform:uppercase; letter-spacing:.6px; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.ntf-filter-title::after { content:''; flex:1; height:1px; background:#e2e8f0; }
.ntf-filter-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
.ntf-input { border:1.5px solid #e2e8f0; border-radius:10px; padding:8px 12px; font-size:13px; width:100%; outline:none; transition:border-color .2s; background:#fff; }
.ntf-input:focus { border-color:#f05a7e; }
.ntf-select { border:1.5px solid #e2e8f0; border-radius:10px; padding:8px 12px; font-size:13px; width:100%; outline:none; background:#fff; color:#2d3748; cursor:pointer; }

/* Selected bar */
.ntf-selected-bar { padding:12px 20px; background:#f0f9ff; border-bottom:1px solid #bee3f8; display:none; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.ntf-selected-bar.show { display:flex; }
.ntf-selected-count { font-size:13px; font-weight:700; color:#2b6cb0; }

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

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

/* Badge */
.ntf-badge { display:inline-block; padding:2px 8px; border-radius:50px; font-size:11px; font-weight:700; }
.ntf-badge-seller { background:#fef0f4; color:#f05a7e; }
.ntf-badge-customer { background:#ebf8ff; color:#2b6cb0; }

/* Responsive */
@media (max-width:768px) {
    .ntf-filter-grid { grid-template-columns:1fr 1fr; }
    .ntf-stats { grid-template-columns:1fr 1fr; }
}
</style>

<div class="ntf-wrapper">
<div class="ntf-page-header">
    <h1>Send <span>Notifications</span></h1>
</div>

{{-- Stats --}}
<div class="ntf-stats">
    <div class="ntf-stat">
        <div class="ntf-stat-label">Total Shown</div>
        <div class="ntf-stat-value" id="stat-total">{{ $userList->total() }}</div>
    </div>
    <div class="ntf-stat">
        <div class="ntf-stat-label">Selected</div>
        <div class="ntf-stat-value" id="stat-selected">0</div>
    </div>
    <div class="ntf-stat">
        <div class="ntf-stat-label">All Filtered IDs</div>
        <div class="ntf-stat-value">{{ count($userIds) }}</div>
    </div>
</div>

<div class="ntf-card">
    <form id="sort_users" action="" method="GET">

        {{-- Card Header --}}
        <div class="ntf-card-header">
            <h5>User List</h5>
            <div class="d-flex align-items-center gap-10 flex-wrap">
                @can('send_notification')
                    <button type="button" class="ntf-btn-outline" onclick="selectAllFiltered()">
                        ☑ Select All ({{ count($userIds) }})
                    </button>
                    <button type="button" class="ntf-btn-secondary" onclick="open_email_notification_model()">
                        ✉ Send Email
                    </button>
                    <button type="button" class="ntf-btn-primary" onclick="open_notification_model()">
                        🔔 Send Notification
                    </button>
                @endcan
                <a href="{{ route('notification.userList') }}" class="ntf-btn-outline">✕ Clear</a>
            </div>
        </div>

        {{-- Seller Filters --}}
        <div class="ntf-filter-section">
            <div class="ntf-filter-title">🏪 Seller Filters</div>
            <div class="ntf-filter-grid">
                <select class="ntf-select" name="user_type" onchange="sort_sellers()">
                    <option value="">All User Types</option>
                    <option value="seller" @if(isset($userType) && $userType=='seller') selected @endif>Sellers Only</option>
                    <option value="customer" @if(isset($userType) && $userType=='customer') selected @endif>Customers Only</option>
                </select>

                <select class="ntf-select" name="searchBySellerPackage" onchange="sort_sellers()">
                    <option value="">Filter by Seller Package</option>
                    @foreach(App\Models\SellerPackage::get() as $pkg)
                        <option value="{{ $pkg->id }}" @if(isset($sellerPackageId) && $sellerPackageId==$pkg->id) selected @endif>{{ $pkg->name }}</option>
                    @endforeach
                </select>

                <input type="text" class="ntf-input" id="search" name="search"
                    @isset($sortSearch) value="{{ $sortSearch }}" @endisset
                    placeholder="Seller name, email, phone, pincode...">

                <select class="ntf-select" name="sellerState" onchange="sort_sellers()">
                    <option value="">Seller State</option>
                    @foreach(\App\Models\Pincode::select('state')->groupBy('state')->get() as $s)
                        <option value="{{ $s->state }}" @if(request('sellerState')==$s->state) selected @endif>{{ $s->state }}</option>
                    @endforeach
                </select>

                <select class="ntf-select" name="sellerDistrict" onchange="sort_sellers()">
                    <option value="">Seller District</option>
                    @foreach(\App\Models\Pincode::select('district')->groupBy('district')->get() as $d)
                        <option value="{{ $d->district }}" @if(request('sellerDistrict')==$d->district) selected @endif>{{ $d->district }}</option>
                    @endforeach
                </select>

                <div>
                    <div style="font-size:11px;color:#718096;margin-bottom:4px;">Seller Created Date</div>
                    <div class="d-flex gap-6">
                        <input type="date" class="ntf-input" name="sellerCreateStartDate" @isset($sellerCreateStartDate) value="{{ $sellerCreateStartDate }}" @endisset style="flex:1;">
                        <input type="date" class="ntf-input" name="sellerCreateEndDate" onchange="searchBySellerCreatedDate()" @isset($sellerCreateEndDate) value="{{ $sellerCreateEndDate }}" @endisset style="flex:1;">
                    </div>
                </div>

                <div>
                    <div style="font-size:11px;color:#718096;margin-bottom:4px;">Seller Expire Date</div>
                    <div class="d-flex gap-6">
                        <input type="date" class="ntf-input" name="sellerExpireStartDate" @isset($sellerExpireStartDate) value="{{ $sellerExpireStartDate }}" @endisset style="flex:1;">
                        <input type="date" class="ntf-input" name="sellerExpireEndDate" onchange="searchBySellerExpireDate()" @isset($sellerExpireEndDate) value="{{ $sellerExpireEndDate }}" @endisset style="flex:1;">
                    </div>
                </div>
            </div>
        </div>

        {{-- Customer Filters --}}
        <div class="ntf-filter-section">
            <div class="ntf-filter-title">👤 Customer Filters</div>
            <div class="ntf-filter-grid">
                <select class="ntf-select" name="business_partner" onchange="sort_sellers()">
                    <option value="">Filter by Business Partner</option>
                    <option value="pincode_partner" @if(isset($businessPartner) && $businessPartner=='pincode_partner') selected @endif>Pincode Partner</option>
                    <option value="district_partner" @if(isset($businessPartner) && $businessPartner=='district_partner') selected @endif>District Partner</option>
                    <option value="state_partner" @if(isset($businessPartner) && $businessPartner=='state_partner') selected @endif>State Partner</option>
                </select>

                <select class="ntf-select" name="searchByCustomerPackage" onchange="sort_sellers()">
                    <option value="">Filter by Customer Package</option>
                    @foreach(App\Models\CustomerPackage::get() as $pkg)
                        <option value="{{ $pkg->id }}" @if(isset($customerPackageId) && $customerPackageId==$pkg->id) selected @endif>{{ $pkg->name }}</option>
                    @endforeach
                </select>

                <input type="text" class="ntf-input" id="customersSearch" name="customersSearch"
                    @isset($customersSearch) value="{{ $customersSearch }}" @endisset
                    placeholder="Customer name, email, phone...">

                <select class="ntf-select" name="customerState" onchange="sort_sellers()">
                    <option value="">Customer State</option>
                    @foreach(\App\Models\Pincode::select('state')->groupBy('state')->get() as $s)
                        <option value="{{ $s->state }}" @if(request('customerState')==$s->state) selected @endif>{{ $s->state }}</option>
                    @endforeach
                </select>

                <select class="ntf-select" name="customerDistrict" onchange="sort_sellers()">
                    <option value="">Customer District</option>
                    @foreach(\App\Models\Pincode::select('district')->groupBy('district')->get() as $d)
                        <option value="{{ $d->district }}" @if(request('customerDistrict')==$d->district) selected @endif>{{ $d->district }}</option>
                    @endforeach
                </select>

                <div>
                    <div style="font-size:11px;color:#718096;margin-bottom:4px;">Affiliates Created Date</div>
                    <div class="d-flex gap-6">
                        <input type="date" class="ntf-input" name="affiliateCreateStartDate" @isset($affiliateCreateStartDate) value="{{ $affiliateCreateStartDate }}" @endisset style="flex:1;">
                        <input type="date" class="ntf-input" name="affiliateCreateEndDate" onchange="searchByAffiliateCreatedDate()" @isset($affiliateCreateEndDate) value="{{ $affiliateCreateEndDate }}" @endisset style="flex:1;">
                    </div>
                </div>

                <div>
                    <div style="font-size:11px;color:#718096;margin-bottom:4px;">Affiliates Expired Date</div>
                    <div class="d-flex gap-6">
                        <input type="date" class="ntf-input" name="affiliateExpireStartDate" @isset($affiliateExpireStartDate) value="{{ $affiliateExpireStartDate }}" @endisset style="flex:1;">
                        <input type="date" class="ntf-input" name="affiliateExpireEndDate" onchange="searchByAffiliateExpireDate()" @isset($affiliateExpireEndDate) value="{{ $affiliateExpireEndDate }}" @endisset style="flex:1;">
                    </div>
                </div>
            </div>
        </div>

        {{-- Selected Bar --}}
        <div class="ntf-selected-bar" id="selected-bar">
            <span class="ntf-selected-count" id="selected-bar-count">0 users selected</span>
            <div class="d-flex gap-10">
                @can('send_notification')
                    <button type="button" class="ntf-btn-primary" onclick="open_notification_model()">
                        🔔 Send Notification
                    </button>
                    <button type="button" class="ntf-btn-secondary" onclick="open_email_notification_model()">
                        ✉ Send Email
                    </button>
                @endcan
                <button type="button" class="ntf-btn-outline" onclick="clearSelection()">✕ Clear</button>
            </div>
        </div>

        {{-- Table --}}
        <div class="table-responsive">
            <table class="ntf-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('User') }}</th>
                        <th>{{ translate('Phone') }}</th>
                        <th>{{ translate('Type') }}</th>
                        <th>{{ translate('Package') }}</th>
                        <th>{{ translate('Location') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($userList as $value)
                    <tr id="row-{{ $value->id }}">
                        <td>
                            <label class="aiz-checkbox mb-0">
                                <input type="checkbox" class="check-one" name="userId[]"
                                    data-id="{{ $value->id }}" value="{{ $value->id }}"
                                    onchange="updateSelectedCount()">
                                <span class="aiz-square-check"></span>
                            </label>
                        </td>
                        <td>
                            <div class="d-flex align-items-center gap-10">
                                <div class="ntf-avatar {{ $value->user_type == 'seller' ? 'ntf-avatar-seller' : 'ntf-avatar-customer' }}">
                                    {{ strtoupper(substr($value->name ?? 'U', 0, 1)) }}
                                </div>
                                <div>
                                    <div style="font-weight:600;font-size:13px;">{{ $value->name ?? 'N/A' }}</div>
                                    <div style="font-size:11px;color:#a0aec0;">{{ $value->email }}</div>
                                </div>
                            </div>
                        </td>
                        <td>{{ $value->phone }}</td>
                        <td>
                            <span class="ntf-badge {{ $value->user_type == 'seller' ? 'ntf-badge-seller' : 'ntf-badge-customer' }}">
                                {{ ucfirst($value->user_type) }}
                            </span>
                        </td>
                        <td style="font-size:12px;">
                            @if($value->user_type == 'seller')
                                {{ @$value->shop->seller_package->name ?? '—' }}
                            @else
                                {{ @$value->affiliate->partner_type ?? '—' }}
                            @endif
                        </td>
                        <td style="font-size:12px;color:#718096;">
                            {{ implode(', ', array_filter([$value->city, $value->district, $value->state])) ?: '—' }}
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="px-4 py-3 d-flex align-items-center justify-content-between flex-wrap gap-10">
            <div style="font-size:12px;color:#718096;">
                💡 <strong>Tip:</strong> Pagination లో page change చేస్తే current page selection reset అవుతుంది.
                అన్ని pages users కి పంపాలంటే <strong>"☑ Select All ({{ count($userIds) }})"</strong> button use చేయండి.
            </div>
            {{ $userList->appends(request()->input())->links() }}
        </div>

    </form>

    <input type="hidden" id="allFilteredIds" value="{{ json_encode($userIds) }}">
    <input type="hidden" name="userIds" id="userIds" value="{{ json_encode($userIds) }}">
</div>
</div>

@endsection

@section('modal')
{{-- Send Notification Modal --}}
<div class="modal fade" id="send-notification">
    <div class="modal-dialog">
        <div class="modal-content" style="border-radius:16px;overflow:hidden;">
            <div id="pageLoadDiv" style="display:none;background:rgba(255,255,255,0.9);position:absolute;inset:0;z-index:10;display:none;align-items:center;justify-content:center;">
                <div class="spinner-border text-primary"></div>
            </div>
            <div class="modal-header" style="background:linear-gradient(135deg,#f05a7e,#f6845a);border:none;">
                <h5 class="modal-title h6 text-white">🔔 Send Push Notification</h5>
                <button type="button" class="close text-white" onclick="resetForm()" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form method="post" enctype="multipart/form-data" id="notification_form">
                <div class="modal-body">
                    <span id="uploadResult" class="d-block mb-2"></span>

                    {{-- Preview --}}
                    <div id="ntf-preview" style="background:#f8fafc;border-radius:12px;padding:14px;margin-bottom:16px;display:none;">
                        <div style="font-size:11px;color:#718096;font-weight:700;text-transform:uppercase;margin-bottom:8px;">Preview</div>
                        <div style="background:#fff;border-radius:10px;padding:12px;box-shadow:0 2px 8px rgba(0,0,0,0.08);">
                            <div style="font-weight:700;font-size:14px;" id="preview-title">—</div>
                            <div style="font-size:13px;color:#718096;margin-top:4px;" id="preview-message">—</div>
                        </div>
                        <div style="font-size:11px;color:#718096;margin-top:8px;" id="preview-count"></div>
                    </div>

                    <div class="form-group">
                        <label style="font-weight:600;font-size:13px;">Title <span class="text-danger">*</span></label>
                        <input type="text" name="title" id="title" class="form-control" required
                            oninput="updatePreview()" placeholder="Enter notification title">
                    </div>
                    <div class="form-group">
                        <label style="font-weight:600;font-size:13px;">Message <span class="text-danger">*</span></label>
                        <textarea name="message" id="message" class="form-control" rows="3" required
                            oninput="updatePreview()" placeholder="Enter notification message"></textarea>
                    </div>
                    <div class="form-group">
                        <label style="font-weight:600;font-size:13px;">Thumbnail Image <span class="text-danger">* (1 file)</span></label>
                        <input type="file" class="form-control" name="thumbnail_image" id="thumbnail_image" accept="image/*" required>
                    </div>
                    <div class="form-group">
                        <label style="font-weight:600;font-size:13px;">Images <span class="text-danger">(max 5 files)</span></label>
                        <input type="file" class="form-control" name="image[]" id="image" multiple accept="image/*" required>
                    </div>
                </div>
                <div class="modal-footer" style="border-top:1px solid #f0f0f0;">
                    <button type="button" class="btn btn-light" onclick="resetForm()" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn" style="background:linear-gradient(135deg,#f05a7e,#f6845a);color:#fff;border:none;border-radius:10px;padding:8px 20px;font-weight:700;"
                        onclick="sendNotification()">
                        Send 🚀
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Send Email Modal --}}
<div class="modal fade" id="send-email">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="border-radius:16px;overflow:hidden;">
            <div id="pageLoadDiv1" style="display:none;"></div>
            <div class="modal-header" style="background:linear-gradient(135deg,#667eea,#764ba2);border:none;">
                <h5 class="modal-title h6 text-white">✉ Send Email</h5>
                <button type="button" class="close text-white" onclick="resetForm()" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form method="post" enctype="multipart/form-data" id="user_email_notification_form">
                @csrf
                <div class="modal-body">
                    <span id="uploadResult1" class="d-block mb-2"></span>
                    <div class="form-group">
                        <label style="font-weight:600;font-size:13px;">Subject <span class="text-danger">*</span></label>
                        <input type="text" name="subject" id="subject" class="form-control" required placeholder="Email subject">
                    </div>
                    <div class="form-group">
                        <label style="font-weight:600;font-size:13px;">Message <span class="text-danger">*</span></label>
                        <textarea rows="8" class="form-control" id="email_message" name="email_message" required placeholder="Email message"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" onclick="resetForm()" data-dismiss="modal">Cancel</button>
                    <button class="btn" style="background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;padding:8px 20px;font-weight:700;">
                        Send Email 📧
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    // ── Selection Management ──
    function updateSelectedCount() {
        var count = $('.check-one:checked').length;
        // If "select all filtered" was used, show that count
        if (window._sendAllFiltered) {
            count = (window._allFilteredIds || []).length;
        }
        $('#stat-selected').text(count);
        $('#selected-bar-count').text(count + ' users selected');

        // Update row highlight
        $('.check-one').each(function() {
            if ($(this).is(':checked')) {
                $(this).closest('tr').addClass('selected-row');
            } else {
                $(this).closest('tr').removeClass('selected-row');
            }
        });

        if (count > 0) {
            $('#selected-bar').addClass('show');
        } else {
            $('#selected-bar').removeClass('show');
        }
        updatePreview();
    }

    function selectAllFiltered() {
        var allIds = JSON.parse($('#allFilteredIds').val());
        // Check all visible checkboxes
        $('.check-one').prop('checked', true);
        window._sendAllFiltered = true;
        window._allFilteredIds = allIds;
        updateSelectedCount();
        AIZ.plugins.notify('success', allIds.length + ' users selected (all filtered pages)');
    }

    function clearSelection() {
        $('.check-one').prop('checked', false);
        $('.check-all').prop('checked', false);
        window._sendAllFiltered = false;
        window._allFilteredIds = [];
        $('#stat-selected').text('0');
        $('#selected-bar').removeClass('show');
        $('.check-one').closest('tr').removeClass('selected-row');
        updatePreview();
    }

    // Check-all toggle
    $(document).on("change", ".check-all", function() {
        var isChecked = this.checked;
        $('.check-one').prop('checked', isChecked);
        window._sendAllFiltered = false;
        window._allFilteredIds = [];
        updateSelectedCount();
    });

    // Individual checkbox change
    $(document).on("change", ".check-one", function() {
        window._sendAllFiltered = false;
        // Update check-all state
        var total = $('.check-one').length;
        var checked = $('.check-one:checked').length;
        $('.check-all').prop('checked', total === checked);
        updateSelectedCount();
    });

    // ── Preview ──
    function updatePreview() {
        var title = $('#title').val();
        var msg = $('#message').val();
        if (title || msg) {
            $('#ntf-preview').show();
            $('#preview-title').text(title || '—');
            $('#preview-message').text(msg || '—');
            var count = window._sendAllFiltered
                ? (window._allFilteredIds || []).length
                : $('.check-one:checked').length;
            $('#preview-count').text('Will send to: ' + count + ' users');
        }
    }

    // ── Get selected IDs ──
    function getSelectedIds() {
        if (window._sendAllFiltered && window._allFilteredIds && window._allFilteredIds.length > 0) {
            return window._allFilteredIds;
        }
        var ids = [];
        $('.check-one:checked').each(function() { ids.push($(this).val()); });
        return ids;
    }

    // ── Open Modals ──
    function open_notification_model() {
        var ids = getSelectedIds();
        if (ids.length === 0) {
            AIZ.plugins.notify('danger', 'Please select at least one user');
            return;
        }
        updatePreview();
        $('#send-notification').modal('show');
    }

    function open_email_notification_model() {
        var ids = getSelectedIds();
        if (ids.length === 0) {
            AIZ.plugins.notify('danger', 'Please select at least one user');
            return;
        }
        $('#send-email').modal('show');
    }

    // ── Send Notification ──
    function sendNotification() {
        var userId = getSelectedIds();
        var files = $('#image')[0].files;
        var thumbnailImage = $('#thumbnail_image')[0].files;
        var message = $('textarea#message').val();
        var title = $('#title').val();

        if (!title) {
            showError('#uploadResult', 'Please enter title');
            return;
        }
        if (!message) {
            showError('#uploadResult', 'Please enter message');
            return;
        }
        if (thumbnailImage.length == 0) {
            showError('#uploadResult', 'Please select thumbnail image');
            return;
        }
        if (files.length == 0) {
            showError('#uploadResult', 'Please select at least one image');
            return;
        }
        if (files.length > 5) {
            showError('#uploadResult', 'Max 5 images allowed');
            return;
        }

        var NotificationFormData = new FormData();
        for (var i = 0; i < files.length; i++) {
            NotificationFormData.append('images[]', files[i]);
        }
        NotificationFormData.append('thumbnail_image', thumbnailImage[0]);
        NotificationFormData.append('userIds', userId.join(','));
        NotificationFormData.append('message', message);
        NotificationFormData.append('title', title);

        $.ajax({
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            beforeSend: function() { $('#pageLoadDiv').show(); },
            method: 'post',
            url: "{{ route('user.notify') }}",
            processData: false,
            contentType: false,
            data: NotificationFormData,
            success: function(resp) {
                $('#pageLoadDiv').hide();
                if (typeof resp === 'string') { try { resp = JSON.parse(resp); } catch(e) {} }
                if (resp === false || resp.status === false) {
                    showError('#uploadResult', 'Please select at least one user');
                } else {
                    $('#send-notification').modal('hide');
                    AIZ.plugins.notify('success', '{{ translate("Notification sent successfully") }}');
                    resetForm();
                }
            },
            error: function() {
                $('#pageLoadDiv').hide();
                showError('#uploadResult', 'Something went wrong. Try again.');
            }
        });
    }

    // ── Send Email ──
    $('#user_email_notification_form').submit(function(e) {
        e.preventDefault();
        var userId = getSelectedIds();
        var message = $('textarea#email_message').val();
        const data = new FormData(this);
        data.append('userIds', userId.join(','));
        data.append('email_message', message);

        $.ajax({
            beforeSend: function() { $('#pageLoadDiv1').show(); },
            url: "{{ route('user.send-email-notification') }}",
            method: 'post',
            data: data,
            processData: false,
            contentType: false,
            dataType: 'json',
            success: function(response) {
                $('#pageLoadDiv1').hide();
                if (response == false) {
                    showError('#uploadResult1', 'Please select at least one user');
                } else {
                    $('#send-email').modal('hide');
                    AIZ.plugins.notify('success', '{{ translate("Email sent successfully") }}');
                    resetForm();
                }
            }
        });
    });

    function showError(el, msg) {
        $(el).show().html('<div class="alert alert-danger py-2 mb-0">' + msg + '</div>');
        setTimeout(function() { $(el).fadeOut(); }, 5000);
    }

    function resetForm() {
        $('#notification_form')[0].reset();
        $('#user_email_notification_form')[0].reset();
        $('#ntf-preview').hide();
        $('#uploadResult, #uploadResult1').hide();
    }

    function sort_sellers() { $('#sort_users').submit(); }

    function searchByDate(start, end, form) {
        if ($('#' + start).val() === '') {
            alert('Please select the start date first');
            $('#' + end).val('');
            return;
        }
        $('#' + form).submit();
    }

    function searchBySellerCreatedDate() { searchByDate('sellerCreateStartDate', 'sellerCreateEndDate', 'sort_users'); }
    function searchBySellerExpireDate() { searchByDate('sellerExpireStartDate', 'sellerExpireEndDate', 'sort_users'); }
    function searchByAffiliateExpireDate() { searchByDate('affiliateExpireStartDate', 'affiliateExpireEndDate', 'sort_users'); }
    function searchByAffiliateCreatedDate() { searchByDate('affiliateCreateStartDate', 'affiliateCreateEndDate', 'sort_users'); }

    // Enter key search
    ['search', 'customersSearch'].forEach(function(id) {
        var el = document.getElementById(id);
        if (el) el.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') { e.preventDefault(); document.getElementById('sort_users').submit(); }
        });
    });

    // Init
    window._sendAllFiltered = false;
    window._allFilteredIds = [];
</script>
@endsection