@extends('layouts.admin_dynamic')

@section('content')
    <style>
        .panel {
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .progress-step {
            transition: all 0.3s ease;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            position: relative;
            z-index: 3;
        }

        .progress-step.active {
            background-color: #337ab7 !important;
            color: white !important;
            border-color: #337ab7 !important;
        }

        .progress-step.inactive {
            background-color: #f5f5f5;
            color: #999;
            border: 1px solid #ddd;
        }

        .progress-line {
            position: absolute;
            height: 2px;
            background-color: #e9ecef;
            top: 50%;
            width: 100%;
            z-index: 1;
        }

        .progress-line-active {
            position: absolute;
            height: 2px;
            background-color: #337ab7;
            top: 50%;
            z-index: 2;
            width: 0%;
            transition: width 0.3s ease;
        }

        .table-hover tbody tr:hover {
            background-color: rgba(0, 0, 0, 0.02);
        }

        .star-btn.starred {
            background-color: #f0ad4e !important;
            border-color: #f0ad4e !important;
            color: white !important;
        }



        .step-container {
            position: relative;
            margin-bottom: 30px;
        }

        .step-wrapper {
            display: table;
            width: 100%;
            position: relative;
        }

        .step-item {
            display: table-cell;
            text-align: center;
            vertical-align: top;
            position: relative;
        }

        .step-label {
            margin-top: 8px;
            font-size: 12px;
            font-weight: 600;
        }

        .step-label.active {
            color: #337ab7;
        }

        .step-label.inactive {
            color: #999;
        }

        .rich-text-toolbar {
            border: 1px solid #ddd;
            border-bottom: none;
            border-radius: 4px 4px 0 0;
            padding: 8px;
            background-color: #f5f5f5;
        }

        .rich-text-textarea {
            border-radius: 0 0 4px 4px;
            border-top: none;
            min-height: 200px;
        }

        .avatar-circle {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 14px;
            color: white;
            margin-right: 15px;
        }

        .avatar-small {
            width: 25px;
            height: 25px;
            font-size: 10px;
        }

        .action-buttons {
            display: inline-block;
        }

        .action-buttons>* {
            margin-right: 5px;
        }

        .user-info h5 {
            margin: 0 0 5px 0;
            font-weight: 500;
        }

        .user-info small {
            color: #999;
            display: block;
        }
    </style>

    <div class="content-wrapper">


        <section class="content-header m-3">
            <h1>New Notification Group</h1>
        </section>
        <!-- Main content -->
        <section class="content" id="requestContent">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box box-success">
                        <div class="box-header"></div>
                        <div class="box-body">
                            <div class="row" ng-controller="SearchItemCtrl">

                                <div class="col-sm-12">
                                    <!-- Progress Steps -->
                                    <div class="step-container">
                                        <div class="step-wrapper">
                                            <div class="progress-line"></div>
                                            <div class="progress-line-active" id="progressLine"></div>

                                            <!-- Step 1 -->
                                            <div class="step-item">
                                                <div id="step1Circle" class="progress-step active">1</div>
                                                <div id="step1Label" class="step-label active">New Group</div>
                                            </div>

                                            <!-- Step 2 -->
                                            <div class="step-item">
                                                <div id="step2Circle" class="progress-step inactive">2</div>
                                                <div id="step2Label" class="step-label inactive">Select Audience</div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Form -->
                                    <form action="/Notification/Groups/New/Post" method="POST" id="createGroupForm">
                                        <!-- Step 1: New Group Form -->
                                        <div id="step1Content">
                                            <div class="row">
                                                <div class="col-sm-12">
                                                    <!-- Group Name -->
                                                    <div class="form-group">
                                                        <label for="group_name" class="control-label">
                                                            Group Name <span class="text-danger">*</span>
                                                        </label>
                                                        <input type="text" class="form-control input-lg" id="group_name"
                                                            name="group_name" placeholder="Group Name" required>
                                                        <span class="help-block text-danger" id="group_name_error"
                                                            style="display: none;">
                                                            This value is required.
                                                        </span>
                                                    </div>

                                                    <!-- Description -->
                                                    <div class="form-group">
                                                        <label for="description" class="control-label">Description</label>

                                                        <!-- Rich Text Editor Toolbar -->
                                                        <div class="rich-text-toolbar">
                                                            <div class="btn-group" role="group">
                                                                <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>
                                                        </div>

                                                        <textarea class="form-control rich-text-textarea" id="description" name="description" rows="8"
                                                            placeholder="Enter group description..."></textarea>
                                                    </div>


                                                    <!-- Step 1 Actions -->
                                                    <div class="form-group" style="margin-top: 30px;">
                                                        <div class="pull-left">
                                                            <button type="button" class="btn btn-default btn-lg" id="back2table">
                                                                Cancel
                                                            </button>
                                                        </div>
                                                        <div class="pull-right">
                                                            <button type="button" class="btn btn-primary btn-lg"
                                                                id="continueToStep2">
                                                                Continue to Step 2
                                                                <i class="fa fa-arrow-right"></i>
                                                            </button>
                                                        </div>
                                                        <div class="clearfix"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Step 2: Select Audience -->
                                        <div id="step2Content" style="display: none;">
                                            <!-- Action Buttons -->
                                            <div class="row" style="margin-bottom: 20px;">
                                                <div class="col-xs-12">

                                                    <button type="button" class="btn btn-primary" id="addAllContactsBtn">
                                                        <i class="fa fa-users"></i> Add All The Contacts
                                                    </button>
                                                </div>
                                            </div>

                                            <!-- Users Table -->
                                            <div class="row">
                                                <div class="col-xs-12">
                                                      <div class="form-group">
                <input type="text" id="userSearch" class="form-control" placeholder="Search customers by name, email, or phone...">
            </div>
                                                    <div class="table-responsive">
                                                  <table class="table table-hover" id="userTable">
                                                            <thead>
                                                                <tr>
                                                                    <th>ICON</th>
                                                                    <th>NAME</th>
                                                                    <th>EMAIL</th>
                                                                    <th>PHONE</th>
                                                                    <th>CREATED</th>
                                                                    <th>ACTION</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                @foreach ($users as $user)
                                                                <tr>
                                                                    <td>
                                                                        {{ strtoupper(substr($user->name, 0, 1)) }}
                                                                    </td>
                                                                    <td>
                                                                        <h5>{{ $user->name }}</h5>
                                                                    </td>
                                                                    <td>
                                                                        <small>{{ $user->email }}</small>
                                                                    </td>
                                                                    <td>
                                                                        <small>{{ $user->phone }}</small>
                                                                    </td>
                                                                    <td>
                                                                        <span class="text-muted">{{$user->created_at ? $user->created_at->diffForHumans() : 'Just now' }}</span>
                                                                    </td>
                                                                    <td class="text-center" style="vertical-align: middle;">
                                                                        <div class="action-buttons">
                                                                            <input type="checkbox" name="selected_users[]" value="{{ $user->id }}">
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                            @endforeach


                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Step 2 Actions -->
                                            <div class="form-group" style="margin-top: 30px;">
                                                <div class="pull-left">
                                                    <button type="button" class="btn btn-default btn-lg"
                                                        id="backToStep1">
                                                        <i class="fa fa-arrow-left"></i> Back to Step 1
                                                    </button>
                                                </div>
                                                <div class="pull-right">
                                                    <button type="submit" class="btn btn-success btn-lg">
                                                        Create Group
                                                        <i class="fa fa-check"></i>
                                                    </button>
                                                </div>
                                                <div class="clearfix"></div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </section>
    </div>


    <script>
        $(document).ready(function() {
            var currentStep = 1;

            // Step navigation elements
            var $step1Content = $('#step1Content');
            var $step2Content = $('#step2Content');
            var $step1Circle = $('#step1Circle');
            var $step2Circle = $('#step2Circle');
            var $step1Label = $('#step1Label');
            var $step2Label = $('#step2Label');
            var $progressLine = $('#progressLine');

            // Form elements
            var $form = $('#createGroupForm');
            var $groupNameInput = $('#group_name');
            var $groupNameError = $('#group_name_error');

            // Button elements
            var $continueToStep2 = $('#continueToStep2');
            var $backToStep1 = $('#backToStep1');
            var $updateGroupBtn = $('#updateGroupBtn');
            var $addAllContactsBtn = $('#addAllContactsBtn');
            var $back2table = $('#back2table');

            // Step navigation functions
            function showStep(step) {
                if (step === 1) {
                    // Show step 1
                    $step1Content.show();
                    $step2Content.hide();

                    // Update progress indicators
                    $step1Circle.removeClass('inactive').addClass('active');
                    $step1Label.removeClass('inactive').addClass('active');
                    $step2Circle.removeClass('active').addClass('inactive');
                    $step2Label.removeClass('active').addClass('inactive');
                    $progressLine.css('width', '0%');

                    currentStep = 1;
                } else if (step === 2) {
                    // Show step 2
                    $step1Content.hide();
                    $step2Content.show();

                    // Update progress indicators
                    $step1Circle.removeClass('active').addClass('inactive');
                    $step1Label.removeClass('active').addClass('inactive');
                    $step2Circle.removeClass('inactive').addClass('active');
                    $step2Label.removeClass('inactive').addClass('active');
                    $progressLine.css('width', '100%');

                    currentStep = 2;
                }
            }

            // Step 1 validation
            function validateStep1() {
                var isValid = true;

                if ($groupNameInput.val().trim() === '') {
                    $groupNameInput.closest('.form-group').addClass('has-error');
                    $groupNameError.show();
                    isValid = false;
                } else {
                    $groupNameInput.closest('.form-group').removeClass('has-error');
                    $groupNameError.hide();
                }

                return isValid;
            }

            // Real-time validation for group name
            $groupNameInput.on('blur', function() {
                validateStep1();
            });

            // Continue to Step 2 button
            $continueToStep2.on('click', function() {
                if (validateStep1()) {
                    showStep(2);
                } else {
                    $('html, body').animate({
                        scrollTop: $groupNameInput.offset().top - 100
                    }, 500);
                }
            });

            $('#back2table').on('click', function() {
    window.location.href = '/Notification/groups'; // Replace with your actual URL
});

            // Back to Step 1 button
            $backToStep1.on('click', function() {
                showStep(1);
            });

            // Update Group button (goes back to step 1)
            $updateGroupBtn.on('click', function() {
                showStep(1);
            });

            // Rich text editor functionality (adds markdown to textarea)
            $('#boldBtn').on('click', function() {
                var $textarea = $('#description');
                var textarea = $textarea[0];
                var start = textarea.selectionStart;
                var end = textarea.selectionEnd;
                var selectedText = $textarea.val().substring(start, end);
                var beforeText = $textarea.val().substring(0, start);
                var afterText = $textarea.val().substring(end);

                $textarea.val(beforeText + '**' + selectedText + '**' + afterText);
                $textarea.focus();
            });

            $('#italicBtn').on('click', function() {
                var $textarea = $('#description');
                var textarea = $textarea[0];
                var start = textarea.selectionStart;
                var end = textarea.selectionEnd;
                var selectedText = $textarea.val().substring(start, end);
                var beforeText = $textarea.val().substring(0, start);
                var afterText = $textarea.val().substring(end);

                $textarea.val(beforeText + '*' + selectedText + '*' + afterText);
                $textarea.focus();
            });

            $('#underlineBtn').on('click', function() {
                var $textarea = $('#description');
                var textarea = $textarea[0];
                var start = textarea.selectionStart;
                var end = textarea.selectionEnd;
                var selectedText = $textarea.val().substring(start, end);
                var beforeText = $textarea.val().substring(0, start);
                var afterText = $textarea.val().substring(end);

                $textarea.val(beforeText + '__' + selectedText + '__' + afterText);
                $textarea.focus();
            });

            $('#linkBtn').on('click', function() {
                var url = prompt('Enter URL:');
                if (url) {
                    var $textarea = $('#description');
                    var textarea = $textarea[0];
                    var start = textarea.selectionStart;
                    var end = textarea.selectionEnd;
                    var selectedText = $textarea.val().substring(start, end) || 'Link Text';
                    var beforeText = $textarea.val().substring(0, start);
                    var afterText = $textarea.val().substring(end);

                    $textarea.val(beforeText + '[' + selectedText + '](' + url + ')' + afterText);
                    $textarea.focus();
                }
            });

            // Add All Contacts button functionality
            $addAllContactsBtn.on('click', function() {
                var $checkboxes = $('input[name="selected_users[]"]');
                var allChecked = $checkboxes.filter(':checked').length === $checkboxes.length;

                $checkboxes.prop('checked', !allChecked);

                // Update button text
                $(this).html(allChecked ?
                    '<i class="fa fa-users"></i> Add All The Contacts' :
                    '<i class="fa fa-user-times"></i> Remove All Contacts');
            });

            // Star button functionality
            $('.star-btn').on('click', function() {
                var $icon = $(this).find('i');
                if ($icon.hasClass('fa-star-o')) {
                    $icon.removeClass('fa-star-o').addClass('fa-star');
                    $(this).addClass('starred');
                } else {
                    $icon.removeClass('fa-star').addClass('fa-star-o');
                    $(this).removeClass('starred');
                }
            });

            // Form submission
            $form.on('submit', function(e) {
                e.preventDefault();

                if (currentStep === 1) {
                    if (validateStep1()) {
                        showStep(2);
                    }
                } else if (currentStep === 2) {
                    var $selectedUsers = $('input[name="selected_users[]"]:checked');

                    if ($selectedUsers.length === 0) {
                        alert('Please select at least one user for the group.');
                        return false;
                    }

                  
                }
            });

            // Initialize with step 1
            showStep(1);


            $('#userSearch').on('keyup', function() {
    var searchText = $(this).val().toLowerCase();
    $('#userTable tbody tr').each(function() {
        var name = $(this).find('td:nth-child(2) h5').text().toLowerCase();
        var email = $(this).find('td:nth-child(3) small').text().toLowerCase();
        var phone = $(this).find('td:nth-child(4) small').text().toLowerCase();
        if (name.includes(searchText) || email.includes(searchText) || phone.includes(searchText)) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
});


        });


      
    </script>
@endsection