@extends('backoffice.layouts.app')

@section('content')
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center py-4">
        <div class="d-block mb-4 mb-md-0">
            <nav aria-label="breadcrumb" class="d-none d-md-inline-block">
                <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
                    <li class="breadcrumb-item">
                        <a href="{{ route('admin.dashboard') }}">
                            <svg class="icon icon-xxs" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                            </svg>
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">Customers</li>
                </ol>
            </nav>
            <h2 class="h4">All Customer</h2>
        </div>

    </div>
    <div class="card card-body border-0 shadow table-wrapper table-responsive ">
        <table class="table table-hover table-bordered pt-4" id="dataTablesTable">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Type</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($users as $user)
                    <tr id="user-row-{{ $user->id }}">
                        <td>{{ $user->id }}</td>
                        <td>{{ $user->first_name }}</td>
                        <td>{{ $user->email }}</td>
                        <td>{{ ucfirst($user->type) }}</td>
                        <td class="user-status">{{ $user->is_active ? 'Active' : 'Inactive' }}</td>
                        <td>
                            <button
                                class="btn btn-sm btn-toggle-status {{ $user->is_active ? 'btn-danger' : 'btn-success' }}"
                                data-user-id="{{ $user->id }}">

                                {{ $user->is_active ? 'Deactivate' : 'Activate' }}

                            </button>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        {{-- <div class="card-footer px-3 border-0 d-flex flex-column flex-lg-row align-items-center justify-content-between">
            <nav aria-label="Page navigation example">
                <ul class="pagination mb-0">
                    <!-- Previous Page Link -->
                    @if ($sliders->onFirstPage())
                        <li class="page-item disabled">
                            <span class="page-link">Previous</span>
                        </li>
                    @else
                        <li class="page-item">
                            <a class="page-link" href="{{ $sliders->previousPageUrl() }}">Previous</a>
                        </li>
                    @endif

                    <!-- Page Numbers -->
                    @foreach ($sliders->getUrlRange(1, $sliders->lastPage()) as $page => $url)
                        <li class="page-item {{ $page == $sliders->currentPage() ? 'active' : '' }}">
                            <a class="page-link" href="{{ $url }}">{{ $page }}</a>
                        </li>
                    @endforeach

                    <!-- Next Page Link -->
                    @if ($sliders->hasMorePages())
                        <li class="page-item">
                            <a class="page-link" href="{{ $sliders->nextPageUrl() }}">Next</a>
                        </li>
                    @else
                        <li class="page-item disabled">
                            <span class="page-link">Next</span>
                        </li>
                    @endif
                </ul>
            </nav>

            <!-- Pagination Summary -->
            <div class="fw-normal small mt-4 mt-lg-0">
                Showing <b>{{ $sliders->firstItem() }}</b> to <b>{{ $sliders->lastItem() }}</b> of
                <b>{{ $sliders->total() }}</b> entries
            </div>
        </div> --}}
        {{-- <div class="card-footer px-3 border-0 d-flex flex-column flex-lg-row align-items-center justify-content-between">
            <nav aria-label="Page navigation example">
                <ul class="pagination mb-0">
                    <li class="page-item">
                        <a class="page-link" href="#">Previous</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">1</a>
                    </li>
                    <li class="page-item active">
                        <a class="page-link" href="#">2</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">3</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">4</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">5</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">Next</a>
                    </li>
                </ul>
            </nav>
            <div class="fw-normal small mt-4 mt-lg-0">Showing <b>5</b> out of <b>25</b> entries</div>
        </div> --}}
    </div>
@endsection

<script>
    document.addEventListener("DOMContentLoaded", function() {
        $('.btn-toggle-status').click(function() {
            const button = $(this);
            const userId = button.data('user-id');

            $.ajax({
                url: '{{ url('/admin/customerlist/toggle') }}/' + userId,

                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    const row = $('#user-row-' + userId);
                    const statusCell = row.find('.user-status');

                    if (response.status === 'Active') {
                        statusCell.text('Active');
                        button.removeClass('btn-success').addClass('btn-danger').text(
                            'Deactivate');
                    } else {
                        statusCell.text('Inactive');
                        button.removeClass('btn-danger').addClass('btn-success').text(
                            'Activate');
                    }
                }
            });
        });
    });
</script>