@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">Customers</div>
                                                    <div class="create-btn"><a href="{{route('admin.customercreate')}}" class="createbtn"><i class="fe fe-plus mr-1"></i> Create </a></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">Customer ID</th>
                                                                    <th class="wd-15p border-bottom-0">Customer Info</th>
                                                                    <th class="wd-10p border-bottom-0">Phone Numbers</th>
                                                                    <th class="wd-10p border-bottom-0">Assistants</th>
                                                                    <th class="wd-10p border-bottom-0">Workflows</th>
                                                                    <th class="wd-10p border-bottom-0 text-center">Status</th>
                                                                    <th class="wd-10p 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 ($customers as $customer)
                                                                <tr>
                                                                    <td>{{$customer->customer_id}}</td>
                                                                    <td>
                                                                        <span>{{$customer->first_name}} {{$customer->last_name}}</span></br>
                                                                        <span class="tlbmailicon"><i class="fe fe-mail"></i>&nbsp;&nbsp;{{$customer->email}}</span>
                                                                        <span class="tlbphoneicon"><i class="fe fe-phone"></i>&nbsp;&nbsp;{{$customer->phone}}</span>
                                                                    </td>
                                                                    <td>@if(!empty($customer->formattedNumbers))
                                                                            @foreach($customer->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>@if(!empty($customer->formattedAssistants))
                                                                            @foreach($customer->formattedAssistants as $assistant)
                                                                                <div><span class="typeicon1"><span class="material-symbols-outlined">supervisor_account</span>&nbsp;&nbsp;{{ $assistant }}</span></div>
                                                                            @endforeach
                                                                        @else
                                                                            <div class="text-muted">—</div>
                                                                        @endif
                                                                    </td>
                                                                    <td>@if(!empty($customer->formattedWorkflows))
                                                                            @foreach($customer->formattedWorkflows as $workflow)
                                                                                <div><span class="typeicon2"><span class="material-symbols-outlined">Automation</span>&nbsp;&nbsp;{{ $workflow }}</span></div>
                                                                            @endforeach
                                                                        @else
                                                                            <div class="text-muted">—</div>
                                                                        @endif
                                                                    </td>
                                                                    <td class="text-center">
                                                                        {!! $customer->status == 1 
                                                                            ? '<span class="activeclass"><span class="material-symbols-outlined">cloud</span></span>' 
                                                                            : '<span class="inactiveclass"><span class="material-symbols-outlined">cloud_off</span></span>' !!}
                                                                    </td>
                                                                    <td data-utc-time="{{ $customer->createdAt }}">{{ $customer->createdAt }}</td>
                                                                    <td data-utc-time="{{ $customer->updatedAt }}">{{ $customer->updatedAt }}</td>
                                                                    <td>
                                                                        <div class="actiondiv">
                                                                            <a href="{{ route('admin.customeredit', ['id' => $customer->id]) }}" class="editsec" data-placement="left" data-toggle="tooltip" title="Edit Customer"><i class="fe fe-edit"></i></a>
                                                                            <!-- <a href="javascript:void(0);" class="deletesec" data-id="{{ $customer->id }}">
                                                                                <i class="fe fe-trash-2 text-danger"></i>
                                                                            </a> -->
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                @endforeach
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Main View End -->
                            </div>
                        </div>
                        <!-- <div class="card carddivision">
                            <div class="card-header">
                                <div class="card-title">Customers</div>
                                <div class="create-btn"><a href="{{route('admin.customercreate')}}" class="createbtn"><i class="fe fe-plus mr-1"></i> Create </a></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">Customer ID</th>
                                                <th class="wd-15p border-bottom-0">Name</th>
                                                <th class="wd-15p border-bottom-0">Email</th>
                                                <th class="wd-15p border-bottom-0">Contact Number</th>
                                                <th class="wd-10p border-bottom-0">Linked Phone Numbers</th>
                                                <th class="wd-10p border-bottom-0">Assigned Assistants</th>
                                                <th class="wd-10p border-bottom-0">Assigned Workflows</th>
                                                <th class="wd-10p border-bottom-0 text-center">Status</th>
                                                <th class="wd-10p 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 ($customers as $customer)
                                            <tr>
                                                <td>{{$customer->sno}}</td>
                                                <td>{{$customer->customer_id}}</td>
                                                <td>{{$customer->first_name}} {{$customer->last_name}}</td>
                                                <td>{{$customer->email}}</td>
                                                <td>{{$customer->phone}}</td>
                                                <td>@if(!empty($customer->formattedNumbers))
                                                        @foreach($customer->formattedNumbers as $num)
                                                            <div>{{ $num }}</div>
                                                        @endforeach
                                                    @else
                                                        <div class="text-muted">—</div>
                                                    @endif
                                                </td>
                                                <td>@if(!empty($customer->formattedAssistants))
                                                        @foreach($customer->formattedAssistants as $assistant)
                                                            <div>{{ $assistant }}</div>
                                                        @endforeach
                                                    @else
                                                        <div class="text-muted">—</div>
                                                    @endif
                                                </td>
                                                <td>@if(!empty($customer->formattedWorkflows))
                                                        @foreach($customer->formattedWorkflows as $workflow)
                                                            <div>{{ $workflow }}</div>
                                                        @endforeach
                                                    @else
                                                        <div class="text-muted">—</div>
                                                    @endif
                                                </td>
                                                <td class="text-center">
                                                    {!! $customer->status == 1 
                                                        ? '<span class="activeclass"><span class="material-symbols-outlined">cloud</span></span>' 
                                                        : '<span class="inactiveclass"><span class="material-symbols-outlined">cloud_off</span></span>' !!}
                                                </td>
                                                <td data-utc-time="{{ $customer->createdAt }}">{{ $customer->createdAt }}</td>
                                                <td data-utc-time="{{ $customer->updatedAt }}">{{ $customer->updatedAt }}</td>
                                                <td>
                                                    <div class="actiondiv">
                                                        <a href="{{ route('admin.customeredit', ['id' => $customer->id]) }}" class="editsec"><i class="fe fe-edit"></i></a>
                                                        <!-- <a href="javascript:void(0);" class="deletesec" data-id="{{ $customer->id }}">
                                                            <i class="fe fe-trash-2 text-danger"></i>
                                                        </a> -->
                                                    <!--</div>
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div> -->
                    </div>
                    <!--End Page header-->
                </div>
            </div>
            <!-- End app-content-->
        </div>
        <!--Footer-->
        @include('layouts.appfooter')
        <!-- End Footer-->
    </div>
    <!-- End Page -->
    <!-- Back to top -->
    <a href="#top" id="back-to-top"><i class="fe fe-chevrons-up"></i></a>
</div>
@include('includes.jslinks_common')
<!-- Add this JavaScript block below your content or in a section -->
<!-- <script>
    function toggleTableResponsive() {
        const wrapper = document.getElementById('example1');
        if (window.innerWidth <= 1300) {
            wrapper.classList.add('table-responsive');
        } else {
            wrapper.classList.remove('table-responsive');
        }
    }
    // Run once on load
    toggleTableResponsive();
    // Run on window resize
    window.addEventListener('resize', toggleTableResponsive);

    $(document).ready(function () {
        setTimeout(function () {
            $('#example1_length').closest('.col-sm-12.col-md-6').addClass('lengthfilter');
            $('#example1_filter').closest('.col-sm-12.col-md-6').addClass('searchfilter');
        }, 100);
    });
</script> -->
<script>
   document.addEventListener('click', function (e) {
    if (e.target.closest('.deletesec')) {
        const deleteBtn = e.target.closest('.deletesec');
        const userId = deleteBtn.getAttribute('data-id');

        Swal.fire({
            title: 'Are you sure?',
            html: 'This will <strong>permanently delete the customer and all their datas.</strong>',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, delete',
            cancelButtonText: 'Cancel',
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
        }).then((result) => {
            if (result.isConfirmed) {
                fetch(`{{ url('/admin/customers') }}/${userId}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    }
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Deleted!',
                            text: 'Customer and their datas deleted successfully.',
                            timer: 2000
                        });

                        // Remove the user row from DOM if needed
                        deleteBtn.closest('tr')?.remove();
                    } else {
                        Swal.fire({ icon: 'error', title: 'Error', text: data.message || 'Failed to delete.', timer: 3000 });
                    }
                })
                .catch(() => {
                    Swal.fire({ icon: 'error', title: 'Error', text: 'Something went wrong.', timer: 3000 });
                });
            }
        });
    }
});
    </script>
    <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) {
        //     el.textContent = formatToLocalTime(utc);
        // }
        if (utc) {
            const formated = formatToLocalTime(utc);
            el.innerHTML = '<i class="fe fe-calendar calicon"></i>&nbsp;&nbsp;' + formated;
        }
    });
</script>
@endsection