@extends('layouts.app')
@section('content')
<div class="app sidebar-mini">
    <!-- Page -->
    <div class="page">
        <div class="page-main">
            <!-- App-Content -->
            <div class="app-content main-content">
                <div class="side-app">
                    <!--app header-->
                    @include('layouts.admin.appheader')
                    <!--/app header-->
                    <div class="containersection">
                        <!--Page header-->
                        <div class="page-header">
                            <div class="page-leftheader">
                            </div>
                            <div class="flashmsgec">
                                @include('layouts.flashmsg')
                            </div>
                            <div class="page-rightheader">
                            </div>
                        </div>
                        <!--End Page header-->
                        <div class="card carddivision">
                            <div class="row">
                                <!-- Side Menu Bar Start -->
                                <div class="ringimaimenubar col-lg-1 col-md-1 col-sm-1 col-xs-1">
                                    @include('layouts.admin.sidemenubar')
                                </div>
                                <!-- Side Menu Bar End -->
                                <!-- Main View Start -->
                                <div class="ringimaimain col-lg-11 col-md-11 col-sm-11 col-xs-11">
                                    <div class="row">
                                        <div class="cardleft col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <div class="card carddivision commcard">
                                                <div class="card-header mb-4">
                                                    <div class="card-title">Workflows</div>
                                                </div>
                                                <div class="card-body cardbody">
                                                    <div class="calllogtab col-lg-12 col-md-12 col-sm-12 col-md-12 px-0">
                                                        <ul class="nav nav-tabs calllogtabs px-3" id="myTab" role="tablist">
                                                            <li class="nav-item" role="presentation">
                                                                <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true"><span class="material-symbols-outlined">Automation</span>&nbsp;&nbsp;Workflows</button>
                                                            </li>
                                                            <li class="nav-item" role="presentation">
                                                                <button class="nav-link disabled" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false"><span class="material-symbols-outlined">manage_accounts</span>&nbsp;&nbsp;Manage Modifiers</button>
                                                            </li>
                                                        </ul>
                                                        <div class="tab-content" id="myTabContent" style="height: auto;overflow: unset;">
                                                            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                                                <!-- Desktop View -->    
                                                                <div id="table-wrapper" class="table-responsive commtlb">
                                                                    <table class="table table-bordered text-nowrap tablelistingsec" id="example1">
                                                                        <thead>
                                                                            <tr>
                                                                                <th class="wd-15p border-bottom-0">Name</th>
                                                                                <th class="wd-15p border-bottom-0">Step Count</th>
                                                                                <th class="wd-15p border-bottom-0">Modifiers</th>
                                                                                <th class="wd-15p border-bottom-0">Created</th>
                                                                                <th class="wd-10p border-bottom-0">Updated</th>
                                                                                <th class="wd-10p border-bottom-0 text-center">Action</th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                            @foreach ($workflows as $workflow)
                                                                            <tr>
                                                                                <td>{{ isset($workflow['name']) && !empty($workflow['name']) ? $workflow['name'] : 'N/A' }}</td>
                                                                                <td>{{ isset($workflow['nodes']) && !empty($workflow['nodes']) ? count($workflow['nodes']) : 'N/A' }}</td>
                                                                                <td>
                                                                                    <ul class="modilist">
                                                                                        @if (!empty($workflow['modifiers']))
                                                                                            @foreach ($workflow['modifiers'] as $mod)
                                                                                                <li class="{{ $mod['show_to_customer'] == 1 ? 'li_active' : '' }}" id="mod_{{ $mod['id'] }}">{{ $mod['modifier'] }}</li>
                                                                                            @endforeach
                                                                                        @else
                                                                                            <span class="text-muted">—</span>
                                                                                        @endif
                                                                                    </ul>
                                                                                </td>
                                                                                <td @if($workflow['createdAtFormatted'] != 'N/A') data-utc-time="{{ $workflow['createdAtFormatted'] }}" @endif>{{ $workflow['createdAtFormatted'] }}</td>
                                                                                <td @if($workflow['updatedAtFormatted'] != 'N/A') data-utc-time="{{ $workflow['updatedAtFormatted'] }}" @endif>{{ $workflow['updatedAtFormatted'] }}</td>
                                                                                <td>
                                                                                <div class="actiondiv">
                                                                                    <a href="{{ route('admin.update_workflow_modifier', ['id' => $workflow['id']]) }}" class="syncmodifiericon" data-placement="left" data-toggle="tooltip" title="Sync Modifier"><span class="material-symbols-outlined">sync</span></a>&nbsp;&nbsp;&nbsp;
                                                                                    <button 
                                                                                        class="manage-modifiers-btn" 
                                                                                        data-id="{{ $workflow['id'] }}" 
                                                                                        data-name="{{ $workflow['name'] }}" data-placement="left" data-toggle="tooltip" title="Manage Modifier">
                                                                                        <span class="material-symbols-outlined">manage_accounts</span>
                                                                                    </button>
                                                                                </div>
                                                                                </td>
                                                                            </tr>
                                                                            @endforeach
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                                <!-- Mobile View -->
                                                                <div class="mobile-card-view">
                                                                    <div class="mobile-controls">
                                                                        <div class="entries-control">
                                                                            <label class="mb-0">
                                                                                <select id="mobile-entries">
                                                                                    <option value="10">10</option>
                                                                                    <option value="25">25</option>
                                                                                    <option value="50">50</option>
                                                                                    <option value="100">100</option>
                                                                                </select>
                                                                            </label>
                                                                        </div>
                                                                        <div class="search-control">
                                                                            <input type="text" id="mobile-search" placeholder="Search">
                                                                        </div>
                                                                    </div>
                                                                    
                                                                    <div id="mobile-cards-container">
                                                                        @foreach ($workflows as $workflow)
                                                                        <div class="workflow-card" data-search="{{ strtolower($workflow['name'] ?? '') }}">
                                                                            <div class="card-header-row">
                                                                                <div class="card-title">{{ $workflow['name'] ?? 'N/A' }}</div>
                                                                                <div class="actiondiv">
                                                                                    <a href="{{ route('admin.update_workflow_modifier', ['id' => $workflow['id']]) }}" class="syncmodifiericon mr-2" title="Sync Modifier">
                                                                                        <span class="material-symbols-outlined">sync</span>
                                                                                    </a>
                                                                                    <button class="manage-modifiers-btn" data-id="{{ $workflow['id'] }}" data-name="{{ $workflow['name'] }}" title="Manage Modifier">
                                                                                        <span class="material-symbols-outlined">manage_accounts</span>
                                                                                    </button>
                                                                                </div>
                                                                            </div>
                                                                            <div class="card-field col-md-12 px-0">
                                                                                <div class="row">
                                                                                    <div class="field-label col-md-3 col-sm-3 col-xs-3">Steps</div>
                                                                                    <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                                                                                    <div class="field-value col-md-8 col-sm-8 col-xs-8">{{ isset($workflow['nodes']) && !empty($workflow['nodes']) ? count($workflow['nodes']) : 'N/A' }}</div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="card-field col-md-12 px-0">
                                                                                <div class="row">
                                                                                    <div class="field-label col-md-3 col-sm-3 col-xs-3">Modifiers</div>
                                                                                    <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                                                                                    <div class="field-value col-md-8 col-sm-8 col-xs-8">
                                                                                        <ul class="modilist" style="margin: 0; padding-left: 15px;">
                                                                                            @if (!empty($workflow['modifiers']))
                                                                                                @foreach ($workflow['modifiers'] as $mod)
                                                                                                    <li class="{{ $mod['show_to_customer'] == 1 ? 'li_active' : '' }}" id="mod_{{ $mod['id'] }}">{{ $mod['modifier'] }}</li>
                                                                                                @endforeach
                                                                                            @else
                                                                                                <span class="text-muted">—</span>
                                                                                            @endif
                                                                                        </ul>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="card-field col-md-12 px-0">
                                                                                <div class="row">
                                                                                    <div class="field-label col-md-3 col-sm-3 col-xs-3">Created</div>
                                                                                    <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                                                                                    <div class="field-value col-md-8 col-sm-8 col-xs-8" @if($workflow['createdAtFormatted'] != 'N/A') data-utc-time="{{ $workflow['createdAtFormatted'] }}" @endif>{{ $workflow['createdAtFormatted'] }}</div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="card-field col-md-12 px-0">
                                                                                <div class="row">
                                                                                    <div class="field-label col-md-3 col-sm-3 col-xs-3">Updated</div>
                                                                                    <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                                                                                    <div class="field-value col-md-8 col-sm-8 col-xs-8" @if($workflow['updatedAtFormatted'] != 'N/A') data-utc-time="{{ $workflow['updatedAtFormatted'] }}" @endif>{{ $workflow['updatedAtFormatted'] }}</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        @endforeach
                                                                    </div>
                                                                    
                                                                    <div class="mobile-info">
                                                                        <span id="entries-info">Showing 1 to 10 of {{ count($workflows) }} entries</span>
                                                                    </div>
                                                                    
                                                                    <div class="mobile-pagination" id="mobile-pagination"></div>
                                                                </div>
                                                            </div>
                                                            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                                                                <h5 class="tableinfo">Manage Modifiers for: <span id="assistant-name"></span></h5>
                                                                <div id="modifiers-content">
                                                                    <div id="table-wrapper" class="table-responsive">
                                                                    <table class="table table-bordered text-nowrap tablelistingsec" id="example2Modifier">
                                                                        <thead>
                                                                            <tr>
                                                                                <th class="wd-15p border-bottom-0">Modifier</th>
                                                                                <th class="wd-10p border-bottom-0 text-center">Customer Visibility</th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody id="modifier-rows">
                                                                            
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Main View End -->
                            </div>
                        </div>
                        <!-- <div class="card carddivision">
                            <div class="card-header">
                                <div class="card-title">Workflows</div>
                            </div>
                            <div class="card-body">
                                <div id="table-wrapper" class="table-responsive">
                                    <table class="table table-bordered text-nowrap tablelistingsec" id="example1">
                                        <thead>
                                            <tr>
                                                <th class="wd-15p border-bottom-0">S.No</th>
                                                <th class="wd-15p border-bottom-0">Name</th>
                                                <th class="wd-15p border-bottom-0">Step Count</th>
                                                <th class="wd-15p border-bottom-0">Modifiers</th>
                                                <th class="wd-15p border-bottom-0">Created</th>
                                                <th class="wd-10p border-bottom-0">Updated</th>
                                                <th class="wd-10p border-bottom-0 text-center">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($workflows as $workflow)
                                            <tr>
                                                <td>{{$workflow['sno']}}</td>
                                                <td>{{ isset($workflow['name']) && !empty($workflow['name']) ? $workflow['name'] : 'N/A' }}</td>
                                                <td>{{ isset($workflow['nodes']) && !empty($workflow['nodes']) ? count($workflow['nodes']) : 'N/A' }}</td>
                                                <td>
                                                    @if (!empty($workflow['modifiers']))
                                                        @foreach ($workflow['modifiers'] as $mod)
                                                            <div class="badge bg-info mb-1" style="color:white;">{{ $mod['modifier'] }}</div>
                                                        @endforeach
                                                    @else
                                                        <span class="text-muted">—</span>
                                                    @endif
                                                </td>
                                                <td @if($workflow['createdAtFormatted'] != 'N/A') data-utc-time="{{ $workflow['createdAtFormatted'] }}" @endif>{{ $workflow['createdAtFormatted'] }}</td>
                                                <td @if($workflow['updatedAtFormatted'] != 'N/A') data-utc-time="{{ $workflow['updatedAtFormatted'] }}" @endif>{{ $workflow['updatedAtFormatted'] }}</td>
                                                <td>
                                                <div class="actiondiv">
                                                <a href="{{ route('admin.update_workflow_modifier', ['id' => $workflow['id']]) }}" class="badge bg-success" style="color:white;">Sync Modifiers</a>
                                                </div>
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div> -->
                    </div>
                </div>
            </div>
            <!-- End app-content-->
        </div>
        <!--Footer-->
        @include('layouts.appfooter')
        <!-- End Footer-->
    </div>
    <!-- End Page -->

    <!-- Link Customer -->
    <div class="modal fade linkcustomerpopup" id="assignCustomerModal" tabindex="-1" aria-labelledby="assignCustomerModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fe fe-link"></i>&nbsp; Link Customer</h5>
                    <button type="button" class="btn-close" data-dismiss="modal" onclick="emptyfields()"><i class="fe fe-x"></i></button>
                </div>
                <div class="modal-body">
                    <form method="POST" action="{{ route('admin.link_customer') }}">
                        @csrf
                        <input type="hidden" id="phone_number_id" name="phone_number_id" value="">
                        <div class="row">
                            <div class="linkformdiv col-lg-6 col-md-12 col-sm-12 col-xs-12">
                                <div class="form-group">
                                    <label class="form-label">Phone Number</label>
                                    <input type="text" id="phone_number" name="phone_number" value="" class="form-control" readonly required>
                                </div>
                            </div>
                            <div class="linkformdiv col-lg-6 col-md-12 col-sm-12 col-xs-12">
                                <div class="form-group">
                                    <label class="form-label">Customer <span class="text-red">*</span></label>
                                    <select name="customer" id="customer" class="form-control select2" required>
                                    <option value="">Select Customer</option>
                                        
                                    </select>
                                </div>
                            </div>
                            <div class="linkformbtn col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <button type="submit" name="submit" class="link-btn">Link</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Back to top -->
    <a href="#top" id="back-to-top"><i class="fe fe-chevrons-up"></i></a>
</div>
@include('includes.jslinks_common')
<script>
    function formatToLocalTime(utcTimeString) {
        const date = new Date(utcTimeString);
        return date.toLocaleString(undefined, {
            year: 'numeric',
            month: 'short',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit',
            //timeZoneName: 'short',
            hour12: false
        });
    }

    document.querySelectorAll('[data-utc-time]').forEach(el => {
        const utc = el.getAttribute('data-utc-time');
        if (utc) {
            const formated = formatToLocalTime(utc);
            el.innerHTML = '<i class="fe fe-calendar calicon"></i>&nbsp;&nbsp;' + formated;
        }
    });

    $(document).on('click', '.clickable-row', function () {
        const numberId = $(this).data('id');
        const phoneNumber = $(this).data('number');
        $('#phone_number_id').val(numberId);
        $('#phone_number').val(phoneNumber);
        $('#assignCustomerModal').modal('show');
    });
    function emptyfields() {
        $('#phone_number_id').val('');
        $('#phone_number').val('');
        $('#customer').val('').trigger('change'); // resets Select2 dropdown
    }
</script>
<script>
    $(document).on('change', '.show-to-customer', function () {
        let id = $(this).data('id');
        let value = $(this).is(':checked') ? 1 : 0;

        $.ajax({
            url: "{{ route('workflow-modifiers.updateShow') }}",
            method: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                id: id,
                show_to_customer: value
            },
            success: function (res) {
                if (res.success) {

                    let $li = $('#mod_'+id); // adjust selector to your HTML
                    $('.workflow-card li[id="mod_'+id+'"], .tablelistingsec li[id="mod_'+id+'"]').each(function() {
                        if (value === 1) {
                            $(this).addClass('li_active');
                        } else {
                            $(this).removeClass('li_active');
                        }
                    });

                    Swal.fire({
                        icon: 'success',
                        title: 'Updated!',
                        text: 'customer visibility status updated successfully.',
                        timer: 1500,
                        showConfirmButton: false
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: 'Something went wrong.'
                    });
                }
            },
            error: function () {
                Swal.fire({
                    icon: 'error',
                    title: 'Error!',
                    text: 'Could not update.'
                });
            }
        });
    });
</script>
<script>
    function setMobileSearchPlaceholder1() {
        const input = $('#example2Modifier_wrapper input[type="search"]');
        if (window.innerWidth <= 767) {
            input.attr('placeholder', 'search');
        } else {
            input.attr('placeholder', '');
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
        // Init DataTable once
        let modifiersTable = $('#example2Modifier').DataTable({
            scrollX: true,
            order: [],
            paging: true,
            searching: true,
            ordering: true,
            initComplete: function () {
                setMobileSearchPlaceholder1();

                // Update placeholder on resize
                $(window).on('resize', function () {
                    setMobileSearchPlaceholder1();
                });
            }
        });

        // Manage Modifiers button click
        document.querySelectorAll('.manage-modifiers-btn').forEach(btn => {
            btn.addEventListener('click', function () {
                const id = this.dataset.id;
                const name = this.dataset.name;

                // Set assistant name in the tab header
                document.getElementById('assistant-name').textContent = name;

                // Fetch only the rows HTML
                fetch(`/admin/workflows/${id}/modifiers`)
                    .then(res => res.text())
                    .then(html => {
                        // Clear current rows
                        modifiersTable.clear();

                        // Inject new rows into tbody
                        $('#modifier-rows').html(html);

                        // Add them to DataTable & redraw
                        modifiersTable.rows.add($('#modifier-rows tr')).draw();

                        // Ensure placeholder works after reload
                        setMobileSearchPlaceholder1();

                        // Enable and switch to Manage Modifiers tab
                        let $tab = $('#profile-tab');
                        $tab.removeClass('disabled').tab('show');
                    })
                    .catch(err => {
                        console.error('Error loading modifiers:', err);
                    });
            });
        });

        // When Assistants tab is clicked, disable Manage Modifiers tab again
        $('#home-tab').on('click', function () {
            $('#profile-tab').addClass('disabled');
        });
    });
</script>
<!-- Mobile Card Script -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const cards = document.querySelectorAll('.workflow-card');
        const entriesSelect = document.getElementById('mobile-entries');
        const searchInput = document.getElementById('mobile-search');
        const paginationContainer = document.getElementById('mobile-pagination');
        
        let currentPage = 1;
        let entriesPerPage = 10;
        let filteredCards = Array.from(cards);
        
        function updatePagination() {
            const totalPages = Math.ceil(filteredCards.length / entriesPerPage);
            const start = (currentPage - 1) * entriesPerPage + 1;
            const end = Math.min(currentPage * entriesPerPage, filteredCards.length);
            
            document.getElementById('entries-info').textContent = 
                `Showing ${start} to ${end} of ${filteredCards.length} entries`;
            
            paginationContainer.innerHTML = '';
            
            if (totalPages <= 1) return;
            
            const nav = document.createElement('nav');
            const ul = document.createElement('ul');
            ul.className = 'pagination';
            
            // First button
            const firstLi = document.createElement('li');
            firstLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
            const firstLink = document.createElement(currentPage === 1 ? 'span' : 'a');
            firstLink.className = 'page-link';
            firstLink.innerHTML = '&laquo;';
            if (currentPage > 1) {
                firstLink.onclick = () => { currentPage = 1; showPage(); };
            }
            firstLi.appendChild(firstLink);
            ul.appendChild(firstLi);
            
            // Previous button
            const prevLi = document.createElement('li');
            prevLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
            const prevLink = document.createElement(currentPage === 1 ? 'span' : 'a');
            prevLink.className = 'page-link';
            prevLink.innerHTML = '&lsaquo;';
            if (currentPage > 1) {
                prevLink.onclick = () => { currentPage--; showPage(); };
            }
            prevLi.appendChild(prevLink);
            ul.appendChild(prevLi);
            
            // Page numbers
            for (let i = 1; i <= totalPages; i++) {
                const pageLi = document.createElement('li');
                pageLi.className = `page-item ${i === currentPage ? 'active' : ''}`;
                const pageLink = document.createElement(i === currentPage ? 'span' : 'a');
                pageLink.className = 'page-link';
                pageLink.textContent = i;
                if (i !== currentPage) {
                    pageLink.onclick = () => { currentPage = i; showPage(); };
                }
                pageLi.appendChild(pageLink);
                ul.appendChild(pageLi);
            }
            
            // Next button
            const nextLi = document.createElement('li');
            nextLi.className = `page-item ${currentPage === totalPages ? 'disabled' : ''}`;
            const nextLink = document.createElement(currentPage === totalPages ? 'span' : 'a');
            nextLink.className = 'page-link';
            nextLink.innerHTML = '&rsaquo;';
            if (currentPage < totalPages) {
                nextLink.onclick = () => { currentPage++; showPage(); };
            }
            nextLi.appendChild(nextLink);
            ul.appendChild(nextLi);
            
            // Last button
            const lastLi = document.createElement('li');
            lastLi.className = `page-item ${currentPage === totalPages ? 'disabled' : ''}`;
            const lastLink = document.createElement(currentPage === totalPages ? 'span' : 'a');
            lastLink.className = 'page-link';
            lastLink.innerHTML = '&raquo;';
            if (currentPage < totalPages) {
                lastLink.onclick = () => { currentPage = totalPages; showPage(); };
            }
            lastLi.appendChild(lastLink);
            ul.appendChild(lastLi);
            
            nav.appendChild(ul);
            paginationContainer.appendChild(nav);
        }



        function showPage() {
            const start = (currentPage - 1) * entriesPerPage;
            const end = start + entriesPerPage;
            
            cards.forEach(card => card.style.display = 'none');
            filteredCards.slice(start, end).forEach(card => card.style.display = 'block');
            
            updatePagination();
        }
        
        function filterCards() {
            const searchTerm = searchInput.value.toLowerCase();
            filteredCards = Array.from(cards).filter(card => 
                card.dataset.search.includes(searchTerm)
            );
            currentPage = 1;
            showPage();
        }
        
        entriesSelect.addEventListener('change', function() {
            entriesPerPage = parseInt(this.value);
            currentPage = 1;
            showPage();
        });
        
        searchInput.addEventListener('input', filterCards);
        
        // Initialize
        showPage();
    });
</script>
@endsection