@extends('layouts.admin_dynamic')

@section('content')
<style>
    .progress-step { width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:600;transition:all .3s; }
    .progress-step.active { background:#337ab7;color:white; }
    .progress-step.inactive { background:#f5f5f5;color:#999;border:1px solid #ddd; }
    .progress-line { position:absolute;height:2px;background:#e9ecef;top:50%;width:100%;z-index:1; }
    .progress-line-active { position:absolute;height:2px;background:#337ab7;top:50%;z-index:2;width:0%;transition:width .4s; }
    .step-container { position:relative;margin-bottom:40px; }
    .step-wrapper { display:table;width:100%; }
    .step-item { display:table-cell;text-align:center;vertical-align:top;position:relative; }
    .step-label { margin-top:8px;font-size:12px;font-weight:600; }
    .avatar-circle { width:45px;height:45px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:white;font-weight:600;font-size:16px; }
    .error-message { color:#a94442;font-size:12px;display:none;margin-top:5px; }
    .rich-text-toolbar { border:1px solid #ddd;border-bottom:none;border-radius:4px 4px 0 0;padding:8px;background:#f5f5f5; }
    .rich-text-textarea { border-radius:0 0 4px 4px;border-top:none;min-height:200px; }
    .pagination { display:inline-block; margin:20px 0; }
    .pagination a, .pagination span { padding:8px 12px; margin:0 4px; border:1px solid #ddd; border-radius:4px; text-decoration:none; color:#337ab7; }
    .pagination .active { background:#337ab7; color:white; border-color:#337ab7; }
    .pagination a:hover { background:#f5f5f5; }
    .pagination .disabled { color:#999; cursor:not-allowed; }
    .status-filter { transition: all 0.3s; }
    .status-filter.active { background: #337ab7; color: white; border-color: #337ab7; }
    .status-filter:hover { background: #286090; color: white; }
    .status-badge { padding: 4px 8px; border-radius: 3px; font-size: 11px; font-weight: 600; }
    .status-active { background: #d4edda; color: #155724; }
    .status-inactive { background: #f8d7da; color: #721c24; }
</style>

<div class="content-wrapper">
    <section class="content-header m-3"><h1>New Message / Campaign</h1></section>

    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box box-success">
                    <div class="box-body">

                        <!-- Progress Steps -->
                        <div class="step-container">
                            <div class="step-wrapper">
                                <div class="progress-line"></div>
                                <div class="progress-line-active" id="progressLine"></div>
                                <div class="step-item">
                                    <div id="step1Circle" class="progress-step active">1</div>
                                    <div class="step-label active">Campaign Info</div>
                                </div>
                                <div class="step-item">
                                    <div id="step2Circle" class="progress-step inactive">2</div>
                                    <div class="step-label inactive">Write Message</div>
                                </div>
                                <div class="step-item">
                                    <div id="step3Circle" class="progress-step inactive">3</div>
                                    <div class="step-label inactive">Audience</div>
                                </div>
                            </div>
                        </div>

                        <form action="/Notification/send-message" method="POST" enctype="multipart/form-data" id="createGroupForm">
                            @csrf

                            <!-- STEP 1 -->
                            <div id="step1Content">
                                <div class="form-group">
                                    <label>CAMPAIGN NAME (Email Subject)</label>
                                    <input type="text" name="campaign_name" id="campaign_name" class="form-control" value="{{ old('campaign_name') }}" placeholder="e.g. November 2025 Water Bill">
                                    <span class="error-message" id="campaignName_error">Required</span>
                                </div>

                                <div class="form-group">
                                    <label>Description / Notes</label>
                                    <div class="rich-text-toolbar">
                                        <button type="button" class="btn btn-default btn-sm" id="boldBtn"><i class="fa fa-bold"></i></button>
                                        <button type="button" class="btn btn-default btn-sm" id="italicBtn"><i class="fa fa-italic"></i></button>
                                        <button type="button" class="btn btn-default btn-sm" id="underlineBtn"><i class="fa fa-underline"></i></button>
                                        <button type="button" class="btn btn-default btn-sm" id="linkBtn"><i class="fa fa-link"></i></button>
                                    </div>
                                    <textarea class="form-control rich-text-textarea" id="description" name="description" rows="5">{{ old('description') }}</textarea>
                                    <span class="error-message" id="descriptionError">Required</span>
                                </div>

                                <div class="form-group">
                                    <label>Attachment (PDF - Email Only)</label>
                                    <input type="file" name="attachment" class="form-control" accept=".pdf">
                                </div>

                                <div class="text-right" style="margin-top:40px;">
                                    <button type="button" class="btn btn-default btn-lg" id="back2table">Cancel</button>
                                    <button type="button" class="btn btn-primary btn-lg" id="continueToStep2">Continue →</button>
                                </div>
                            </div>

                            <!-- STEP 2 -->
                            <div id="step2Content" style="display:none;">
                                <div class="form-group">
                                    <label>MESSAGE TYPE</label><br>
                                    <label class="checkbox-inline"><input type="checkbox" id="useEmailTemplate" name="use_email_template" value="1"> Email</label>
                                    <label class="checkbox-inline"><input type="checkbox" id="useSmsTemplate" name="use_sms_template" value="1"> SMS</label>
                                    <span class="error-message" id="templateTypeError">Select at least one</span>
                                </div>

                                <div id="emailTemplateSection" style="display:none;">
                                    <label>Email Message</label>
                                    <textarea class="form-control rich-text-textarea" id="email_template" name="email_template" rows="10">{{ old('email_template') }}</textarea>
                                </div>

                                <div id="smsTemplateSection" style="display:none;">
                                    <label>SMS Message (160 chars)</label>
                                    <textarea class="form-control" id="sms_template" name="sms_template" rows="4" maxlength="160">{{ old('sms_template') }}</textarea>
                                </div>

                                <div class="text-right" style="margin-top:40px;">
                                    <button type="button" class="btn btn-default btn-lg" id="backToStep1">← Back</button>
                                    <button type="button" class="btn btn-primary btn-lg" id="continueToStep3">Next →</button>
                                </div>
                            </div>

                            <!-- STEP 3 -->
                            <div id="step3Content" style="display:none;">
                                <div class="row text-center" style="margin-bottom:30px;">
                                    <div class="col-md-6">
                                        <button type="button" class="btn btn-primary btn-block btn-lg" id="showEmailList">Individual Customers</button>
                                    </div>
                                    <div class="col-md-6">
                                        <button type="button" class="btn btn-success btn-block btn-lg" id="showGroupList">From Groups</button>
                                    </div>
                                </div>

                                <!-- Customers Table -->
                                <div id="emailListTable" style="display:none;">
                                    <div class="row" style="margin-bottom:15px;">
                                        <div class="col-md-6">
                                            <div class="form-group" style="margin-bottom:0;">
                                                <input type="text" id="emailSearch" class="form-control" placeholder="Search by name / email / phone">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="btn-group pull-right" role="group">
                                                <button type="button" class="btn btn-default status-filter active" data-status="all">
                                                    <i class="fa fa-users"></i> All (<span id="countAll">0</span>)
                                                </button>
                                                <button type="button" class="btn btn-default status-filter" data-status="active">
                                                    <i class="fa fa-check-circle text-success"></i> Active (<span id="countActive">0</span>)
                                                </button>
                                                <button type="button" class="btn btn-default status-filter" data-status="inactive">
                                                    <i class="fa fa-times-circle text-danger"></i> Inactive (<span id="countInactive">0</span>)
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div style="margin-bottom:15px;">
                                        <button type="button" class="btn btn-info btn-sm" id="selectAllCustomers"><i class="fa fa-check-square-o"></i> Select All (Page)</button>
                                        <button type="button" class="btn btn-success btn-sm" id="selectAllCustomersGlobal" style="margin-left:8px;"><i class="fa fa-check-square"></i> Select All (<span id="totalCustomers">0</span>)</button>
                                        <button type="button" class="btn btn-warning btn-sm" id="clearCustomers" style="margin-left:8px;"><i class="fa fa-times-circle"></i> Clear All</button>
                                        <span id="customerCount" class="label label-primary" style="margin-left:10px;padding:6px 10px;">0 selected</span>
                                    </div>

                                    <div class="table-responsive">
                                        <table class="table table-hover" id="emailTable">
                                            <thead>
                                                <tr>
                                                    <th>ICON</th>
                                                    <th>NAME</th>
                                                    <th>EMAIL</th>
                                                    <th>PHONE</th>
                                                    <th>STATUS</th>
                                                    <th>CREATED</th>
                                                    <th class="text-center"><input type="checkbox" id="selectAllCustomersHeader"> SELECT ALL</th>
                                                </tr>
                                            </thead>
                                            <tbody id="customerTableBody">
                                                <!-- Populated by JavaScript -->
                                            </tbody>
                                        </table>
                                    </div>
                                    <div id="customerPagination" class="text-center"></div>
                                </div>

                                <!-- Groups Table -->
                                <div id="groupListTable" style="display:none;">
                                    <div class="form-group">
                                        <input type="text" id="groupSearch" class="form-control" placeholder="Search groups">
                                    </div>
                                    <div style="margin-bottom:15px;">
                                        <button type="button" class="btn btn-success btn-sm" id="selectFirstGroup"><i class="fa fa-check"></i> Select First Group</button>
                                        <button type="button" class="btn btn-warning btn-sm" id="clearGroupSelection" style="margin-left:8px;"><i class="fa fa-times-circle"></i> Clear</button>
                                    </div>

                                    <div class="table-responsive">
                                        <table class="table table-hover" id="groupTable">
                                            <thead>
                                                <tr>
                                                    <th>ICON</th>
                                                    <th>GROUP NAME</th>
                                                    <th>TYPE</th>
                                                    <th>CREATED</th>
                                                    <th class="text-center">SELECT</th>
                                                </tr>
                                            </thead>
                                            <tbody id="groupTableBody">
                                                <!-- Populated by JavaScript -->
                                            </tbody>
                                        </table>
                                    </div>
                                    <div id="groupPagination" class="text-center"></div>
                                </div>

                                <div class="text-right" style="margin-top:40px;">
                                    <button type="button" class="btn btn-default btn-lg" id="backToStep2">← Back</button>
                                    <button type="submit" class="btn btn-success btn-lg"><i class="fa fa-paper-plane"></i> Send Message</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </div>

<script>
// Store all users and groups data
const allUsers = @json($users);
const allGroups = @json($groups);

$(document).ready(function(){
    const $s1 = $('#step1Content'), $s2 = $('#step2Content'), $s3 = $('#step3Content');
    const $line = $('#progressLine');
    let currentStep = 1;
    
    // Pagination settings
    const usersPerPage = 10;
    const groupsPerPage = 10;
    let currentUserPage = 1;
    let currentGroupPage = 1;
    let filteredUsers = [...allUsers];
    let filteredGroups = [...allGroups];
    let selectedCustomers = new Set();
    let selectedGroup = null;
    let currentStatusFilter = 'all'; // Track current filter

    // Step Navigation
    function go(n){
        currentStep = n;
        $line.css('width', n===1?'0%':n===2?'50%':'100%');
        $('.progress-step,.step-label').removeClass('active inactive');
        for(let i=1;i<=3;i++){
            $(`#step${i}Circle`).toggleClass('active',i<=n).toggleClass('inactive',i>n);
            $(`.step-label`).eq(i-1).toggleClass('active',i<=n).toggleClass('inactive',i>n);
        }
        $s1.toggle(n===1); 
        $s2.toggle(n===2); 
        $s3.toggle(n===3);
    }

    // Helper function to get avatar color
    function getAvatarColor(name) {
        let hash = 0;
        for (let i = 0; i < name.length; i++) {
            hash = name.charCodeAt(i) + ((hash << 5) - hash);
        }
        return Math.abs(hash).toString(16).substring(0, 6);
    }

    // Helper function to format date
    function formatDate(dateString) {
        if (!dateString) return 'Just now';
        const date = new Date(dateString);
        const now = new Date();
        const diffTime = Math.abs(now - date);
        const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
        
        if (diffDays === 0) return 'Today';
        if (diffDays === 1) return 'Yesterday';
        if (diffDays < 7) return `${diffDays} days ago`;
        if (diffDays < 30) return `${Math.floor(diffDays / 7)} weeks ago`;
        if (diffDays < 365) return `${Math.floor(diffDays / 30)} months ago`;
        return `${Math.floor(diffDays / 365)} years ago`;
    }

    // Update status counts
    function updateStatusCounts() {
        const activeCount = allUsers.filter(u => u.status === 'active' || u.status === 1 || u.status === true).length;
        const inactiveCount = allUsers.filter(u => u.status === 'inactive' || u.status === 0 || u.status === false).length;
        const allCount = allUsers.length;
        
        $('#countAll').text(allCount);
        $('#countActive').text(activeCount);
        $('#countInactive').text(inactiveCount);
        $('#totalCustomers').text(filteredUsers.length);
    }

    // Apply filters
    function applyFilters() {
        const searchTerm = $('#emailSearch').val().toLowerCase();
        
        // First filter by status
        let statusFiltered = allUsers;
        if (currentStatusFilter === 'active') {
            statusFiltered = allUsers.filter(u => u.status === 'active' || u.status === 1 || u.status === true);
        } else if (currentStatusFilter === 'inactive') {
            statusFiltered = allUsers.filter(u => u.status === 'inactive' || u.status === 0 || u.status === false);
        }
        
        // Then filter by search term
        filteredUsers = statusFiltered.filter(user => {
            return (user.name && user.name.toLowerCase().includes(searchTerm)) ||
                   (user.email && user.email.toLowerCase().includes(searchTerm)) ||
                   (user.phone && user.phone.toLowerCase().includes(searchTerm));
        });
        
        currentUserPage = 1;
        updateStatusCounts();
        renderCustomers();
    }

    // Render Customers Table
    function renderCustomers() {
        const startIndex = (currentUserPage - 1) * usersPerPage;
        const endIndex = startIndex + usersPerPage;
        const pageUsers = filteredUsers.slice(startIndex, endIndex);
        
        let html = '';
        pageUsers.forEach(user => {
            const isChecked = selectedCustomers.has(user.id);
            const isActive = user.status === 'active' || user.status === 1 || user.status === true;
            const statusClass = isActive ? 'status-active' : 'status-inactive';
            const statusText = isActive ? 'Active' : 'Inactive';
            
            html += `
                <tr>
                    <td><div class="avatar-circle" style="background:#${getAvatarColor(user.name)}">${user.name.charAt(0).toUpperCase()}</div></td>
                    <td><strong>${user.name}</strong></td>
                    <td><small class="text-muted">${user.email || '—'}</small></td>
                    <td><small>${user.phone || '—'}</small></td>
                    <td><span class="status-badge ${statusClass}">${statusText}</span></td>
                    <td><small class="text-muted">${formatDate(user.created_at)}</small></td>
                    <td class="text-center">
                        <input type="checkbox" name="selected_users[]" value="${user.id}" class="customer-checkbox" ${isChecked ? 'checked' : ''}>
                    </td>
                </tr>
            `;
        });
        
        $('#customerTableBody').html(html);
        renderCustomerPagination();
        updateCustomerCount();
        updateSelectAllCheckbox();
    }

    // Helper function to generate smart page numbers
    function getPageNumbers(currentPage, totalPages) {
        const delta = 2;
        const pages = [];
        
        pages.push(1);
        
        const rangeStart = Math.max(2, currentPage - delta);
        const rangeEnd = Math.min(totalPages - 1, currentPage + delta);
        
        if (rangeStart > 2) {
            pages.push('...');
        }
        
        for (let i = rangeStart; i <= rangeEnd; i++) {
            pages.push(i);
        }
        
        if (rangeEnd < totalPages - 1) {
            pages.push('...');
        }
        
        if (totalPages > 1) {
            pages.push(totalPages);
        }
        
        return pages;
    }

    // Render Customer Pagination with Ellipsis
    function renderCustomerPagination() {
        const totalPages = Math.ceil(filteredUsers.length / usersPerPage);
        if (totalPages <= 1) {
            $('#customerPagination').html('');
            return;
        }
        
        let html = '<div class="pagination">';
        
        if (currentUserPage > 1) {
            html += `<a href="#" class="customer-page" data-page="${currentUserPage - 1}">← Previous</a>`;
        } else {
            html += `<span class="disabled">← Previous</span>`;
        }
        
        const pages = getPageNumbers(currentUserPage, totalPages);
        pages.forEach(page => {
            if (page === '...') {
                html += `<span class="disabled">...</span>`;
            } else if (page === currentUserPage) {
                html += `<span class="active">${page}</span>`;
            } else {
                html += `<a href="#" class="customer-page" data-page="${page}">${page}</a>`;
            }
        });
        
        if (currentUserPage < totalPages) {
            html += `<a href="#" class="customer-page" data-page="${currentUserPage + 1}">Next →</a>`;
        } else {
            html += `<span class="disabled">Next →</span>`;
        }
        
        html += '</div>';
        $('#customerPagination').html(html);
    }

    // Render Groups Table
    function renderGroups() {
        const startIndex = (currentGroupPage - 1) * groupsPerPage;
        const endIndex = startIndex + groupsPerPage;
        const pageGroups = filteredGroups.slice(startIndex, endIndex);
        
        let html = '';
        pageGroups.forEach(group => {
            const isChecked = selectedGroup === group.id;
            html += `
                <tr>
                    <td><div class="avatar-circle" style="background:#${getAvatarColor(group.name)}">${group.name.charAt(0).toUpperCase()}</div></td>
                    <td><strong>${group.name}</strong></td>
                    <td>${group.type}</td>
                    <td><small class="text-muted">${formatDate(group.created_at)}</small></td>
                    <td class="text-center">
                        <input type="radio" name="selected_group" value="${group.id}" class="group-radio" ${isChecked ? 'checked' : ''}>
                    </td>
                </tr>
            `;
        });
        
        $('#groupTableBody').html(html);
        renderGroupPagination();
    }

    // Render Group Pagination with Ellipsis
    function renderGroupPagination() {
        const totalPages = Math.ceil(filteredGroups.length / groupsPerPage);
        if (totalPages <= 1) {
            $('#groupPagination').html('');
            return;
        }
        
        let html = '<div class="pagination">';
        
        if (currentGroupPage > 1) {
            html += `<a href="#" class="group-page" data-page="${currentGroupPage - 1}">← Previous</a>`;
        } else {
            html += `<span class="disabled">← Previous</span>`;
        }
        
        const pages = getPageNumbers(currentGroupPage, totalPages);
        pages.forEach(page => {
            if (page === '...') {
                html += `<span class="disabled">...</span>`;
            } else if (page === currentGroupPage) {
                html += `<span class="active">${page}</span>`;
            } else {
                html += `<a href="#" class="group-page" data-page="${page}">${page}</a>`;
            }
        });
        
        if (currentGroupPage < totalPages) {
            html += `<a href="#" class="group-page" data-page="${currentGroupPage + 1}">Next →</a>`;
        } else {
            html += `<span class="disabled">Next →</span>`;
        }
        
        html += '</div>';
        $('#groupPagination').html(html);
    }

    // Update Customer Counter
    function updateCustomerCount() {
        $('#customerCount').text(`${selectedCustomers.size} selected`);
    }

    // Update Select All Checkbox
    function updateSelectAllCheckbox() {
        const visibleCheckboxes = $('.customer-checkbox');
        const allChecked = visibleCheckboxes.length > 0 && visibleCheckboxes.filter(':checked').length === visibleCheckboxes.length;
        $('#selectAllCustomersHeader').prop('checked', allChecked);
    }

    // Status Filter Click Handler
    $('.status-filter').click(function() {
        $('.status-filter').removeClass('active');
        $(this).addClass('active');
        currentStatusFilter = $(this).data('status');
        applyFilters();
    });

    // Pagination Click Handlers
    $(document).on('click', '.customer-page', function(e) {
        e.preventDefault();
        currentUserPage = parseInt($(this).data('page'));
        renderCustomers();
    });

    $(document).on('click', '.group-page', function(e) {
        e.preventDefault();
        currentGroupPage = parseInt($(this).data('page'));
        renderGroups();
    });

    // Customer Selection Handlers
    $(document).on('change', '.customer-checkbox', function() {
        const userId = parseInt($(this).val());
        if ($(this).is(':checked')) {
            selectedCustomers.add(userId);
        } else {
            selectedCustomers.delete(userId);
        }
        updateCustomerCount();
        updateSelectAllCheckbox();
    });

    $('#selectAllCustomersHeader').click(function() {
        const isChecked = $(this).is(':checked');
        $('.customer-checkbox').each(function() {
            const userId = parseInt($(this).val());
            $(this).prop('checked', isChecked);
            if (isChecked) {
                selectedCustomers.add(userId);
            } else {
                selectedCustomers.delete(userId);
            }
        });
        updateCustomerCount();
    });

    $('#selectAllCustomers').click(function() {
        const visibleCheckboxes = $('.customer-checkbox');
        const allChecked = visibleCheckboxes.filter(':checked').length === visibleCheckboxes.length;
        
        visibleCheckboxes.each(function() {
            const userId = parseInt($(this).val());
            $(this).prop('checked', !allChecked);
            if (!allChecked) {
                selectedCustomers.add(userId);
            } else {
                selectedCustomers.delete(userId);
            }
        });
        updateCustomerCount();
        updateSelectAllCheckbox();
    });

    $('#selectAllCustomersGlobal').click(function() {
        if (selectedCustomers.size === filteredUsers.length) {
            // Deselect all filtered users
            filteredUsers.forEach(user => selectedCustomers.delete(user.id));
        } else {
            // Select all filtered users
            filteredUsers.forEach(user => selectedCustomers.add(user.id));
        }
        renderCustomers();
    });

    $('#clearCustomers').click(function() {
        selectedCustomers.clear();
        renderCustomers();
    });

    // Group Selection Handlers
    $(document).on('change', '.group-radio', function() {
        selectedGroup = parseInt($(this).val());
    });

    $('#selectFirstGroup').click(function() {
        if (filteredGroups.length > 0) {
            selectedGroup = filteredGroups[0].id;
            renderGroups();
        }
    });

    $('#clearGroupSelection').click(function() {
        selectedGroup = null;
        renderGroups();
    });

    // Search Customers
    $('#emailSearch').on('keyup', function() {
        applyFilters();
    });

    // Search Groups
    $('#groupSearch').on('keyup', function() {
        const searchTerm = $(this).val().toLowerCase();
        filteredGroups = allGroups.filter(group => {
            return (group.name && group.name.toLowerCase().includes(searchTerm)) ||
                   (group.type && group.type.toLowerCase().includes(searchTerm));
        });
        currentGroupPage = 1;
        renderGroups();
    });

    // Show Customer/Group Lists
    $('#showEmailList').click(function() {
        $('#emailListTable').show();
        $('#groupListTable').hide();
        selectedGroup = null;
        renderCustomers();
    });

    $('#showGroupList').click(function() {
        $('#groupListTable').show();
        $('#emailListTable').hide();
        renderGroups();
    });

    // Step Navigation
    $('#continueToStep2').click(function() {
        if ($('#campaign_name').val().trim() && $('#description').val().trim()) {
            go(2);
        } else {
            alert('Please fill campaign name and description');
        }
    });
    
    $('#continueToStep3').click(function() {
        const hasEmail = $('#useEmailTemplate').is(':checked');
        const hasSms = $('#useSmsTemplate').is(':checked');
        
        if (!hasEmail && !hasSms) {
            alert('Please select at least one message type (Email or SMS)');
            return;
        }
        
        if (hasEmail && !$('#email_template').val().trim()) {
            alert('Please enter email message');
            return;
        }
        
        if (hasSms && !$('#sms_template').val().trim()) {
            alert('Please enter SMS message');
            return;
        }
        
        go(3);
    });
    
    $('#backToStep1').click(() => go(1));
    $('#backToStep2').click(() => go(2));
    $('#back2table').click(() => location.href='/Notification/groups');

    // Message Type Toggles
    $('#useEmailTemplate').change(function() {
        $('#emailTemplateSection').toggle(this.checked);
    });
    
    $('#useSmsTemplate').change(function() {
        $('#smsTemplateSection').toggle(this.checked);
    });

    // Initialize
    go(1);
    updateStatusCounts();
    renderCustomers();
    renderGroups();
});
</script>
@endsection