@extends('layouts.main')

@section('title', 'Branch Dashboard - ' . $branch->branch_name)

@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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">

<style>
    /* Vuexy Card Styles */
    .kpi-card {
        transition: all 0.3s;
        border: none;
        border-radius: 0.75rem;
        box-shadow: 0 2px 6px rgba(0,0,0,0.04);
        height: 100%;
    }
    .kpi-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    }
    .kpi-icon {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
    }
    .kpi-value {
        font-size: 2rem;
        font-weight: 700;
        line-height: 1.2;
        color: #5e5873;
    }
    .kpi-label {
        color: #6c757d;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .trend-up { color: #28c76f; }
    .trend-down { color: #ea5455; }
    .quick-action-btn {
        padding: 15px;
        border-radius: 0.75rem;
        transition: all 0.3s;
        text-align: center;
        background: #fff;
        border: 1px solid #ebe9f1;
        color: #5e5873;
        text-decoration: none;
        display: block;
    }
    .quick-action-btn:hover {
        background: #7367f0;
        color: white;
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(115,103,240,0.3);
        border-color: #7367f0;
    }
    .quick-action-btn:hover i,
    .quick-action-btn:hover h6,
    .quick-action-btn:hover .mb-0,
    .quick-action-btn:hover * {
        color: white !important;
    }
    .branch-header {
        background: linear-gradient(135deg, #7367f0 0%, #9b6bff 100%);
        color: white;
        padding: 30px;
        border-radius: 0.75rem;
        margin-bottom: 30px;
    }
    .avatar {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .avatar-sm {
        width: 36px;
        height: 36px;
    }
    .bg-success-transparent { background-color: rgba(40, 199, 111, 0.1); }
    .bg-warning-transparent { background-color: rgba(255, 159, 67, 0.1); }
    .bg-info-transparent { background-color: rgba(0, 207, 232, 0.1); }
    .bg-primary-transparent { background-color: rgba(115, 103, 240, 0.1); }
    .bg-secondary-transparent { background-color: rgba(108, 117, 125, 0.1); }
    
    /* Vuexy Badge Styles */
    .badge.bg-label-success {
        background-color: #e8f5e9;
        color: #28c76f;
    }
    .badge.bg-label-danger {
        background-color: #ffe5e5;
        color: #ea5455;
    }
    .badge.bg-label-warning {
        background-color: #fff0e0;
        color: #ff9f43;
    }
    .badge.bg-label-primary {
        background-color: #e9ecef;
        color: #7367f0;
    }
    .badge.bg-label-secondary {
        background-color: #f2f2f2;
        color: #6c757d;
    }
    
    /* Vuexy Table Styles */
    .table-borderless > :not(caption) > * > * {
        border-bottom-width: 0;
    }
    .text-heading {
        color: #5e5873;
    }
    
    /* Activity Timeline */
    .timeline {
        list-style: none;
        padding: 0;
        position: relative;
    }
    .timeline:before {
        background-color: #ebe9f1;
        content: "";
        height: 100%;
        left: 1rem;
        position: absolute;
        top: 0;
        width: 1px;
    }
    .timeline-item {
        margin-bottom: 1.5rem;
        padding-left: 2.5rem;
        position: relative;
    }
    .timeline-point {
        background-color: #7367f0;
        border-radius: 50%;
        height: 0.75rem;
        left: 0.625rem;
        position: absolute;
        top: 0.25rem;
        width: 0.75rem;
        z-index: 1;
    }
    .timeline-point-primary { background-color: #7367f0; }
    .timeline-point-success { background-color: #28c76f; }
    .timeline-point-info { background-color: #00cfe8; }
    .timeline-event {
        background-color: #fff;
        border-radius: 0.5rem;
        padding: 0.75rem;
    }
    table.hk__table {
        border: 1px solid white;
        border-collapse: collapse;
    }
    
    table.hk__table tbody.hk__tbody tr:nth-of-type(odd)>* {
        background: transparent;
    }
    
    table.hk__table tbody.hk__tbody {}
    
    table.hk__table tbody.hk__tbody tr {}
    
    table.hk__table tbody.hk__tbody tr td {
        border: 1px solid white;
        min-width: 42px;
        padding: 2px 3px;
        font-size: 13px;
        font-weight: 100;
    }
</style>

<div class="row g-6">
    <!-- Branch Header - Full Width -->
    <div class="col-12">
    <div class="branch-header">
        <div class="row align-items-center">
            <div class="col-lg-8 col-md-7">
                <div class="d-flex align-items-center gap-3 mb-3">
                    <div class="branch-icon">
                        <i class="fas fa-store"></i>
                    </div>
                    <div>
                        <h2 class="mb-1 text-white fw-bold">{{ $branch->branch_name }}</h2>
                        <div class="d-flex gap-2 flex-wrap">
                            @if($branch->branch_code)
                            <span class="branch-badge">
                                <i class="fas fa-code-branch me-1"></i> {{ $branch->branch_code }}
                            </span>
                            @endif
                        </div>
                    </div>
                </div>
                
                <div class="branch-info">
                    <p class="mb-2">
                        <i class="fas fa-map-marker-alt me-2"></i> 
                        {{ $branch->address_line_1 ?? '' }}, {{ $branch->city ?? '' }} - {{ $branch->postal_code ?? '' }}
                    </p>
                    <div class="d-flex gap-4 flex-wrap">
                        <span><i class="fas fa-phone me-2"></i> {{ $branch->contact_number ?? 'N/A' }}</span>
                        <span><i class="fas fa-envelope me-2"></i> {{ $branch->email ?? 'N/A' }}</span>
                        <span><i class="fas fa-calendar me-2"></i> Opened: {{ $branch->opening_date ? \Carbon\Carbon::parse($branch->opening_date)->format('d M Y') : 'N/A' }}</span>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-5 mt-md-0 mt-4">
                <div class="partner-card">
                    <div class="partner-header">
                        <i class="fas fa-users me-2"></i>
                        <span>Partners & Equity</span>
                    </div>
                    
                    <div class="partner-body">
                        @forelse($branch->branch_partner as $partner)
                        <div class="partner-item {{ !$loop->last ? 'mb-3' : '' }}">
                            <div class="d-flex justify-content-between align-items-start">
                                <div class="flex-grow-1">
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="partner-avatar">
                                            <i class="fas fa-user-circle"></i>
                                        </div>
                                        <div>
                                            <div class="partner-name">{{ $partner->partner->full_name ?? 'N/A' }}</div>
                                            <div class="partner-code">{{ $partner->partner->partner_code ?? '' }}</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="text-end">
                                    <div class="equity-percentage">{{ number_format($partner->equity_percentage, 2) }}%</div>
                                    <div class="effective-date">{{ \Carbon\Carbon::parse($partner->effective_date)->format('d M Y') }}</div>
                                </div>
                            </div>
                        </div>
                        @if(!$loop->last)
                        <div class="partner-divider"></div>
                        @endif
                        @empty
                        <div class="text-center py-4">
                            <i class="fas fa-user-friends fa-2x text-muted mb-2"></i>
                            <p class="text-muted mb-0">No partners assigned</p>
                        </div>
                        @endforelse
                        
                        @if($branch->branch_partner->count() > 0)
                        <div class="partner-footer">
                            <div class="d-flex justify-content-between align-items-center">
                                <span>Total Equity</span>
                                <strong>{{ number_format($branch->branch_partner->sum('equity_percentage'), 2) }}%</strong>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.branch-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 2rem;
    border-radius: 1rem;
    margin-bottom: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.branch-icon {
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.2);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    backdrop-filter: blur(10px);
}

.branch-badge {
    background: rgba(255,255,255,0.2);
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 12px;
    color: white;
    display: inline-block;
}

.branch-info p {
    color: rgba(255,255,255,0.9);
    font-size: 14px;
}

.branch-info span {
    color: rgba(255,255,255,0.8);
    font-size: 13px;
}

.branch-info i {
    width: 20px;
}

/* Partner Card */
.partner-card {
    background: white;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.partner-card:hover {
    transform: translateY(-3px);
}

.partner-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 12px 20px;
    color: white;
    font-weight: 600;
    font-size: 14px;
}

.partner-body {
    padding: 20px;
}

.partner-item {
    padding: 8px 0;
}

.partner-avatar {
    width: 35px;
    height: 35px;
    background: #f0f0f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #667eea;
    font-size: 20px;
}

.partner-name {
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

.partner-code {
    font-size: 11px;
    color: #999;
}

.equity-percentage {
    font-weight: 700;
    font-size: 16px;
    color: #667eea;
}

.effective-date {
    font-size: 10px;
    color: #999;
}

.partner-divider {
    height: 1px;
    background: #f0f0f0;
    margin: 12px 0;
}

.partner-footer {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 2px solid #f0f0f0;
    font-size: 13px;
}

.partner-footer strong {
    color: #28c76f;
    font-size: 16px;
}

@media (max-width: 768px) {
    .branch-header {
        padding: 1.5rem;
    }
    
    .branch-icon {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
    
    .branch-header h2 {
        font-size: 1.5rem;
    }
    
    .d-flex.gap-4 {
        gap: 1rem !important;
        flex-direction: column;
    }
}
</style>

    <!-- KPI Cards Row - Only Total Sales and Total Staff -->
    <div class="col-xxl-4 col-md-4 col-6">
        <div class="card h-100 kpi-card">
            <div class="card-header pb-3">
                <h5 class="card-title mb-1">Total Sales</h5>
                <p class="card-subtitle">This Month</p>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center gap-3">
                    <h4 class="mb-0">{{ number_format($metrics['total_sales_month'] ?? 0, 2) }}</h4>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xxl-4 col-md-4 col-6">
        <div class="card h-100 kpi-card">
            <div class="card-header pb-3">
                <h5 class="card-title mb-1">Total Staff</h5>
                <p class="card-subtitle">Current Employees</p>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center gap-3">
                    <h4 class="mb-0">{{ $metrics['total_staff']->first()->total_staff_count ?? 0 }}</h4>
                </div>
                <div class="mt-2 d-flex justify-content-between">
                    <span><i class="fas fa-user-tie"></i> Managers: {{ $metrics['total_staff']->first()->managers_count ?? 0 }}</span>
                    <span><i class="fas fa-utensils"></i> Kitchen: {{ $metrics['total_staff']->first()->kitchen_staff_count ?? 0 }}</span>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xxl-4 col-md-4 col-6">
        <div class="card h-100 kpi-card">
            <div class="card-header pb-3">
                <h5 class="card-title mb-1">Food Cost</h5>
                <p class="card-subtitle">This Month</p>
                <!-- <p class="card-subtitle">Average %</p> -->
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center gap-3">
                    <h4 class="mb-0">{{ number_format($metrics['avg_food_cost'] ?? 0, 2) }}</h4>
                </div>
                
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Quick Actions</h5>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-4 col-6">
                        <a href="{{ route('dailysales.index') }}?branch_id={{ $branch->id }}" class="quick-action-btn">
                            <i class="fas fa-plus-circle fa-2x mb-2"></i>
                            <h6 class="mb-0">Add Daily Sale</h6>
                        </a>
                    </div>
                    <div class="col-md-4 col-6">
                        <a href="{{ route('staffcounts.index') }}?branch_id={{ $branch->id }}" class="quick-action-btn">
                            <i class="fas fa-user-plus fa-2x mb-2"></i>
                            <h6 class="mb-0">Update Staff Count</h6>
                        </a>
                    </div>
                    <div class="col-md-4 col-6">
                        <a href="{{ route('food-costs.index') }}?branch_id={{ $branch->id }}" class="quick-action-btn">
                            <i class="fas fa-percentage fa-2x mb-2"></i>
                            <h6 class="mb-0">Add Food Cost</h6>
                        </a>
                    </div>
                    <!--<div class="col-md-3 col-6">-->
                    <!--    <a href="{{ route('dailysales.index') }}" class="quick-action-btn">-->
                    <!--        <i class="fas fa-eye fa-2x mb-2"></i>-->
                    <!--        <h6 class="mb-0">View All Records</h6>-->
                    <!--    </a>-->
                    <!--</div>-->
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Activities -->
    <div class="col-xl-6">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <div class="card-title m-0">
                    <h5 class="mb-1" style="font-size: 1rem;">
                        <i class="fas fa-history me-2 text-primary" style="font-size: 0.9rem;"></i>
                        Recent Activities
                    </h5>
                    <p class="card-subtitle" style="font-size: 0.7rem;">Latest updates from your branch</p>
                </div>
                <span style="background: rgba(115, 103, 240, 0.1); color: #7367f0; padding: 2px 8px; border-radius: 50px; font-size: 0.6rem; font-weight: 500;">
                    {{ $recentActivities->count() ?? 0 }} Activities
                </span>
            </div>
            <div class="card-body p-0">
                <div class="list-group list-group-flush">
                    @forelse($recentActivities ?? [] as $activity)
                    <div class="list-group-item border-0 py-3 px-4">
                        <div class="d-flex align-items-start">
                            <div class="me-3">
                                @if($activity->type == 'sale')
                                    <div class="avatar avatar-sm bg-success-transparent rounded-circle p-2">
                                        <i class="fas fa-money-bill-wave text-success"></i>
                                    </div>
                                @elseif($activity->type == 'staff')
                                    <div class="avatar avatar-sm bg-warning-transparent rounded-circle p-2">
                                        <i class="fas fa-users text-warning"></i>
                                    </div>
                                @elseif($activity->type == 'food_cost')
                                    <div class="avatar avatar-sm bg-info-transparent rounded-circle p-2">
                                        <i class="fas fa-utensils text-info"></i>
                                    </div>
                                @else
                                    <div class="avatar avatar-sm bg-secondary-transparent rounded-circle p-2">
                                        <i class="fas fa-clock text-secondary"></i>
                                    </div>
                                @endif
                            </div>
                            <div class="flex-grow-1">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <h6 class="mb-0 fw-semibold">{{ $activity->title ?? 'Activity' }}</h6>
                                    <small class="text-muted">
                                        <i class="far fa-clock me-1"></i>{{ $activity->time ?? '' }}
                                    </small>
                                </div>
                                <p class="mb-1 text-muted small">{{ $activity->description ?? '' }}</p>
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-user-circle text-muted me-1 small"></i>
                                    <small class="text-muted">{{ $activity->user ?? 'System' }}</small>
                                    <small class="text-muted ms-2">
                                        <i class="far fa-calendar-alt me-1"></i>{{ $activity->date ?? '' }}
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                    @if(!$loop->last)
                    <hr class="my-0 mx-4">
                    @endif
                    @empty
                    <div class="text-center py-5">
                        <div class="avatar avatar-xl bg-light rounded-circle mb-3 mx-auto">
                            <i class="fas fa-history fa-3x text-muted"></i>
                        </div>
                        <h6 class="text-muted mb-2">No Recent Activities</h6>
                        <p class="text-muted small mb-0">Activities will appear here when you add records</p>
                    </div>
                    @endforelse
                </div>
            </div>
            @if(isset($recentActivities) && $recentActivities->count() > 0)
            <div class="card-footer bg-transparent text-center py-2">
                <a href="{{ route('dailysales.index') }}" class="text-primary text-decoration-none small">
                    View All Activities <i class="fas fa-arrow-right ms-1"></i>
                </a>
            </div>
            @endif
        </div>
    </div>

    <!-- Monthly Expenses -->
    <div class="col-xl-6">
        <div class="card h-100 shadow-sm">
            <div class="card-header bg-transparent d-flex justify-content-between align-items-center">
                <div>
                    <h5 class="mb-1">
                        <i class="fas fa-wallet text-primary me-2"></i>Monthly Expenses
                    </h5>
                    <small class="text-muted">
                        <i class="far fa-calendar-alt me-1"></i>{{ isset($currentMonthYear) ? \Carbon\Carbon::parse($currentMonthYear)->format('F Y') : date('F Y') }}
                    </small>
                </div>
                <button class="btn btn-sm btn-outline-secondary rounded-circle" type="button" data-bs-toggle="dropdown">
                    <i class="fas fa-ellipsis-v"></i>
                </button>
            </div>
            
            <div class="card-body">
                @if(!empty($monthlyExpenses['items']))
                <div class="mb-4">
                    @foreach($monthlyExpenses['items'] as $expense)
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div class="d-flex align-items-center gap-3">
                            <div class="avatar-sm rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; background: #f8f9fa;">
                                {!! $expense['icon'] ?? '<i class="fas fa-receipt text-primary"></i>' !!}
                            </div>
                            <div>
                                <div class="fw-semibold">{{ $expense['name'] ?? 'Expense' }}</div>
                                <small class="text-muted">Monthly</small>
                            </div>
                        </div>
                        <div class="fw-bold fs-5">{{ number_format($expense['amount'] ?? 0, 2) }}</div>
                    </div>
                    @endforeach
                </div>
                
                <hr class="my-3">
                
                <div class="bg-gradient-primary rounded-3 p-3" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <div class="d-flex justify-content-between align-items-center pt-2">
                        <div>
                            <span class="text-muted small text-white">Total Expenses</span>
                            <div class="fw-bold fs-4 text-white">{{ number_format($monthlyExpenses['total'] ?? 0, 2) }}</div>
                        </div>
                        @if(isset($monthlyExpenses['food_cost_percentage']))
                        <div class="text-end">
                            <span class="text-muted small text-white">Food Cost</span>
                            <div class="fw-bold text-warning fs-5 text-white">{{ $monthlyExpenses['food_cost_percentage'] }}</div>
                        </div>
                        @endif
                    </div>
                </div>
                @else
                <div class="text-center py-4">
                    <i class="fas fa-chart-line fa-3x text-muted mb-3"></i>
                    <p class="text-muted mb-0">No expenses recorded</p>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

<script>
    toastr.options = {
        closeButton: true,
        progressBar: true,
        positionClass: "toast-top-right",
        timeOut: "4000"
    }

    @if(session('success'))
        toastr.success("{{ session('success') }}");
    @endif

    @if(session('error'))
        toastr.error("{{ session('error') }}");
    @endif
</script>
@endsection