@extends('layout.super-admin-two')

@section('title', 'User Details')

@section('content')
    <div class="page-header">
        <div>
            <h1>User Details</h1>
            <p class="text-muted">View and manage user information</p>
        </div>
        <span class="badge badge-user-type-{{ strtolower(str_replace(' ', '-', $user->user_type_name ?? '')) }} rounded-pill" style="font-size: 0.9rem; padding: 0.5rem 1rem;">
            {{ $user->user_type_name }}
        </span>
    </div>

    {{-- Success Message --}}
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="bi bi-check-circle-fill me-1 text-success"></i>  
            <span class="text-success">{{ session('success') }}</span>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    {{-- Error Message --}}
    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-circle"></i>
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row g-4">
        <div class="col-lg-8">
            {{-- User Information Card --}}
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header text-primary border-bottom" style="background-color: #E8F0FF;">
                   
                        <i class="bi bi-info-circle me-1"></i> <span>User Information</span>
              
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-4">
                            <div class="info-group">
                                <h6 class="text-muted small fw-bold text-uppercase">First Name</h6>
                                <p class="mb-0" style="font-size: 1.1rem;">{{ $user->first_name }}</p>
                            </div>
                        </div>
                        <div class="col-md-6  mb-4">
                            <div class="info-group">
                                <h6 class="text-muted small fw-bold text-uppercase">Last Name</h6>
                                <p class="mb-0" style="font-size: 1.1rem;">{{ $user->last_name }}</p>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-4">
                            <div class="info-group">
                                <h6 class="text-muted small fw-bold text-uppercase">Email</h6>
                                <p class="mb-0">
                                    <a href="mailto:{{ $user->user_contact_email }}">{{ $user->user_contact_email }}</a>
                                </p>
                            </div>
                        </div>
                        <div class="col-md-6 mb-4">
                            <div class="info-group">
                                <h6 class="text-muted small fw-bold text-uppercase">Phone</h6>
                                <p class="mb-0">
                                    {{ $user->user_contact_mobile ?? '—' }}
                                </p>
                            </div>
                        </div>
                    </div>

                    @if($user->address)
                        <div class="mb-4">
                            <div class="info-group">
                                <h6 class="text-muted small fw-bold text-uppercase">Address</h6>
                                <p class="mb-0">{{ $user->address }}</p>
                            </div>
                        </div>
                    @endif

                    <hr class="my-4">

                    {{-- Action Buttons --}}
                    <div class="d-flex gap-2 flex-wrap">
                        <a href="/sa-usermgmt/{{ $user->user_id }}/edit?page={{ request()->query('page', 1) }}" class="btn btn-warning btn-sm">
                            <i class="bi bi-pencil"></i> Edit User
                        </a>
                        
                        @if(strtolower($user->user_status_name) !== 'deleted')
                            <button type="button" 
                                    class="btn btn-danger delete-user-btn btn-sm" 
                                    data-user-id="{{ $user->user_id }}"
                                    data-user-name="{{ $user->first_name }} {{ $user->last_name }}">
                                <i class="bi bi-trash"></i> Delete User
                            </button>
                        @else
                            <button type="button" class="btn btn-secondary btn-sm" disabled>
                                <i class="bi bi-trash"></i> User Deleted
                            </button>
                        @endif
                        
                        <a href="#" class="btn btn-outline-secondary ms-auto btn-sm">
                            <i class="bi bi-arrow-left"></i> Back to List
                        </a>
                    </div>
                </div>
            </div>
        </div>

        {{-- Sidebar --}}
        <div class="col-lg-4">
            {{-- Status Card --}}
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header border-bottom text-primary" style="background-color: #E8F0FF;">
                   
                    <i class="bi bi-shield-check me-1"></i> <span>Account Status</span>
                    
                </div>
                <div class="card-body">
                    <div class="mb-4">
                        <h6 class="text-muted small fw-bold text-uppercase mb-2">User Type</h6>
                            <span class="badge bg-primary bg-opacity-10 text-primary border border-primary rounded-pill text-capitalize">
                                {{ $user->user_type_name ?? 'N/A' }}
                            </span>
                    </div>

                    <div class="mb-4 pb-3 border-bottom">
                        <h6 class="text-muted small fw-bold text-uppercase mb-2">Status</h6>
                        @php
                            $statusColors = [
                                'active' => 'success',
                                'deleted' => 'danger',
                                'pending' => 'warning',
                                'suspended' => 'secondary',
                                'inactive' => 'dark',
                            ];
                            $statusColor = $statusColors[strtolower($user->user_status_name)] ?? 'secondary';
                        @endphp
                        <span class="badge bg-{{ $statusColor }} rounded-pill" style="font-size: 0.85rem; padding: 0.5rem 0.75rem;">
                            {{ $user->user_status_name }}
                        </span>
                    </div>

                    <div>
                        <h6 class="text-muted small fw-bold text-uppercase">Email Address</h6>
                        <p class="mb-0 small">
                            <a href="mailto:{{ $user->user_contact_email }}" class="text-decoration-none">
                                {{ $user->user_contact_email }}
                            </a>
                        </p>
                    </div>
                </div>
            </div>

            {{-- Contact Card --}}
            <div class="card shadow-sm border-0">
                <div class="card-header text-primary border-bottom" style="background-color: #E8F0FF;">
                    
                    <i class="bi bi-telephone me-1"></i> <span>Contact Information</span>
                    
                </div>
                <div class="card-body">
                    <div class="contact-item mb-3 pb-3 border-bottom">
                        <h6 class="text-muted small fw-bold text-uppercase mb-2">Phone</h6>
                        <p class="mb-0">
                            @if($user->user_contact_mobile)
                                <a href="tel:{{ $user->user_contact_mobile }}" class="text-decoration-none">
                                    {{ $user->user_contact_mobile }}
                                </a>
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </p>
                    </div>

                    @if($user->address)
                        <div class="contact-item">
                            <h6 class="text-muted small fw-bold text-uppercase mb-2">Address</h6>
                            <p class="mb-0 small">{{ $user->address }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Delete Confirmation Modal --}}
    <div class="modal fade" id="deleteModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg">
                <div class="modal-header bg-danger text-white border-0">
                    <h5 class="modal-title">
                        <i class="bi bi-exclamation-triangle"></i> Delete User
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete <strong id="deleteUserName" class="text-danger"></strong>?</p>
                    <p class="text-muted small mb-0">
                        <i class="bi bi-info-circle"></i>
                        The user will be marked as deleted and will no longer have access to the system.
                    </p>
                </div>
                <div class="modal-footer border-top">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    
                    <form id="deleteForm" method="POST" style="display: none;">
                        @csrf
                        @method('DELETE')
                    </form>
                    
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
                        <i class="bi bi-trash"></i> Delete Permanently
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        /* User Type Badges */
        .badge-user-type-admin {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            font-weight: 500;
        }

        .badge-user-type-encoder {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            font-weight: 500;
        }

        .badge-user-type-user {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            font-weight: 500;
        }

        .badge-user-type-super-admin {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            color: white;
            font-weight: 500;
        }

        /* Info groups */
        .info-group {
            padding: 1rem;
            background-color: #f8f9fa;
            border-radius: 0.5rem;
            border-left: 4px solid #0d6efd;
        }

        /* Card animations */
        .card {
            transition: all 0.3s ease;
        }       

        /* Contact items */
        .contact-item h6 {
            margin-bottom: 0.5rem;
            font-size: 0.85rem;
        }

        /* Page header */
        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 2rem;
        }
    </style>
@endpush

@push('scripts')
    <script>
        let deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
        let userIdToDelete = null;

        // Delete button click handler
        document.querySelector('.delete-user-btn')?.addEventListener('click', function() {
            userIdToDelete = this.getAttribute('data-user-id');
            const userName = this.getAttribute('data-user-name');
            
            document.getElementById('deleteUserName').textContent = userName;
            deleteModal.show();
        });

        // Confirm delete
       document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
            if (userIdToDelete) {
                const deleteForm = document.getElementById('deleteForm');
                // Construct the raw URL path directly
                deleteForm.action = `/sa-usermgmt/${userIdToDelete}`;
                deleteForm.submit();
            }
        });
    </script>
@endpush