@extends('layouts.main')

@section('title', 'Select Branch')

@section('content')
<!-- Add Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
    /* Premium Vuexy Enhanced Styles */
    .branch-card {
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        border: none;
        border-radius: 1rem;
        height: 100%;
        background: #fff;
        position: relative;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }
    
    .branch-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #7367f0, #9b6bff, #b883ff);
        transform: scaleX(0);
        transition: transform 0.4s ease;
        transform-origin: left;
    }
    
    .branch-card:hover::before {
        transform: scaleX(1);
    }
    
    .branch-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 35px -12px rgba(115, 103, 240, 0.25);
    }
    
    .branch-card.selected {
        border: 2px solid #7367f0;
        background: linear-gradient(135deg, #fff 0%, rgba(115, 103, 240, 0.02) 100%);
        box-shadow: 0 8px 25px rgba(115, 103, 240, 0.15);
    }
    
    .equity-badge {
        position: absolute;
        top: 20px;
        right: 20px;
        background: linear-gradient(135deg, #7367f0 0%, #9b6bff 100%);
        color: white;
        padding: 6px 14px;
        border-radius: 50px;
        font-size: 0.75rem;
        font-weight: 600;
        z-index: 1;
        box-shadow: 0 4px 12px rgba(115, 103, 240, 0.3);
        backdrop-filter: blur(10px);
        letter-spacing: 0.5px;
    }
    
    .superadmin-badge {
    background: linear-gradient(135deg, #ea5455 0%, #ff6b6b 100%) !important;
    color: white !important;
    padding: 4px 10px !important;
    border-radius: 50px !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    margin-left: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    box-shadow: 0 2px 6px rgba(234, 84, 85, 0.25) !important;
    letter-spacing: 0.3px !important;
    vertical-align: middle !important;
    border: none !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.superadmin-badge i {
    color: white !important;
    font-size: 0.6rem !important;
}
    
    .branch-icon-wrapper {
        position: relative;
        width: 100px;
        height: 100px;
        margin: 0 auto 1.5rem;
    }
    
    .branch-icon-bg {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(115, 103, 240, 0.1) 0%, rgba(115, 103, 240, 0.05) 100%);
        border-radius: 50%;
        transition: all 0.4s ease;
    }
    
    .branch-card:hover .branch-icon-bg {
        transform: scale(1.1);
        background: linear-gradient(135deg, #7367f0 0%, #9b6bff 100%);
    }
    
    .branch-icon {
        position: relative;
        width: 100px;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
        transition: all 0.4s ease;
    }
    
    .branch-icon i {
        font-size: 3rem;
        color: #7367f0;
        transition: all 0.4s ease;
    }
    
    .branch-card:hover .branch-icon i {
        color: white;
        transform: scale(1.1);
    }
    
    .branch-name {
        font-size: 1.35rem;
        font-weight: 700;
        color: #5e5873;
        margin-bottom: 0.25rem;
        transition: color 0.3s ease;
    }
    
    .branch-card:hover .branch-name {
        color: #7367f0;
    }
    
    .branch-code {
        font-size: 0.8rem;
        color: #6c757d;
        display: inline-block;
        padding: 4px 12px;
        background: #f8f7fa;
        border-radius: 50px;
    }
    
    .branch-info-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 0;
        border-bottom: 1px solid #ebe9f1;
        transition: all 0.3s ease;
    }
    
    .branch-info-item:hover {
        transform: translateX(5px);
    }
    
    .branch-info-item:last-child {
        border-bottom: none;
    }
    
    .branch-info-label {
        color: #6c757d;
        font-size: 0.85rem;
        font-weight: 500;
    }
    
    .branch-info-label i {
        width: 20px;
        margin-right: 8px;
        color: #7367f0;
    }
    
    .branch-info-value {
        font-weight: 600;
        color: #5e5873;
        font-size: 0.9rem;
    }
    
    .stats-card {
        background: linear-gradient(135deg, #fff 0%, #f8f7fa 100%);
        border: none;
        border-radius: 1rem;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }
    
    .stats-card::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #7367f0, #9b6bff);
        transform: scaleX(0);
        transition: transform 0.4s ease;
    }
    
    .stats-card:hover::after {
        transform: scaleX(1);
    }
    
    .stats-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 25px -8px rgba(115, 103, 240, 0.2);
    }
    
    .stats-icon {
        width: 65px;
        height: 65px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        border-radius: 1rem;
        transition: all 0.3s ease;
    }
    
    .stats-card:hover .stats-icon {
        transform: scale(1.05);
    }
    
    .btn-view {
        background: linear-gradient(135deg, #fff 0%, #f8f7fa 100%);
        border: 2px solid #7367f0;
        color: #7367f0;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 0.75rem;
        padding: 0.6rem 1.8rem;
        font-weight: 600;
        position: relative;
        overflow: hidden;
    }
    
    .btn-view::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(115, 103, 240, 0.1);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }
    
    .btn-view:hover::before {
        width: 300px;
        height: 300px;
    }
    
    .btn-view:hover {
        background: #7367f0;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(115, 103, 240, 0.3);
    }
    
    .btn-view:active {
        transform: translateY(0);
    }
    
    .page-header {
        margin-bottom: 2.5rem;
        position: relative;
    }
    
    .page-header::after {
        content: '';
        position: absolute;
        bottom: -15px;
        left: 0;
        width: 60px;
        height: 4px;
        background: linear-gradient(90deg, #7367f0, #9b6bff);
        border-radius: 2px;
    }
    
    .page-title {
        font-size: 2rem;
        font-weight: 700;
        background: linear-gradient(135deg, #5e5873 0%, #7367f0 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 0.75rem;
    }
    
    .page-subtitle {
        color: #6c757d;
        font-size: 0.95rem;
    }
    
    .badge-status {
        padding: 5px 12px;
        border-radius: 50px;
        font-size: 0.7rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }
    
    .badge-status-active {
        background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
        color: #2e7d32;
    }
    
    .badge-status-inactive {
        background: linear-gradient(135deg, #ffe5e5 0%, #ffcdd2 100%);
        color: #c62828;
    }
    
    .badge-status-pending {
        background: linear-gradient(135deg, #fff0e0 0%, #ffe0b2 100%);
        color: #ef6c00;
    }
    
    @keyframes pulse {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.5;
        }
    }
    
    .loading-spinner {
        animation: pulse 1s ease-in-out infinite;
    }
    
    /* Responsive adjustments */
    @media (max-width: 768px) {
        .branch-icon-wrapper {
            width: 80px;
            height: 80px;
        }
        .branch-icon {
            width: 80px;
            height: 80px;
        }
        .branch-icon i {
            font-size: 2.5rem;
        }
        .page-title {
            font-size: 1.5rem;
        }
    }
</style>

<div class="row g-6">
    <!-- Page Header with Animation -->
    <div class="col-12">
        <div class="page-header">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
                <div>
                    <h1 class="page-title">
                        <i class="fas fa-store-alt me-3" style="background: linear-gradient(135deg, #7367f0, #9b6bff); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"></i>
                        Select Your Branch
                        <!-- @if(Auth::user()->hasRole('superadmin'))
                            <span class="superadmin-badge">
                                <i class="fas fa-crown me-1"></i> Super Admin Access
                            </span>
                        @endif -->
                    </h1>
                    <p class="page-subtitle">
                        @if(Auth::user()->hasRole('superadmin'))
                            <i class="fas fa-globe-asia me-2 text-primary"></i> You have full access to all {{ $branches->count() }} branches
                        @else
                            <i class="fas fa-building me-2 text-primary"></i> You have access to {{ $branches->count() }} branch(es)
                        @endif
                    </p>
                </div>
                <div class="d-flex gap-2">
                    <div class="avatar-group">
                        <div class="avatar avatar-sm bg-primary-transparent">
                            <i class="fas fa-chart-line text-primary"></i>
                        </div>
                        <div class="avatar avatar-sm bg-success-transparent">
                            <i class="fas fa-users text-success"></i>
                        </div>
                        <div class="avatar avatar-sm bg-info-transparent">
                            <i class="fas fa-chart-pie text-info"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Branch Selection Grid with Enhanced Cards -->
    @foreach($branches as $branch)
    <div class="col-xl-4 col-md-6 mb-4">
        <div class="branch-card card" onclick="selectBranch({{ $branch->id }})">
            <div class="card-body position-relative p-4">
                @if(isset($branch->equity_percentage) && $branch->equity_percentage)
                <span class="equity-badge">
                    <i class="fas fa-chart-line me-1"></i> {{ $branch->equity_percentage }}% Equity
                </span>
                @endif
                
                <div class="branch-icon-wrapper">
                    <div class="branch-icon-bg"></div>
                    <div class="branch-icon">
                        <i class="fas fa-store-alt"></i>
                    </div>
                </div>
                
                <div class="text-center mb-4">
                    <h3 class="branch-name">{{ $branch->branch_name }}</h3>
                    <span class="branch-code">
                        <i class="fas fa-code-branch me-1"></i> {{ $branch->branch_code }}
                    </span>
                </div>
                
                <div class="branch-info">
                    <div class="branch-info-item">
                        <span class="branch-info-label">
                            <i class="fas fa-map-marker-alt"></i> Location
                        </span>
                        <span class="branch-info-value">{{ $branch->city ?? 'N/A' }}, {{ $branch->state ?? '' }}</span>
                    </div>
                    <div class="branch-info-item">
                        <span class="branch-info-label">
                            <i class="fas fa-phone-alt"></i> Contact
                        </span>
                        <span class="branch-info-value">{{ $branch->contact_number ?? 'N/A' }}</span>
                    </div>
                    <div class="branch-info-item">
                        <span class="branch-info-label">
                            <i class="fas fa-calendar-alt"></i> Established
                        </span>
                        <span class="branch-info-value">{{ $branch->opening_date ? \Carbon\Carbon::parse($branch->opening_date)->format('d M Y') : 'N/A' }}</span>
                    </div>
                    <div class="branch-info-item">
                        <span class="branch-info-label">
                            <i class="fas fa-chart-line"></i> Performance
                        </span>
                        <span class="branch-info-value">
                            <span class="badge-status {{ $branch->status == 'active' ? 'badge-status-active' : ($branch->status == 'inactive' ? 'badge-status-inactive' : 'badge-status-pending') }}">
                                <i class="fas fa-{{ $branch->status == 'active' ? 'check-circle' : ($branch->status == 'inactive' ? 'times-circle' : 'clock') }} me-1"></i>
                                {{ ucfirst($branch->status) }}
                            </span>
                        </span>
                    </div>
                </div>
                
                <div class="mt-4 text-center">
                    <button class="btn btn-view" onclick="event.stopPropagation(); goToDashboard({{ $branch->id }})">
                        <i class="fas fa-chart-line me-2"></i> View Dashboard
                        <i class="fas fa-arrow-right ms-2"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    @endforeach
    
    <!-- Enhanced Stats Section for Superadmin -->
    @if(Auth::user()->hasRole('superadmin'))
    <div class="col-12 mt-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-transparent border-0 pt-4">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <h5 class="mb-1">
                            <i class="fas fa-chart-pie me-2 text-primary"></i>
                            Global Branch Analytics
                        </h5>
                        <p class="card-subtitle text-muted">Comprehensive overview of all branches</p>
                    </div>
                    <!-- <div class="dropdown">
                        <button class="btn btn-text-secondary rounded-pill border-0" type="button" data-bs-toggle="dropdown">
                            <i class="fas fa-ellipsis-v"></i>
                        </button>
                        <div class="dropdown-menu dropdown-menu-end">
                            <a class="dropdown-item" href="#"><i class="fas fa-download me-2"></i> Export Report</a>
                            <a class="dropdown-item" href="#"><i class="fas fa-chart-line me-2"></i> View Analytics</a>
                        </div>
                    </div> -->
                </div>
            </div>
            <div class="card-body">
                <div class="row g-4">
                    <div class="col-md-3 col-6">
                        <div class="stats-card p-4 text-center">
                            <div class="stats-icon bg-primary-transparent mx-auto">
                                <i class="fas fa-store-alt fa-2x text-primary"></i>
                            </div>
                            <h6 class="text-muted mb-2">Total Branches</h6>
                            <h3 class="mb-0 text-primary">{{ $branches->count() }}</h3>
                            <small class="text-muted mt-2 d-block">Across {{ $branches->pluck('city')->unique()->count() }} cities</small>
                        </div>
                    </div>
                    <div class="col-md-3 col-6">
                        <div class="stats-card p-4 text-center">
                            <div class="stats-icon bg-success-transparent mx-auto">
                                <i class="fas fa-check-circle fa-2x text-success"></i>
                            </div>
                            <h6 class="text-muted mb-2">Active Branches</h6>
                            <h3 class="mb-0 text-success">{{ $branches->where('status', 'active')->count() }}</h3>
                            <small class="text-muted mt-2 d-block">{{ round(($branches->where('status', 'active')->count() / max($branches->count(), 1)) * 100) }}% of total</small>
                        </div>
                    </div>
                    <div class="col-md-3 col-6">
                        <div class="stats-card p-4 text-center">
                            <div class="stats-icon bg-warning-transparent mx-auto">
                                <i class="fas fa-chart-line fa-2x text-warning"></i>
                            </div>
                            <h6 class="text-muted mb-2">Avg. Performance</h6>
                            <h3 class="mb-0 text-warning">84<span style="font-size: 1.5rem;">%</span></h3>
                            <small class="text-muted mt-2 d-block"><i class="fas fa-arrow-up text-success"></i> +12% from last month</small>
                        </div>
                    </div>
                    <div class="col-md-3 col-6">
                        <div class="stats-card p-4 text-center">
                            <div class="stats-icon bg-info-transparent mx-auto">
                                <i class="fas fa-users fa-2x text-info"></i>
                            </div>
                            <h6 class="text-muted mb-2">Total Staff</h6>
                            <h3 class="mb-0 text-info">{{ $branches->sum(function($b) { return $b->total_staff ?? 0; }) }}</h3>
                            <small class="text-muted mt-2 d-block">Across all branches</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>

<script>
    function selectBranch(id) {
        // Remove selected class from all cards
        document.querySelectorAll('.branch-card').forEach(card => {
            card.classList.remove('selected');
        });
        
        // Add selected class to clicked card with animation
        const selectedCard = event.currentTarget;
        selectedCard.classList.add('selected');
        
        // Add ripple effect
        const ripple = document.createElement('div');
        ripple.style.position = 'absolute';
        ripple.style.top = '50%';
        ripple.style.left = '50%';
        ripple.style.transform = 'translate(-50%, -50%)';
        ripple.style.width = '0';
        ripple.style.height = '0';
        ripple.style.borderRadius = '50%';
        ripple.style.backgroundColor = 'rgba(115, 103, 240, 0.2)';
        ripple.style.transition = 'all 0.6s ease';
        ripple.style.pointerEvents = 'none';
        selectedCard.style.position = 'relative';
        selectedCard.style.overflow = 'hidden';
        selectedCard.appendChild(ripple);
        
        setTimeout(() => {
            ripple.style.width = '500px';
            ripple.style.height = '500px';
        }, 10);
        
        setTimeout(() => {
            ripple.remove();
        }, 600);
        
        // Visual feedback on button
        const btn = selectedCard.querySelector('.btn-view');
        if (btn) {
            btn.style.transform = 'scale(0.95)';
            setTimeout(() => {
                btn.style.transform = '';
            }, 200);
        }
    }
    
    function goToDashboard(id) {
        // Add loading effect
        const btn = event.currentTarget;
        const originalHtml = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i> Loading Dashboard...';
        btn.disabled = true;
        btn.style.opacity = '0.7';
        
        // Navigate to dashboard after short delay for better UX
        setTimeout(() => {
            window.location.href = '{{ url("branch-dashboard") }}/' + id;
        }, 300);
    }
    
    // Double click to go to dashboard with animation
    document.querySelectorAll('.branch-card').forEach(card => {
        card.addEventListener('dblclick', function() {
            const btn = this.querySelector('.btn-view');
            if (btn && !btn.disabled) {
                const onclickAttr = btn.getAttribute('onclick');
                if (onclickAttr) {
                    const id = onclickAttr.match(/\d+/)[0];
                    // Add double-click animation
                    this.style.transform = 'scale(0.98)';
                    setTimeout(() => {
                        this.style.transform = '';
                    }, 150);
                    goToDashboard(id);
                }
            }
        });
    });
    
    // Add keyboard navigation (Enter key)
    document.querySelectorAll('.branch-card').forEach(card => {
        card.setAttribute('tabindex', '0');
        card.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                this.click();
            }
        });
    });
    
    // Hover sound effect (optional - remove if not needed)
    document.querySelectorAll('.branch-card').forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
        });
    });
</script>

<style>
    .bg-primary-transparent {
        background: linear-gradient(135deg, rgba(115, 103, 240, 0.1) 0%, rgba(115, 103, 240, 0.05) 100%);
    }
    .bg-success-transparent {
        background: linear-gradient(135deg, rgba(40, 199, 111, 0.1) 0%, rgba(40, 199, 111, 0.05) 100%);
    }
    .bg-warning-transparent {
        background: linear-gradient(135deg, rgba(255, 159, 67, 0.1) 0%, rgba(255, 159, 67, 0.05) 100%);
    }
    .bg-info-transparent {
        background: linear-gradient(135deg, rgba(0, 207, 232, 0.1) 0%, rgba(0, 207, 232, 0.05) 100%);
    }
    .avatar-group {
        display: flex;
        gap: 0.5rem;
    }
    .avatar-sm {
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.75rem;
        background: #f8f7fa;
        transition: all 0.3s ease;
    }
    .avatar-sm:hover {
        transform: translateY(-2px);
    }
</style>
@endsection