@extends('layouts.admin')

@section('title', 'Client Management')

@section('content')
<div class="container-fluid px-4">
    <!-- Page Header with Gradient -->
    <div class="d-flex justify-content-between align-items-center mb-4 py-3">
        <div>
            <h3 class="fw-bold text-primary mb-0">
                <i class="fas fa-users me-2"></i>Client List
            </h3>
        </div>
        <div>
            <span class="badge bg-light text-dark p-3 shadow-sm">
                <i class="fas fa-user-check text-success me-2"></i>
                Total Clients: {{ $clients->total() }}
            </span>
        </div>
    </div>

    <!-- Search and Filter Card -->
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <form method="GET" class="row g-3">
                <div class="col-md-5">
                    <div class="input-group">
                        <span class="input-group-text bg-white border-end-0">
                            <i class="fas fa-search text-primary"></i>
                        </span>
                        <input type="text" 
                               name="search"
                               value="{{ request('search') }}"
                               class="form-control border-start-0 ps-0"
                               placeholder="Search by name, email or phone number...">
                    </div>
                </div>
                <div class="col-md-3">
                    <select name="status" class="form-select">
                        <option value="">All Status</option>
                        <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                        <option value="deactivated" {{ request('status') == 'deactivated' ? 'selected' : '' }}>Deactivated</option>
                        <option value="terminated" {{ request('status') == 'terminated' ? 'selected' : '' }}>Terminated</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <select name="per_page" class="form-select">
                        <option value="20" {{ request('per_page') == 20 ? 'selected' : '' }}>20 per page</option>
                        <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50 per page</option>
                        <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100 per page</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary flex-grow-1">
                            <i class="fas fa-filter me-2"></i>Apply
                        </button>
                        <a href="{{ route('clients.index') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-redo-alt"></i>
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Main Table Card -->
    <div class="card border-0 shadow-lg">
        <div class="card-header bg-white py-3">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold">
                    <i class="fas fa-table me-2 text-primary"></i>Clients Overview
                </h5>
                <div>
                    <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addClientModal">
                        <i class="fas fa-plus-circle me-2"></i>Add Client
                    </button>
                </div>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="bg-light">
                        <tr>
                            <th class="ps-4" width="60">#</th>
                            <th>Client Details</th>
                            <th>Contact Info</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($clients as $client)
                        <tr>
                            <td class="ps-4">
                                <span class="fw-semibold">{{ $clients->firstItem() + $loop->index }}</span>
                            </td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="avatar-circle me-3 bg-{{ ['primary', 'success', 'info', 'warning'][rand(0,3)] }} bg-opacity-10">
                                        <span class="text-primary fw-bold">
                                            {{ strtoupper(substr($client->name, 0, 2)) }}
                                        </span>
                                    </div>
                                    <div>
                                        <h6 class="mb-0 fw-bold">{{ $client->name }}</h6>
                                        <small class="text-muted">
                                            <i class="fas fa-id-card me-1"></i>ID: #{{ $client->id }}
                                        </small>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="mb-1">
                                    <i class="fas fa-envelope text-muted me-2"></i>
                                    <small>{{ $client->email }}</small>
                                </div>
                                <div>
                                    <i class="fas fa-phone-alt text-muted me-2"></i>
                                    <small>{{ $client->phone_number ?? 'N/A' }}</small>
                                </div>
                            </td>
                            <td>
                                @php
                                    $statusColors = [
                                        'active' => ['bg' => 'success', 'icon' => 'fa-check-circle'],
                                        'deactivated' => ['bg' => 'secondary', 'icon' => 'fa-minus-circle'],
                                        'terminated' => ['bg' => 'danger', 'icon' => 'fa-exclamation-circle'],
                                    ];
                                    $status = $statusColors[$client->status ?? 'deactivated'] ?? $statusColors['deactivated'];
                                @endphp
                                <span class="badge bg-{{ $status['bg'] }} bg-opacity-10 text-{{ $status['bg'] }} px-3 py-2 rounded-pill">
                                    <i class="fas {{ $status['icon'] }} me-1"></i>
                                    {{ ucfirst($client->status ?? 'deactivated') }}
                                </span>
                            </td>
                          
                            <td>
                                <div class="action-buttons d-flex gap-2">
                                    <a href="{{ route('clients.show', $client->id) }}" 
                                       class="btn btn-sm btn-outline-primary rounded-circle"
                                       data-bs-toggle="tooltip" 
                                       title="View Details">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <button type="button" 
                                       class="btn btn-sm btn-outline-secondary rounded-circle"
                                       data-bs-toggle="modal" 
                                       data-bs-target="#editClientModal{{ $client->id }}"
                                       data-bs-toggle="tooltip" 
                                       title="Edit Client">
                                        <i class="fas fa-pencil-alt"></i>
                                    </button>

                                    <div class="dropdown d-inline-block">
                                        <button class="btn btn-sm btn-outline-danger rounded-circle" 
                                                type="button" 
                                                data-bs-toggle="dropdown"
                                                data-bs-toggle="tooltip" 
                                                title="More Actions">
                                            <i class="fas fa-ellipsis-v"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end">
                                            <li>
                                                <button type="button" 
                                                        class="dropdown-item text-danger"
                                                        onclick="confirmDelete({{ $client->id }})">
                                                    <i class="fas fa-trash-alt me-2"></i>Delete Client
                                                </button>
                                            </li>
                                            
                                        </ul>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="text-center py-5">
                                <div class="empty-state">
                                    <i class="fas fa-users fa-4x text-muted mb-3"></i>
                                    <h5>No Clients Found</h5>
                                    <p class="text-muted">Get started by adding your first client</p>
                                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addClientModal">
                                        <i class="fas fa-plus-circle me-2"></i>Add New Client
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer bg-white py-3">
            <div class="d-flex justify-content-between align-items-center">
                <div class="text-muted small">
                    <i class="fas fa-info-circle me-1"></i>
                    Showing {{ $clients->firstItem() ?? 0 }} to {{ $clients->lastItem() ?? 0 }} 
                    of {{ $clients->total() }} entries
                </div>
                <div>
                    {{ $clients->withQueryString()->links() }}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Client Modal -->
<div class="modal fade" id="addClientModal" tabindex="-1" aria-labelledby="addClientModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0">
            <div class="modal-header bg-light border-0">
                <h5 class="modal-title" id="addClientModalLabel">
                    <i class="fas fa-user-plus text-primary me-2"></i>
                    Add New Client
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('role_user.store') }}" method="POST">
                @csrf
                <div class="modal-body p-4">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="form-floating mb-3">
                                <input type="text" 
                                       name="name" 
                                       class="form-control border-0 bg-light" 
                                       id="addName"
                                       placeholder="Enter name" 
                                       required>
                                <label for="addName" class="fw-bold">Full Name <span class="text-danger">*</span></label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating mb-3">
                                <input type="email" 
                                       name="email" 
                                       class="form-control border-0 bg-light" 
                                       id="addEmail"
                                       placeholder="Enter email" 
                                       required>
                                <label for="addEmail" class="fw-bold">Email Address <span class="text-danger">*</span></label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating mb-3">
                                <input type="text" 
                                       name="phone_number" 
                                       class="form-control border-0 bg-light" 
                                       id="addPhone"
                                       placeholder="Enter phone number">
                                <label for="addPhone" class="fw-bold">Phone Number</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating mb-3">
                                <select name="status" class="form-select border-0 bg-light" id="addStatus">
                                    <option value="active">Active</option>
                                    <option value="deactivated">Deactivated</option>
                                    <option value="terminated">Terminated</option>
                                </select>
                                <label for="addStatus" class="fw-bold">Status</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating mb-3">
                                <input type="password" 
                                       name="password" 
                                       class="form-control border-0 bg-light" 
                                       id="addPassword"
                                       placeholder="Enter password" 
                                       required>
                                <label for="addPassword" class="fw-bold">Password <span class="text-danger">*</span></label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating mb-3">
                                <input type="password" 
                                       name="password_confirmation" 
                                       class="form-control border-0 bg-light" 
                                       id="addConfirmPassword"
                                       placeholder="Confirm password" 
                                       required>
                                <label for="addConfirmPassword" class="fw-bold">Confirm Password <span class="text-danger">*</span></label>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-floating mb-3">
                                <select name="role" class="form-select border-0 bg-light" id="addRole" required>
                                    <option value="">Select Role</option>
                                    @foreach($roles as $role)
                                        <option value="{{ $role->id }}">{{ $role->name }}</option>
                                    @endforeach
                                </select>
                                <label for="addRole" class="fw-bold">User Role <span class="text-danger">*</span></label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 bg-light">
                    <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">
                        <i class="fas fa-times me-2"></i>Cancel
                    </button>
                    <button type="submit" class="btn rounded-pill px-4" style="background: #7D26C2; color: white;">
                        <i class="fas fa-save me-2"></i>Create Client
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Client Modals -->
@foreach($clients as $client)
<div class="modal fade" id="editClientModal{{ $client->id }}" tabindex="-1" aria-labelledby="editClientModalLabel{{ $client->id }}" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0">
            <div class="modal-header bg-light border-0">
                <h5 class="modal-title" id="editClientModalLabel{{ $client->id }}">
                    <i class="fas fa-user-edit text-primary me-2"></i>
                    Edit Client - {{ $client->name }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('role_user.update', $client->id) }}" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body p-4">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="form-floating mb-3">
                                <input type="text" 
                                       name="name" 
                                       class="form-control border-0 bg-light" 
                                       id="editName{{ $client->id }}"
                                       placeholder="Enter name" 
                                       value="{{ $client->name }}" 
                                       required>
                                <label for="editName{{ $client->id }}" class="fw-bold">Full Name <span class="text-danger">*</span></label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating mb-3">
                                <input type="email" 
                                       name="email" 
                                       class="form-control border-0 bg-light" 
                                       id="editEmail{{ $client->id }}"
                                       placeholder="Enter email" 
                                       value="{{ $client->email }}" 
                                       required>
                                <label for="editEmail{{ $client->id }}" class="fw-bold">Email Address <span class="text-danger">*</span></label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating mb-3">
                                <input type="text" 
                                       name="phone_number" 
                                       class="form-control border-0 bg-light" 
                                       id="editPhone{{ $client->id }}"
                                       placeholder="Enter phone number" 
                                       value="{{ $client->phone_number }}">
                                <label for="editPhone{{ $client->id }}" class="fw-bold">Phone Number</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating mb-3">
                                <select name="status" class="form-select border-0 bg-light" id="editStatus{{ $client->id }}">
                                    <option value="active" {{ $client->status == 'active' ? 'selected' : '' }}>Active</option>
                                    <option value="deactivated" {{ $client->status == 'deactivated' ? 'selected' : '' }}>Deactivated</option>
                                    <option value="terminated" {{ $client->status == 'terminated' ? 'selected' : '' }}>Terminated</option>
                                </select>
                                <label for="editStatus{{ $client->id }}" class="fw-bold">Status</label>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-floating mb-3">
                                <select name="role" class="form-select border-0 bg-light" id="editRole{{ $client->id }}" required>
                                    <option value="">Select Role</option>
                                    @foreach($roles as $role)
                                        <option value="{{ $role->id }}"
                                            {{ $client->roles->first()?->id == $role->id ? 'selected' : '' }}>
                                            {{ $role->name }}
                                        </option>
                                    @endforeach
                                </select>
                                <label for="editRole{{ $client->id }}" class="fw-bold">User Role <span class="text-danger">*</span></label>
                            </div>
                        </div>
                        
                        <div class="col-12">
                            <hr>
                            <div class="alert alert-info bg-light border-0 small">
                                <i class="fas fa-info-circle me-2"></i>
                                Leave password fields empty if you don't want to change it.
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-floating mb-3">
                                <input type="password" 
                                       name="password" 
                                       class="form-control border-0 bg-light" 
                                       id="editPassword{{ $client->id }}"
                                       placeholder="Enter new password">
                                <label for="editPassword{{ $client->id }}" class="fw-bold">New Password</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating mb-3">
                                <input type="password" 
                                       name="password_confirmation" 
                                       class="form-control border-0 bg-light" 
                                       id="editConfirmPassword{{ $client->id }}"
                                       placeholder="Confirm new password">
                                <label for="editConfirmPassword{{ $client->id }}" class="fw-bold">Confirm Password</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 bg-light">
                    <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">
                        <i class="fas fa-times me-2"></i>Cancel
                    </button>
                    <button type="submit" class="btn rounded-pill px-4" style="background: #7D26C2; color: white;">
                        <i class="fas fa-save me-2"></i>Update Client
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>


@endforeach

<!-- Delete Form (Hidden) -->
<form id="deleteForm" method="POST" style="display: none;">
    @csrf
    @method('DELETE')
</form>

<style>
/* Custom Styles */
.avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.empty-state {
    padding: 3rem;
    text-align: center;
}

.action-buttons .btn {
    width: 35px;
    height: 35px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.action-buttons .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Table hover effect */
.table tbody tr:hover {
    background-color: rgba(78, 115, 223, 0.05);
    cursor: pointer;
}

/* Custom scrollbar */
.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Dropdown menu animation */
.dropdown-menu {
    animation: slideIn 0.2s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Badge hover effect */
.badge {
    transition: all 0.3s;
}

.badge:hover {
    transform: scale(1.05);
}

/* Card hover effects */
.card {
    transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
}

/* Modal animations */
.modal.fade .modal-dialog {
    transform: scale(0.95);
    transition: transform 0.2s ease-out;
}

.modal.show .modal-dialog {
    transform: scale(1);
}

/* Form floating labels fix */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    color: #7D26C2;
    font-weight: 600;
    opacity: 0.8;
}

/* Custom button style */
.btn[style*="background: #7D26C2"]:hover {
    background: #5e1d9a !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(125, 38, 194, 0.3);
}
</style>

<script>
// Initialize tooltips
document.addEventListener('DOMContentLoaded', function() {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    });
});

// Export table to Excel function
function exportTableToExcel() {
    Swal.fire({
        title: 'Export Clients',
        text: 'Choose export format',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#6c757d',
        confirmButtonText: '<i class="fas fa-file-excel me-2"></i>Excel',
        cancelButtonText: '<i class="fas fa-file-pdf me-2"></i>PDF',
    }).then((result) => {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Exported!',
                text: 'Client list has been exported to Excel.',
                icon: 'success',
                timer: 2000,
                showConfirmButton: false
            });
        } else if (result.dismiss === Swal.DismissReason.cancel) {
            Swal.fire({
                title: 'Exported!',
                text: 'Client list has been exported to PDF.',
                icon: 'success',
                timer: 2000,
                showConfirmButton: false
            });
        }
    });
}

// Row click handler
document.querySelectorAll('tbody tr').forEach(row => {
    row.addEventListener('click', function(e) {
        if (!e.target.closest('.action-buttons') && !e.target.closest('.dropdown')) {
            const viewBtn = this.querySelector('.btn-outline-primary');
            if (viewBtn) {
                window.location.href = viewBtn.href;
            }
        }
    });
});

// SweetAlert for delete confirmation
function confirmDelete(clientId) {
    Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#6c757d',
        confirmButtonText: '<i class="fas fa-trash-alt me-2"></i>Yes, delete it!',
        cancelButtonText: '<i class="fas fa-times me-2"></i>Cancel',
        reverseButtons: true
    }).then((result) => {
        if (result.isConfirmed) {
            // Set the form action and submit
            const deleteForm = document.getElementById('deleteForm');
            deleteForm.action = `/role_user/${clientId}`;
            deleteForm.submit();
            
            Swal.fire({
                title: 'Deleted!',
                text: 'Client has been deleted.',
                icon: 'success',
                timer: 2000,
                showConfirmButton: false
            });
        }
    });
}

// Show success message if session has success
@if(session('success'))
    Swal.fire({
        title: 'Success!',
        text: "{{ session('success') }}",
        icon: 'success',
        timer: 3000,
        showConfirmButton: false
    });
@endif

// Show error message if session has error
@if(session('error'))
    Swal.fire({
        title: 'Error!',
        text: "{{ session('error') }}",
        icon: 'error',
        timer: 3000,
        showConfirmButton: false
    });
@endif
</script>

<!-- Add Font Awesome if not already included in your layout -->
@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endpush
@endsection