@extends('layouts.frontend')
@section('title_page', 'Manage Veterinary Users - Rusizi Veterinary')

@section('content')
<!--Start breadcrumb area-->
<section class="breadcrumb-area style2" style="background-image: url({{asset('images/resources/breadcrumb-bg-2.jpg')}});">
    <div class="container">
        <div class="row">
            <div class="col-xl-12">
                <div class="inner-content-box clearfix">
                    <div class="title-s2 text-center">
                        <span>My Account</span>
                        <h1>Welcome <label style="color: rgb(25, 210, 96)" for="">{{ Auth::user()->name }}</label></h1>
                    </div>
                    <div class="breadcrumb-menu float-left">
                        <ul class="clearfix">
                            <li><a href="/">Home</a></li>
                            <li class="active">Manage Veterinary</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--End breadcrumb area-->

<!--Start Single Service Area-->
<section class="single-service-area">
    <div class="container">
        <div class="row">
            @include('frontend.partials.sidebar')

            <div class="col-xl-8 col-lg-7 col-md-12 col-sm-12">
                <div class="single-service-top">
                    <div class="text">
                        <h2>Manage System Veterinary Users</h2>
                        <div class="inner">
                            <p>View and manage all system users that are able to report</p>
                        </div>
                    </div>
                </div>

                <!--Start Reports Table Area-->
                <section class="reports-table-area">
                    <div class="container-fluid p-0">
                        <div class="reports-header">
                            <div class="row align-items-center">
                                <div class="col-lg-6">
                                    <h2>System Veterinary Users</h2>
                                    <p>All veterinary users are displayed below</p>
                                </div>
                                <div class="col-lg-6 text-lg-end">
                                    <div class="report-actions">
                                        <button class="btn-export" onclick="exportToCSV()">
                                            <i class="fas fa-download"></i> Export CSV
                                        </button>
                                        <a href="{{ route('add.veterinary') }}" class="btn-new-report">
                                            <i class="fas fa-plus"></i> Add New User
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Dynamic Alert Container -->
                        <div id="alertContainer"></div>

                        <!-- Success/Error Messages from Session -->
                        @if(session('success'))
                            <div class="alert alert-success alert-dismissible fade show m-3" role="alert">
                                <i class="fas fa-check-circle"></i>
                                {{ session('success') }}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endif

                        @if(session('error'))
                            <div class="alert alert-danger alert-dismissible fade show m-3" role="alert">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ session('error') }}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endif

                        <div class="reports-filter">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="filter-group">
                                        <label><i class="fas fa-search"></i> Search Users</label>
                                        <input type="text" id="searchInput" placeholder="Search by name, email, or phone...">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="filter-group">
                                        <label><i class="fas fa-calendar-alt"></i> Date From</label>
                                        <input type="date" id="dateFrom">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="filter-group">
                                        <label><i class="fas fa-calendar-alt"></i> Date To</label>
                                        <input type="date" id="dateTo">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="reports-table-container">
                            <div class="table-responsive">
                                <table class="reports-table">
                                    <thead>
                                        <tr>
                                            <th>
                                                <div class="table-header">
                                                    <i class="fas fa-user"></i>
                                                    <span>Veterinary Name</span>
                                                </div>
                                            </th>
                                            <th>
                                                <div class="table-header">
                                                    <i class="fas fa-envelope"></i>
                                                    <span>Email</span>
                                                </div>
                                            </th>
                                            <th>
                                                <div class="table-header">
                                                    <i class="fas fa-phone"></i>
                                                    <span>Phone Number</span>
                                                </div>
                                            </th>
                                            <th>
                                                <div class="table-header">
                                                    <i class="fas fa-calendar"></i>
                                                    <span>Registration Date</span>
                                                </div>
                                            </th>
                                            <th>
                                                <div class="table-header">
                                                    <i class="fas fa-circle"></i>
                                                    <span>Status</span>
                                                </div>
                                            </th>
                                            <th>
                                                <div class="table-header">
                                                    <i class="fas fa-cog"></i>
                                                    <span>Actions</span>
                                                </div>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody id="usersTableBody">
                                        @foreach($veterinaryUsers as $user)
                                        <tr data-user-id="{{ $user->id }}">
                                            <td>
                                                <div class="user-info">
                                                    <div class="user-avatar-small">
                                                        <i class="fas fa-user-md"></i>
                                                    </div>
                                                    <div class="user-details">
                                                        <strong>{{ $user->name }}</strong>
                                                        <span class="user-id">ID: VET-{{ str_pad($user->id, 4, '0', STR_PAD_LEFT) }}</span>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="email-info">
                                                    <i class="fas fa-envelope"></i>
                                                    <span class="email">{{ $user->email }}</span>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="phone-info">
                                                    <i class="fas fa-phone"></i>
                                                    <span class="phone">{{ $user->phone ?? 'N/A' }}</span>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="date-info">
                                                    <div class="date-badge">
                                                        <i class="fas fa-calendar-check"></i>
                                                        <span class="date">{{ $user->created_at->format('M d, Y') }}</span>
                                                    </div>
                                                    <span class="days-ago">{{ $user->created_at->diffForHumans() }}</span>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="status-container">
                                                    <span class="status-badge active">
                                                        <i class="fas fa-check-circle"></i>
                                                        Active
                                                    </span>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="action-buttons">
                                                    <button class="btn-action btn-edit" onclick="openEditModal({{ $user->id }})" 
                                                            title="Edit User" data-toggle="tooltip"
                                                            @if($user->id === auth()->id()) disabled @endif>
                                                        <i class="fas fa-edit"></i>
                                                        <span class="btn-tooltip">Edit</span>
                                                    </button>
                                                    <button class="btn-action btn-delete" onclick="openDeleteModal({{ $user->id }}, '{{ addslashes($user->name) }}')" 
                                                            title="Delete User" data-toggle="tooltip"
                                                            @if($user->id === auth()->id()) disabled @endif>
                                                        <i class="fas fa-trash"></i>
                                                        <span class="btn-tooltip">Delete</span>
                                                    </button>
                                                    <button class="btn-action btn-view" onclick="viewUser({{ $user->id }})" title="View Details" data-toggle="tooltip">
                                                        <i class="fas fa-eye"></i>
                                                        <span class="btn-tooltip">View</span>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            @if($veterinaryUsers->isEmpty())
                            <div class="empty-state">
                                <div class="empty-icon">
                                    <i class="fas fa-users fa-4x"></i>
                                </div>
                                <h3>No Veterinary Users Found</h3>
                                <p>Get started by adding your first veterinary user to the system.</p>
                                <a href="{{ route('add.veterinary') }}" class="btn-new-report">
                                    <i class="fas fa-plus"></i> Add First User
                                </a>
                            </div>
                            @else
                            <div class="table-footer">
                                <div class="row align-items-center">
                                    <div class="col-md-6">
                                        <div class="table-info">
                                            <i class="fas fa-info-circle"></i>
                                            Showing <strong id="visibleCount">{{ $veterinaryUsers->count() }}</strong> of <strong>{{ $veterinaryUsers->count() }}</strong> users
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="table-stats">
                                            <div class="stat-item">
                                                <i class="fas fa-users"></i>
                                                <span>Total: {{ $veterinaryUsers->count() }}</span>
                                            </div>
                                            <div class="stat-item">
                                                <i class="fas fa-check-circle"></i>
                                                <span>Active: {{ $veterinaryUsers->count() }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>
                </section>
                <!--End Reports Table Area-->
            </div>
        </div>
    </div>
</section>
<!--End Single Service Area-->

<!-- Edit User Modal -->
<div class="modal fade" id="editUserModal" tabindex="-1" role="dialog" aria-labelledby="editUserModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-header-content">
                    <i class="fas fa-edit"></i>
                    <h5 class="modal-title" id="editUserModalLabel">Edit Veterinary User</h5>
                </div>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="editUserForm">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div id="editFormErrors" class="alert alert-danger" style="display: none;">
                        <i class="fas fa-exclamation-triangle"></i>
                        <div class="error-content"></div>
                    </div>
                    
                    <input type="hidden" id="edit_user_id" name="id">
                    
                    <div class="form-group">
                        <label for="edit_name">
                            <i class="fas fa-user"></i>
                            Full Name *
                        </label>
                        <input type="text" class="form-control" id="edit_name" name="name" required>
                        <small class="form-text text-muted">Enter the full name of the veterinary user</small>
                    </div>
                    
                    <div class="form-group">
                        <label for="edit_email">
                            <i class="fas fa-envelope"></i>
                            Email Address *
                        </label>
                        <input type="email" class="form-control" id="edit_email" name="email" required>
                        <small class="form-text text-muted">Enter a valid email address</small>
                    </div>
                    
                    <div class="form-group">
                        <label for="edit_phone">
                            <i class="fas fa-phone"></i>
                            Phone Number *
                        </label>
                        <input type="text" class="form-control" id="edit_phone" name="phone" required>
                        <small class="form-text text-muted">Enter phone number with country code</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fas fa-times"></i> Cancel
                    </button>
                    <button type="submit" class="btn btn-primary" id="updateUserBtn">
                        <i class="fas fa-save"></i> Update User
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteUserModal" tabindex="-1" role="dialog" aria-labelledby="deleteUserModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-header-content">
                    <i class="fas fa-exclamation-triangle text-warning"></i>
                    <h5 class="modal-title" id="deleteUserModalLabel">Confirm Deletion</h5>
                </div>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="delete-warning">
                    <i class="fas fa-trash fa-3x text-danger"></i>
                    <div class="warning-content">
                        <h5>Are you sure you want to delete <strong id="deleteUserName"></strong>?</h5>
                        <p class="text-muted">This action cannot be undone. All associated data will be permanently removed from the system.</p>
                        <div class="alert alert-warning mt-3">
                            <i class="fas fa-exclamation-circle"></i>
                            <strong>Warning:</strong> This will permanently remove the user and all their data.
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    <i class="fas fa-times"></i> Cancel
                </button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
                    <i class="fas fa-trash"></i> Delete User
                </button>
            </div>
        </div>
    </div>
</div>

<style>
/* ===== MAIN TABLE STYLES ===== */
.reports-table-area {
    padding: 0;
}

.reports-header {
    background: linear-gradient(135deg, #137037 0%, #597a6a 100%);
    padding: 30px;
    border-radius: 15px 15px 0 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    margin-bottom: 0;
    color: white;
}

.reports-header h2 {
    color: white;
    margin-bottom: 5px;
    font-weight: 700;
    font-size: 1.8rem;
}

.reports-header p {
    color: rgba(255,255,255,0.9);
    margin: 0;
    font-size: 1rem;
}

.report-actions {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
}

.btn-export, .btn-new-report {
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-size: 0.9rem;
}

.btn-export {
    background: rgba(255,255,255,0.2);
    color: white;
    border: 1px solid rgba(255,255,255,0.3);
}

.btn-export:hover {
    background: rgba(255,255,255,0.3);
    transform: translateY(-2px);
}

.btn-new-report {
    background: #27ae60;
    color: white;
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
}

.btn-new-report:hover {
    background: #219653;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4);
    color: white;
    text-decoration: none;
}

/* Filter Section */
.reports-filter {
    background: white;
    padding: 25px 30px;
    border-bottom: 1px solid #ecf0f1;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.filter-group {
    margin-bottom: 0;
}

.filter-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.filter-group input, .filter-group select {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e8f0fe;
    border-radius: 10px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    background: #f8fafc;
}

.filter-group input:focus, .filter-group select:focus {
    outline: none;
    border-color: #667eea;
    background: white;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Table Container */
.reports-table-container {
    background: white;
    border-radius: 0 0 15px 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    overflow: hidden;
}

.reports-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.reports-table th {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    padding: 18px 15px;
    font-weight: 600;
    text-align: left;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #ecf0f1;
}

.table-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.table-header i {
    font-size: 0.8rem;
    opacity: 0.8;
}

.reports-table td {
    padding: 20px 15px;
    border-bottom: 1px solid #f8f9fa;
    vertical-align: middle;
    transition: all 0.3s ease;
}

.reports-table tbody tr {
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.reports-table tbody tr:hover {
    background: linear-gradient(90deg, #f8f9ff 0%, #ffffff 100%);
    border-left: 3px solid #667eea;
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* User Info Styles */
.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar-small {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
}

.user-details {
    display: flex;
    flex-direction: column;
}

.user-details strong {
    color: #2c3e50;
    font-weight: 600;
    font-size: 0.95rem;
}

.user-id {
    font-size: 0.75rem;
    color: #7f8c8d;
    margin-top: 2px;
}

/* Email and Phone Styles */
.email-info, .phone-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.email-info i, .phone-info i {
    color: #667eea;
    font-size: 0.9rem;
}

.email {
    color: #2c3e50;
    font-weight: 500;
}

.phone {
    color: #7f8c8d;
    font-weight: 500;
}

/* Date Info Styles */
.date-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.date-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f8f9fa;
    padding: 6px 10px;
    border-radius: 8px;
    width: fit-content;
}

.date-badge i {
    color: #27ae60;
    font-size: 0.8rem;
}

.date {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.85rem;
}

.days-ago {
    font-size: 0.75rem;
    color: #95a5a6;
    font-style: italic;
}

/* Status Badge */
.status-container {
    display: flex;
    justify-content: center;
}

.status-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
}

.status-badge.active {
    background: #e8f6f3;
    color: #27ae60;
    border: 1px solid #27ae60;
}

.status-badge i {
    font-size: 0.7rem;
}

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.btn-action {
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.8rem;
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    color: white;
    min-width: 40px;
    justify-content: center;
}

.btn-action .btn-tooltip {
    display: none;
    font-size: 0.7rem;
}

.btn-edit {
    background: #3498db;
}

.btn-edit:hover {
    background: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
}

.btn-delete {
    background: #e74c3c;
}

.btn-delete:hover {
    background: #c0392b;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3);
}

.btn-view {
    background: #9b59b6;
}

.btn-view:hover {
    background: #8e44ad;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(155, 89, 182, 0.3);
}

/* Table Footer */
.table-footer {
    padding: 20px 30px;
    background: #f8f9fa;
    border-top: 1px solid #ecf0f1;
}

.table-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #7f8c8d;
    font-size: 0.9rem;
}

.table-info i {
    color: #3498db;
}

.table-stats {
    display: flex;
    gap: 20px;
    justify-content: flex-end;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #7f8c8d;
}

.stat-item i {
    color: #27ae60;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    background: #f8f9fa;
}

.empty-icon {
    margin-bottom: 20px;
    color: #bdc3c7;
}

.empty-state h3 {
    color: #2c3e50;
    margin-bottom: 10px;
    font-weight: 600;
}

.empty-state p {
    color: #7f8c8d;
    margin-bottom: 25px;
    font-size: 1rem;
}

/* ===== MODAL STYLES ===== */
.modal-content {
    border-radius: 15px;
    border: none;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    overflow: hidden;
}

.modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 15px 15px 0 0;
    border-bottom: none;
    padding: 25px;
}

.modal-header-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-header-content i {
    font-size: 1.2rem;
}

.modal-title {
    font-weight: 600;
    font-size: 1.3rem;
    margin: 0;
}

.modal-body {
    padding: 30px;
}

.modal-footer {
    border-top: 1px solid #ecf0f1;
    padding: 20px 30px;
    border-radius: 0 0 15px 15px;
}

/* Form Styles */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.form-group label i {
    color: #667eea;
    width: 16px;
}

.form-control {
    border: 2px solid #e8f0fe;
    border-radius: 10px;
    padding: 12px 15px;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.form-control:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    background: white;
}

/* Delete Warning */
.delete-warning {
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: left;
}

.warning-content h5 {
    color: #2c3e50;
    margin-bottom: 8px;
    font-weight: 600;
}

.warning-content p {
    color: #7f8c8d;
    margin: 0;
    font-size: 0.9rem;
}

/* Button Styles */
.btn {
    padding: 12px 25px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    background: linear-gradient(135deg, #5a6fd8, #6a4190);
    color: white;
}

.btn-danger {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
    background: linear-gradient(135deg, #d32a2a, #a2352a);
    color: white;
}

.btn-secondary {
    background: #95a5a6;
    color: white;
}

.btn-secondary:hover {
    background: #7f8c8d;
    transform: translateY(-2px);
    color: white;
}

/* Additional Styles */
.btn-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.btn-action:disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

.alert-warning {
    background: #fff3cd;
    color: #856404;
    border-left: 4px solid #ffc107;
}

.form-text {
    font-size: 0.8rem;
    margin-top: 5px;
}

/* Loading States */
.btn-loading {
    position: relative;
    color: transparent !important;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid transparent;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Alert Styles */
.alert {
    border-radius: 10px;
    border: none;
    padding: 15px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.alert-success {
    background: #d4edda;
    color: #155724;
    border-left: 4px solid #28a745;
}

.alert-danger {
    background: #f8d7da;
    color: #721c24;
    border-left: 4px solid #dc3545;
}

.alert i {
    margin-top: 2px;
    flex-shrink: 0;
}

/* Error Form Styles */
#editFormErrors {
    background: #f8d7da;
    color: #721c24;
    border-left: 4px solid #dc3545;
}

#editFormErrors .error-content ul {
    margin: 0;
    padding-left: 20px;
}

#editFormErrors .error-content li {
    margin-bottom: 5px;
}

/* Highlight animation for updated rows */
.highlight-update {
    animation: highlightFade 2s ease;
}

@keyframes highlightFade {
    0% { background-color: #d4edda; }
    100% { background-color: transparent; }
}

/* Responsive Design */
@media (max-width: 768px) {
    .reports-header {
        padding: 20px;
    }
    
    .report-actions {
        flex-direction: column;
        gap: 10px;
        margin-top: 15px;
    }
    
    .btn-export, .btn-new-report {
        width: 100%;
        justify-content: center;
    }
    
    .reports-filter {
        padding: 20px;
    }
    
    .reports-table {
        font-size: 0.8rem;
    }
    
    .reports-table th,
    .reports-table td {
        padding: 12px 8px;
    }
    
    .user-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .action-buttons {
        flex-direction: column;
        gap: 5px;
    }
    
    .btn-action {
        width: 100%;
        justify-content: center;
    }
    
    .btn-action .btn-tooltip {
        display: inline;
    }
    
    .table-stats {
        justify-content: flex-start;
        margin-top: 10px;
    }
    
    .modal-body {
        padding: 20px;
    }
    
    .delete-warning {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
}

@media (max-width: 576px) {
    .reports-header .row {
        text-align: center;
    }
    
    .reports-header h2 {
        font-size: 1.5rem;
    }
    
    .filter-group {
        margin-bottom: 15px;
    }
    
    .table-footer {
        padding: 15px 20px;
    }
    
    .table-info, .table-stats {
        justify-content: center;
        text-align: center;
    }
    
    .table-stats {
        flex-direction: column;
        gap: 10px;
    }
}

/* Animation for table rows */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reports-table tbody tr {
    animation: fadeIn 0.5s ease forwards;
}

.reports-table tbody tr:nth-child(1) { animation-delay: 0.1s; }
.reports-table tbody tr:nth-child(2) { animation-delay: 0.2s; }
.reports-table tbody tr:nth-child(3) { animation-delay: 0.3s; }
.reports-table tbody tr:nth-child(4) { animation-delay: 0.4s; }
.reports-table tbody tr:nth-child(5) { animation-delay: 0.5s; }
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
let currentUserId = null;

// Open Edit Modal
function openEditModal(userId) {
    currentUserId = userId;
    
    // Show loading state
    $('#updateUserBtn').addClass('btn-loading').prop('disabled', true);
    $('#editFormErrors').hide();
    
    // Fetch user data
    $.ajax({
        url: `/manage-veterinary/${userId}/edit`,
        type: 'GET',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        success: function(response) {
            $('#edit_user_id').val(response.id);
            $('#edit_name').val(response.name);
            $('#edit_email').val(response.email);
            $('#edit_phone').val(response.phone);
            $('#editUserModal').modal('show');
        },
        error: function(xhr) {
            let errorMessage = 'Failed to load user data.';
            if (xhr.status === 404) {
                errorMessage = 'User not found.';
            } else if (xhr.responseJSON && xhr.responseJSON.error) {
                errorMessage = xhr.responseJSON.error;
            }
            showAlert('error', errorMessage);
        },
        complete: function() {
            $('#updateUserBtn').removeClass('btn-loading').prop('disabled', false);
        }
    });
}

// Handle Edit Form Submission
$('#editUserForm').on('submit', function(e) {
    e.preventDefault();
    
    const formData = $(this).serialize();
    const submitBtn = $('#updateUserBtn');
    
    submitBtn.addClass('btn-loading').prop('disabled', true);
    $('#editFormErrors').hide();
    
    $.ajax({
        url: `/manage-veterinary/${currentUserId}`,
        type: 'POST',
        data: formData + '&_method=PUT',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        success: function(response) {
            $('#editUserModal').modal('hide');
            showAlert('success', response.message);
            
            // Update the table row with new data
            updateTableRow(response.user);
        },
        error: function(xhr) {
            if (xhr.status === 422) {
                const errors = xhr.responseJSON.errors;
                let errorHtml = '<ul>';
                for (const field in errors) {
                    errorHtml += `<li>${errors[field][0]}</li>`;
                }
                errorHtml += '</ul>';
                $('#editFormErrors .error-content').html(errorHtml);
                $('#editFormErrors').show();
            } else {
                let errorMessage = 'Failed to update user. Please try again.';
                if (xhr.responseJSON && xhr.responseJSON.error) {
                    errorMessage = xhr.responseJSON.error;
                }
                showAlert('error', errorMessage);
            }
        },
        complete: function() {
            submitBtn.removeClass('btn-loading').prop('disabled', false);
        }
    });
});

// Update table row with new data
function updateTableRow(user) {
    const row = $(`tr[data-user-id="${user.id}"]`);
    
    if (row.length) {
        // Update name
        row.find('.user-details strong').text(user.name);
        
        // Update email
        row.find('.email').text(user.email);
        
        // Update phone
        const phoneText = user.phone || 'N/A';
        row.find('.phone').text(phoneText);
        
        // Add highlight effect
        row.addClass('highlight-update');
        setTimeout(() => {
            row.removeClass('highlight-update');
        }, 2000);
    }
}

// Open Delete Modal
function openDeleteModal(userId, userName) {
    currentUserId = userId;
    $('#deleteUserName').text(userName);
    $('#deleteUserModal').modal('show');
}

// Handle Delete Confirmation
$('#confirmDeleteBtn').on('click', function() {
    const deleteBtn = $(this);
    
    deleteBtn.addClass('btn-loading').prop('disabled', true);
    
    $.ajax({
        url: `/manage-veterinary/${currentUserId}`,
        type: 'POST',
        data: {
            _method: 'DELETE',
            _token: '{{ csrf_token() }}'
        },
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        success: function(response) {
            $('#deleteUserModal').modal('hide');
            showAlert('success', response.message);
            
            // Remove the row from table
            $(`tr[data-user-id="${currentUserId}"]`).fadeOut(300, function() {
                $(this).remove();
                updateTableInfo();
                
                // Check if table is empty
                if ($('#usersTableBody tr').length === 0) {
                    location.reload(); // Reload to show empty state
                }
            });
        },
        error: function(xhr) {
            $('#deleteUserModal').modal('hide');
            let errorMessage = 'Failed to delete user. Please try again.';
            if (xhr.status === 403) {
                errorMessage = xhr.responseJSON.error;
            } else if (xhr.status === 404) {
                errorMessage = 'User not found.';
            } else if (xhr.responseJSON && xhr.responseJSON.error) {
                errorMessage = xhr.responseJSON.error;
            }
            showAlert('error', errorMessage);
        },
        complete: function() {
            deleteBtn.removeClass('btn-loading').prop('disabled', false);
        }
    });
});

// View User Function
function viewUser(userId) {
    // Implement view functionality here
    showAlert('info', 'View user details functionality would be implemented here');
}

// Table Search Functionality
$('#searchInput').on('input', function() {
    const searchTerm = this.value.toLowerCase();
    const rows = $('#usersTableBody tr');
    let visibleCount = 0;
    
    rows.each(function() {
        const text = $(this).text().toLowerCase();
        const isVisible = text.includes(searchTerm);
        $(this).toggle(isVisible);
        if (isVisible) visibleCount++;
    });
    
    updateTableInfo(visibleCount);
});

// Date Filtering
$('#dateFrom, #dateTo').on('change', function() {
    filterByDate();
});

function filterByDate() {
    const fromDate = $('#dateFrom').val() ? new Date($('#dateFrom').val()) : null;
    const toDate = $('#dateTo').val() ? new Date($('#dateTo').val()) : null;
    const rows = $('#usersTableBody tr');
    let visibleCount = 0;
    
    rows.each(function() {
        const dateText = $(this).find('.date').text();
        const rowDate = new Date(dateText);
        
        let showRow = true;
        
        if (fromDate && rowDate < fromDate) {
            showRow = false;
        }
        
        if (toDate && rowDate > toDate) {
            showRow = false;
        }
        
        $(this).toggle(showRow);
        if (showRow) visibleCount++;
    });
    
    updateTableInfo(visibleCount);
}

function updateTableInfo(visibleCount = null) {
    const totalRows = $('#usersTableBody tr').length;
    const visibleRows = visibleCount !== null ? visibleCount : $('#usersTableBody tr:visible').length;
    
    $('#visibleCount').text(visibleRows);
    $('.table-info').html(`<i class="fas fa-info-circle"></i> Showing <strong>${visibleRows}</strong> of <strong>${totalRows}</strong> users`);
}

function showAlert(type, message) {
    const alertClass = type === 'success' ? 'alert-success' : 
                      type === 'error' ? 'alert-danger' : 
                      type === 'warning' ? 'alert-warning' : 'alert-info';
    const icon = type === 'success' ? 'fa-check-circle' : 
                type === 'error' ? 'fa-exclamation-circle' : 
                type === 'warning' ? 'fa-exclamation-triangle' : 'fa-info-circle';
    
    const alertHtml = `
        <div class="alert ${alertClass} alert-dismissible fade show m-3" role="alert">
            <i class="fas ${icon}"></i>
            ${message}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    `;
    
    // Remove existing alerts
    $('#alertContainer').html(alertHtml);
    
    // Auto remove after 5 seconds
    setTimeout(() => {
        $('#alertContainer .alert').fadeOut('slow', function() {
            $(this).remove();
        });
    }, 5000);
}

function exportToCSV() {
    let csv = 'Name,Email,Phone,Registration Date,Status\n';
    
    $('#usersTableBody tr:visible').each(function() {
        const name = $(this).find('strong').text();
        const email = $(this).find('.email').text();
        const phone = $(this).find('.phone').text();
        const date = $(this).find('.date').text();
        const status = $(this).find('.status-badge').text().trim();
        
        csv += `"${name}","${email}","${phone}","${date}","${status}"\n`;
    });
    
    const blob = new Blob([csv], { type: 'text/csv' });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.setAttribute('hidden', '');
    a.setAttribute('href', url);
    a.setAttribute('download', 'veterinary_users_' + new Date().toISOString().split('T')[0] + '.csv');
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    
    showAlert('success', 'CSV file downloaded successfully!');
}

// Initialize tooltips
$(function () {
    $('[data-toggle="tooltip"]').tooltip();
});

// Initialize table info
updateTableInfo();

// Handle modal hidden events
$('#editUserModal').on('hidden.bs.modal', function () {
    $('#editFormErrors').hide();
    $('#editUserForm')[0].reset();
    currentUserId = null;
});

$('#deleteUserModal').on('hidden.bs.modal', function () {
    currentUserId = null;
});

// Auto-hide session alerts after 5 seconds
setTimeout(() => {
    $('.alert').fadeOut('slow');
}, 5000);
</script>
@endsection