@extends('admin.layouts.master')

@section('title', 'Manage Users')

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card mb-5 shadow border-0">
                <!-- Card Header -->
                <div class="card-header">
                    <h3 class="text-left"><span class="fa fa-user"></span>User's
                        <a href="{{ route('users.create') }}" class="btn btn-primary" style="float: right">
                            <span class="fa fa-user"></span> New User
                        </a>
                    </h3>
                </div>

                <!-- Table -->
                <div class="card-block p-0">
                    <table class="table table-bordered m-0 table-definition">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Image</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Phone</th>
                                <th>Designation</th>
                                <th>Status</th>
                                <th class="text-center">Action</th> <!-- New Action Column -->
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($users as $key => $user)
                                <tr>
                                    <td>
                                        {{ $loop->iteration }}
                                    </td>

                                    <td>
                                        <img src="{{ $user->image !=null ? asset($user->image) : asset('placeholder.webp') }}"
                                            class="rounded-circle border shadow" width="40" height="40"
                                            alt="User">
                                    </td>
                                    <td>{{ $user->name }}</td>
                                    <td>{{ $user->email }}</td>
                                    <td>{{ $user->phone ?? '-' }}</td>
                                    <td>
                                        <span class="badge badge-info">{{ $user->designation->name ?? 'N/A' }}</span>
                                    </td>
                                    <td>
                                        <button
                                            class="btn btn-sm toggle-status-btn {{ $user->isActive ? 'btn-success' : 'btn-danger' }}"
                                            data-id="{{ $user->id }}">
                                            {{ $user->isActive ? 'Active' : 'Inactive' }}
                                        </button>
                                    </td>
                                    <td class="text-center">
                                        <a href="{{ route('users.edit', $user->id) }}" class="btn btn-sm btn-primary">
                                            <i class="fa fa-edit"></i> Edit
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center py-4 text-muted">
                                        <i class="fa fa-info-circle"></i> No users found
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>

                </div>

                <!-- Pagination -->
                <div class="card-footer p-0">
                    <nav aria-label="Page navigation">
                        <ul class="pagination justify-content-end mt-3 mr-3">
                            {!! $users->links('pagination::bootstrap-4') !!}
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <style>
        html {
            font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
            font-size: 18px;
        }

        .table {
            border: none;
        }

        .table-definition thead th:first-child {
            pointer-events: none;
            background: white;
            border: none;
        }

        .table td {
            vertical-align: middle;
        }

        .page-item>* {
            border: none;
        }

        .custom-checkbox {
            min-height: 1rem;
            padding-left: 0;
            margin-right: 0;
            cursor: pointer;
        }

        .custom-checkbox .custom-control-indicator {
            display: inline-block;
            position: relative;
            width: 30px;
            height: 10px;
            background-color: #818181;
            border-radius: 15px;
            margin: 0 16px;
            vertical-align: middle;
        }

        .custom-checkbox .custom-control-indicator:after {
            content: "";
            position: absolute;
            width: 18px;
            height: 18px;
            background-color: #f1f1f1;
            border-radius: 21px;
            box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
            left: -2px;
            top: -4px;
        }

        .custom-checkbox .custom-control-input:checked~.custom-control-indicator {
            background-color: #84c7c1;
        }

        .custom-checkbox .custom-control-input:checked~.custom-control-indicator:after {
            background-color: #84c7c1;
            left: 15px;
        }
    </style>
@endsection


@section('js')
    @include('components.alert')
    <script>
        $(document).ready(function() {

            $('.toggle-status-btn').click(function() {
                var btn = $(this);
                var userId = btn.data('id');

                $.ajax({
                    url: '/users/' + userId + '/toggle-status',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.isActive) {
                            btn.removeClass('btn-danger').addClass('btn-success').text(
                                'Active');
                        } else {
                            btn.removeClass('btn-success').addClass('btn-danger').text(
                                'Inactive');
                        }
                        showToast('success', "Status Chages Success fully");

                    },
                    error: function() {
                        showToast('error', "Something went wrong!");
                    }
                });
            });

        });
    </script>
@endsection