@extends('admin.layouts.master')

@section('content')
    <!-- Add SweetAlert2 CSS and JS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.32/dist/sweetalert2.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.32/dist/sweetalert2.all.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-primary">
                        <h3 class="card-title text-white">
                            <i class="bi bi-people-fill me-2"></i>
                            Users Management
                        </h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover table-striped">
                                <thead class="table-light">
                                    <tr>
                                        <th class="text-center" style="width: 50px">#</th>
                                        <th>
                                            <i class="bi bi-person me-1"></i>
                                            Name
                                        </th>
                                        <th>
                                            <i class="bi bi-envelope me-1"></i>
                                            Email
                                        </th>
                                        <th>
                                            <i class="bi bi-phone me-1"></i>
                                            Mobile
                                        </th>
                                        <th>
                                            <i class="bi bi-geo-alt me-1"></i>
                                            City
                                        </th>
                                        <th>
                                            <i class="bi bi-person-badge me-1"></i>
                                            Specialist
                                        </th>
                                        <th>
                                            <i class="bi bi-star-fill me-1"></i>
                                            Points
                                        </th>
                                        <th>
                                            <i class="bi bi-toggle-on me-1"></i>
                                            Voucher eligibility
                                        </th>
                                        <th class="text-center">
                                            <i class="bi bi-gear me-1"></i>
                                            Actions
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($users as $index => $user)
                                        <tr>
                                            <td class="text-center">{{ $index + 1 }}</td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="avatar-sm me-2">

                                                    </div>
                                                    {{ $user->name }}
                                                </div>
                                            </td>
                                            <td>{{ $user->email }}</td>
                                            <td>{{ $user->mobile }}</td>
                                            <td>{{ $user->city->city_name ?? 'N/A' }}</td>
                                            <td>{{ $user->specialty->specialty_name ?? 'N/A' }}</td>
                                            <td class="text-center">
                                                <span class="badge bg-warning text-dark">
                                                    {{ number_format($user->points) }}
                                                </span>
                                            </td>
                                            <td>
                                                <label class="switch">
                                                    <input type="checkbox" class="veligibility-switch"
                                                        data-id="{{ $user->id }}"
                                                        {{ $user->veligibility ? 'checked' : '' }}>
                                                    <span class="slider round"></span>
                                                </label>
                                            </td>
                                            <td class="text-center">
                                                <div class="btn-group">
                                                    <a href="{{ route('admin.users.vouchers', $user->id) }}"
                                                        class="btn btn-sm btn-info" title="Show Vouchers">
                                                        <i class="bi bi-ticket-perforated"></i>
                                                    </a>
                                                    <button type="button" class="btn btn-sm btn-danger delete-user"
                                                        data-id="{{ $user->id }}" title="Delete User">
                                                        <i class="bi bi-trash"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="7" class="text-center py-4">
                                                <div class="text-muted">
                                                    <i class="bi bi-inbox fs-2 d-block mb-2"></i>
                                                    No users found
                                                </div>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="card-footer bg-light">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="text-muted">
                                Showing {{ $users->count() }} users
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .avatar-sm {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .avatar-title {
            font-size: 14px;
            font-weight: 500;
        }

        .table> :not(caption)>*>* {
            padding: 1rem;
        }

        .card {
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            border: none;
        }

        .table-hover tbody tr:hover {
            background-color: rgba(0, 0, 0, 0.02);
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }

        .switch input {
            display: none;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked+.slider {
            background-color: #2196F3;
        }

        input:checked+.slider:before {
            transform: translateX(26px);
        }

        .btn-group {
            display: flex;
            gap: 5px;
        }

        .btn-group .btn {
            padding: 0.25rem 0.5rem;
        }

        .btn-info {
            background-color: #17a2b8;
            border-color: #17a2b8;
            color: white;
        }

        .btn-info:hover {
            background-color: #138496;
            border-color: #117a8b;
            color: white;
        }

        .btn-danger {
            background-color: #dc3545;
            border-color: #dc3545;
            color: white;
        }

        .btn-danger:hover {
            background-color: #c82333;
            border-color: #bd2130;
            color: white;
        }
    </style>

    <script>
        $(document).ready(function() {
            // Setup AJAX CSRF token
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                cache: false // Disable caching for all AJAX requests
            });

            // Function to handle AJAX errors
            function handleAjaxError(error, defaultMessage) {
                console.error('Error:', error);
                let errorMessage = defaultMessage;

                if (error.responseJSON && error.responseJSON.message) {
                    errorMessage = error.responseJSON.message;
                } else if (error.statusText) {
                    errorMessage = error.statusText;
                }

                Swal.fire({
                    title: 'Error!',
                    html: `
                        <div class="text-center">
                            <i class="bi bi-x-circle-fill text-danger" style="font-size: 4rem;"></i>
                            <p class="mt-3">${errorMessage}</p>
                        </div>
                    `,
                    icon: 'error',
                    confirmButtonColor: '#dc3545',
                    padding: '2rem'
                });
            }

            // Veligibility switch handler
            $('.veligibility-switch').on('change', function() {
                const userId = $(this).data('id');
                const value = $(this).prop('checked') ? 1 : 0;
                const originalState = $(this).prop('checked');
                const $switch = $(this);

                $.ajax({
                    url: "{{ url('admin/users') }}/" + userId + "/veligibility",
                    method: 'POST',
                    data: {
                        veligibility: value
                    },
                    success: function(response) {
                        if (!response.success) {
                            $switch.prop('checked', !originalState);
                            Swal.fire({
                                title: 'Error!',
                                html: `
                                    <div class="text-center">
                                        <i class="bi bi-x-circle-fill text-danger" style="font-size: 4rem;"></i>
                                        <p class="mt-3">${response.message}</p>
                                    </div>
                                `,
                                icon: 'error',
                                confirmButtonColor: '#dc3545',
                                padding: '2rem'
                            });
                        }
                    },
                    error: function(xhr) {
                        $switch.prop('checked', !originalState);
                        handleAjaxError(xhr, 'Failed to update veligibility');
                    }
                });
            });

            // Delete user handler
            $('.delete-user').on('click', function() {
                const userId = $(this).data('id');
                const userName = $(this).closest('tr').find('td:nth-child(2)').text().trim();
                const $row = $(this).closest('tr');

                Swal.fire({
                    title: 'Are you sure?',
                    html: `
                        <div class="text-center">
                            <i class="bi bi-exclamation-triangle-fill text-warning" style="font-size: 4rem;"></i>
                            <p class="mt-3">You are about to delete the user:</p>
                            <p class="fw-bold">${userName}</p>
                            <p class="text-danger">This action cannot be undone!</p>
                        </div>
                    `,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Yes, delete user',
                    cancelButtonText: 'Cancel',
                    reverseButtons: true,
                    padding: '2rem'
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire({
                            title: 'Deleting...',
                            html: 'Please wait while we delete the user.',
                            allowOutsideClick: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });

                        $.ajax({
                            url: "{{ url('admin/users') }}/" + userId,
                            method: 'DELETE',
                            success: function(response) {
                                if (response.success) {
                                    $row.fadeOut(400, function() {
                                        $(this).remove();
                                    });
                                    Swal.fire({
                                        title: 'Deleted!',
                                        html: `
                                            <div class="text-center">
                                                <i class="bi bi-check-circle-fill text-success" style="font-size: 4rem;"></i>
                                                <p class="mt-3">User has been successfully deleted.</p>
                                            </div>
                                        `,
                                        icon: 'success',
                                        confirmButtonColor: '#28a745',
                                        padding: '2rem'
                                    });
                                } else {
                                    throw new Error(response.message ||
                                        'Failed to delete user');
                                }
                            },
                            error: function(xhr) {
                                handleAjaxError(xhr,
                                    'An error occurred while deleting the user');
                            }
                        });
                    }
                });
            });
        });
    </script>
@endsection