@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">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<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;
    }
    .progress-target {
        height: 8px;
        border-radius: 4px;
    }
    .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;
    }
</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-md-8">
                    <h2 class="mb-2" style="color: #fff;">{{ $branch->branch_name }}</h2>
                    <p class="mb-3 opacity-75">
                        <i class="fas fa-map-marker-alt me-1"></i> {{ $branch->address_line_1 }}, {{ $branch->city }} - {{ $branch->postal_code }}
                    </p>
                    <div class="d-flex gap-3 flex-wrap">
                        <span><i class="fas fa-phone me-1"></i> {{ $branch->contact_number }}</span>
                        <span><i class="fas fa-envelope me-1"></i> {{ $branch->email }}</span>
                        <span><i class="fas fa-calendar me-1"></i> Opened: {{ \Carbon\Carbon::parse($branch->opening_date)->format('d M Y') }}</span>
                    </div>
                </div>
                <div class="col-md-4 text-md-end">
                    <div class="bg-white text-dark p-3 rounded d-inline-block">
                        <div class="small text-muted">Your Equity</div>
                        <div class="h3 mb-0 text-primary">{{ $equityPercentage ?? $branch->equity_percentage ?? 'N/A' }}%</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- KPI Cards Row -->
    <div class="col-xxl-3 col-md-3 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'], 2) }}</h4>
                    <small class="text-success">+{{ $metrics['total_transactions'] }} Transactions</small>
                </div>
                <div class="mt-2">
                    <span class="text-muted">Today: {{ number_format($metrics['today_sales'], 2) }}</span>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xxl-3 col-md-3 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'] }}</h4>
                </div>
                <div class="mt-2 d-flex justify-content-between">
                    <span><i class="fas fa-user-tie"></i> Managers: {{ $metrics['managers'] }}</span>
                    <span><i class="fas fa-utensils"></i> Kitchen: {{ $metrics['kitchen_staff'] }}</span>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xxl-3 col-md-3 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">Average %</p>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center gap-3">
                    <h4 class="mb-0">{{ $metrics['avg_food_cost'] }}%</h4>
                </div>
                <div class="progress progress-target mt-2">
                    @php
                        $foodCostColor = 'bg-success';
                        if ($metrics['avg_food_cost'] > 35) $foodCostColor = 'bg-danger';
                        elseif ($metrics['avg_food_cost'] > 28) $foodCostColor = 'bg-warning';
                    @endphp
                    <div class="progress-bar {{ $foodCostColor }}" style="width: {{ min($metrics['avg_food_cost'], 100) }}%"></div>
                </div>
                <div class="mt-2 d-flex justify-content-between small">
                    <span>Target: < 28%</span>
                    <span>Current: {{ $metrics['avg_food_cost'] }}%</span>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xxl-3 col-md-3 col-6">
        <div class="card h-100 kpi-card">
            <div class="card-header pb-3">
                <h5 class="card-title mb-1">Target Achievement</h5>
                <p class="card-subtitle">Monthly Goal</p>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center gap-3">
                    <h4 class="mb-0">{{ $metrics['target_achievement'] }}%</h4>
                </div>
                <div class="progress progress-target mt-2">
                    <div class="progress-bar bg-info" style="width: {{ min($metrics['target_achievement'], 100) }}%"></div>
                </div>
                <div class="mt-2 d-flex justify-content-between small">
                    <span>Achieved: {{ number_format($metrics['total_sales_month'], 2) }}</span>
                    <span>Target: {{ number_format($metrics['monthly_target'], 2) }}</span>
                </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-3 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-3 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-3 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>

    <!-- Sales Chart -->
    <div class="col-xl-8">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between">
                <div class="card-title m-0">
                    <h5 class="mb-1">Monthly Sales Trend</h5>
                    <p class="card-subtitle">Sales performance over the last 30 days</p>
                </div>
            </div>
            <div class="card-body">
                <canvas id="salesChart" style="height: 300px;"></canvas>
            </div>
        </div>
    </div>

    <!-- Recent Activities -->
    <div class="col-xl-4">
        <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 }}</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 }}</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($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">
            <div class="card-header d-flex justify-content-between">
                <div class="card-title m-0">
                    <h5 class="mb-1">Monthly Expenses</h5>
                    <p class="card-subtitle">{{ \Carbon\Carbon::parse($currentMonth)->format('F Y') }}</p>
                </div>
                <div class="dropdown">
                    <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" data-bs-toggle="dropdown">
                        <i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
                    </button>
                    <div class="dropdown-menu dropdown-menu-end">
                        <a class="dropdown-item" href="javascript:void(0);">Export Report</a>
                        <a class="dropdown-item" href="javascript:void(0);">View Details</a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    @forelse($monthlyExpenses['items'] as $expense)
                    <div class="col-md-6 mb-3">
                        <div class="border p-3 rounded">
                            <div class="d-flex align-items-center mb-2">
                                <span class="me-2">{!! $expense['icon'] !!}</span>
                                <h6 class="mb-0">{{ $expense['name'] }}</h6>
                            </div>
                            <h5 class="mb-0 text-primary">{{ number_format($expense['amount'], 2) }}</h5>
                        </div>
                    </div>
                    @empty
                    <div class="col-12">
                        <p class="text-muted text-center py-3">No expenses recorded for this month</p>
                    </div>
                    @endforelse
                    
                    @if(count($monthlyExpenses['items']) > 0)
                    <div class="col-12 mt-3">
                        <div class="bg-light p-3 rounded">
                            <div class="d-flex justify-content-between">
                                <strong>Total Expenses:</strong>
                                <strong class="text-danger">{{ number_format($monthlyExpenses['total'], 2) }}</strong>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Best Sale Day -->
    <div class="col-xl-6">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between">
                <div class="card-title m-0">
                    <h5 class="mb-1">Best Sale Day</h5>
                    <p class="card-subtitle">This Month's Top Performance</p>
                </div>
            </div>
            <div class="card-body text-center">
                @if($metrics['best_sale_day'])
                <div class="display-1 text-warning mb-3">
                    <i class="fas fa-crown"></i>
                </div>
                <h3>{{ \Carbon\Carbon::parse($metrics['best_sale_day']->sale_date)->format('d F Y') }}</h3>
                <h2 class="text-success mb-3">{{ number_format($metrics['best_sale_day']->sales_amount, 2) }}</h2>
                <p class="text-muted">
                    <i class="fas fa-calendar me-1"></i> 
                    {{ \Carbon\Carbon::parse($metrics['best_sale_day']->sale_date)->format('l') }}
                </p>
                @else
                <p class="text-muted text-center py-4">No sales recorded this month</p>
                @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

    // Sales Chart
    const ctx = document.getElementById('salesChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: {!! json_encode($salesChartData['labels']) !!},
            datasets: [{
                label: 'Monthly Sales',
                data: {!! json_encode($salesChartData['data']) !!},
                borderColor: '#7367f0',
                backgroundColor: 'rgba(115,103,240,0.1)',
                borderWidth: 2,
                tension: 0.4,
                fill: true,
                pointBackgroundColor: '#7367f0',
                pointBorderColor: '#fff',
                pointRadius: 4,
                pointHoverRadius: 6
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return ' ' + context.raw.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        borderDash: [5, 5],
                        color: '#ebe9f1'
                    },
                    ticks: {
                        callback: function(value) {
                            return ' ' + value.toLocaleString('en-IN');
                        }
                    }
                },
                x: {
                    grid: {
                        display: false
                    }
                }
            }
        }
    });
</script>
@endsection