@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">
                                                <div class="card-header mb-4">
                                                    <div class="card-title">Assistants</div>
                                                </div>
                                                <div class="card-body cardbody">
                                                    <div class="calllogtab col-lg-12 col-md-12 col-sm-12 col-md-12">
                                                        <ul class="nav nav-tabs calllogtabs" 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">supervisor_account</span>&nbsp;&nbsp;Assistants</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">
                                                                <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">Name</th>
                                                                                <th class="wd-15p border-bottom-0">Voice</th>
                                                                                <th class="wd-15p border-bottom-0">Language</th>
                                                                                <th class="wd-15p border-bottom-0">Linked Phone Numbers</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 ($assistants as $assistant)
                                                                            <tr>
                                                                                <td>{{ isset($assistant['name']) && !empty($assistant['name']) ? $assistant['name'] : 'N/A' }}</td>
                                                                                <td>{{ isset($assistant['voice']) && !empty($assistant['voice']) ? $assistant['voice']['voiceId'] : 'N/A' }}</td>
                                                                                <td>{{ isset($assistant['transcriber']) && !empty($assistant['transcriber']) ? $assistant['transcriber']['language'] : 'N/A' }}</td>
                                                                                <td>@if(!empty($assistant['formattedNumbers']))
                                                                                        @foreach($assistant['formattedNumbers'] as $num)
                                                                                            <div><span class="tlbphoneicon"><i class="fe fe-phone"></i>&nbsp;&nbsp;{{ $num }}</span></div>
                                                                                        @endforeach
                                                                                    @else
                                                                                        <div class="text-muted">—</div>
                                                                                    @endif
                                                                                </td>
                                                                                <td>
                                                                                    <ul class="modilist">
                                                                                        @if (!empty($assistant['modifiers']))
                                                                                            @foreach ($assistant['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($assistant['createdAtFormatted'] != 'N/A') data-utc-time="{{ $assistant['createdAtFormatted'] }}" @endif>{{ $assistant['createdAtFormatted'] }}</td>
                                                                                <td @if($assistant['updatedAtFormatted'] != 'N/A') data-utc-time="{{ $assistant['updatedAtFormatted'] }}" @endif>{{ $assistant['updatedAtFormatted'] }}</td>
                                                                                <td>
                                                                                <div class="actiondiv">
                                                                                    <a href="{{ route('admin.update_modifier', ['id' => $assistant['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="{{ $assistant['id'] }}" 
                                                                                        data-name="{{ $assistant['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>
                                                            </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">Assistants</div>
                            </div>
                            <div class="card-body cardbody">
                                <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">Voice</th>
                                                <th class="wd-15p border-bottom-0">Language</th>
                                                <th class="wd-15p border-bottom-0">Linked Phone Numbers</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 ($assistants as $assistant)
                                            <tr>
                                                <td>{{$assistant['sno']}}</td>
                                                <td>{{ isset($assistant['name']) && !empty($assistant['name']) ? $assistant['name'] : 'N/A' }}</td>
                                                <td>{{ isset($assistant['voice']) && !empty($assistant['voice']) ? $assistant['voice']['voiceId'] : 'N/A' }}</td>
                                                <td>{{ isset($assistant['transcriber']) && !empty($assistant['transcriber']) ? $assistant['transcriber']['language'] : 'N/A' }}</td>
                                                <td>@if(!empty($assistant['formattedNumbers']))
                                                        @foreach($assistant['formattedNumbers'] as $num)
                                                            <div><i class="fe fe-phone phnicon"></i>&nbsp;&nbsp;{{ $num }}</div>
                                                        @endforeach
                                                    @else
                                                        <div class="text-muted">—</div>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if (!empty($assistant['modifiers']))
                                                        @foreach ($assistant['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($assistant['createdAtFormatted'] != 'N/A') data-utc-time="{{ $assistant['createdAtFormatted'] }}" @endif>{{ $assistant['createdAtFormatted'] }}</td>
                                                <td @if($assistant['updatedAtFormatted'] != 'N/A') data-utc-time="{{ $assistant['updatedAtFormatted'] }}" @endif>{{ $assistant['updatedAtFormatted'] }}</td>
                                                <td>
                                                <div class="actiondiv">
                                                <a href="{{ route('admin.update_modifier', ['id' => $assistant['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('assistant-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
                if (value === 1) {
                    $li.addClass('li_active');
                } else {
                    $li.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/assistants/${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>
@endsection