@extends('layouts.app')
@section('title', 'Corporate Sales Dashboard')

@section('content')
    <style>
        /* Filter dropdown styling */
        .card-header .form-select {
            background-color: #ffffff;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 6px 12px;
            font-size: 14px;
            color: #495057;
            cursor: pointer;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            min-width: 120px;
            height: 34px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 8px center;
            background-size: 12px;
            padding-right: 32px;
        }

        /* .card-header .form-select:focus {
            border-color: #80bdff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

        .card-header .form-select:hover {
            border-color: #adb5bd;
        } */

        .card-header .btn-primary {
            padding: 6px 16px;
            font-size: 14px;
            font-weight: 500;
            border-radius: 4px;
            transition: all 0.2s ease;
            height: 34px;
            line-height: 1.5;
        }

        .card-header .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .card-header form {
            margin: 0;
        }

        .card-header .row.g-2 {
            margin: 0;
            align-items: center;
        }

        .card-header .col-auto {
            padding-left: 4px;
            padding-right: 4px;
            display: flex;
            align-items: center;
        }

        /* Ensure consistent alignment */
        .card-header .d-flex.align-items-center {
            height: 100%;
        }
    </style>
    <div class="fixed-action-bar">
        <div class="fw-semibold fixed-nav-title">Corporate Sales Dashboard</div>
        <div class="d-flex align-items-center gap-2">
            <button class="btn btn-primary btn-sm border-0 ml-2" onclick="refreshDashboard()">
                <i class="fas fa-sync-alt me-1"></i> Refresh
            </button>
        </div>
    </div>

    <!-- KPI Cards -->
    <div class="row mt-3 mb-4 g-3">
        <div class="col-md-3 col-sm-6">
            <div class="card text-center">
                <div class="card-body">
                    <div class="h6 text-muted">Total Active Customers</div>
                    <div class="h3 mb-0 theme-blue">{{ $widgets['total_active_customers'] }}</div>
                </div>
            </div>
        </div>

        <div class="col-md-3 col-sm-6">
            <div class="card text-center">
                <div class="card-body">
                    <div class="h6 text-muted">Total Events</div>
                    <div class="h3 mb-0" style="color: #17a2b8;">{{ $widgets['total_events'] }}</div>
                </div>
            </div>
        </div>

        <div class="col-md-3 col-sm-6">
            <div class="card text-center">
                <div class="card-body">
                    <div class="h6 text-muted">Total Active Events</div>
                    <div class="h3 mb-0 text-success">{{ $widgets['total_active_events'] }}</div>
                </div>
            </div>
        </div>

        <div class="col-md-3 col-sm-6">
            <div class="card text-center">
                <div class="card-body">
                    <div class="h6 text-muted">Upcoming Itinerary</div>
                    <div class="h3 mb-0 text-warning">{{ $widgets['upcoming_itinerary'] }}</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Full-width Brand Chart Row -->
    <div class="row mb-4 g-3">
        <div class="col-lg-12 d-flex">
            <div class="card flex-fill d-flex flex-column">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Sale by Brand SKU (per month)</h5>
                    <form method="GET" action="{{ route('csm.corporate-sales-dashboard.index') }}" class="d-flex align-items-center gap-2">
                        <div class="row g-2 align-items-center">
                            <div class="col-auto">
                                <select name="brand_month" class="form-select form-select-sm">
                                    @foreach ($months as $m)
                                        <option value="{{ $m['value'] }}" {{ $brandFilters['month'] == $m['value'] ? 'selected' : '' }}>
                                            {{ $m['label'] }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-auto">
                                <select name="brand_type" class="form-select form-select-sm">
                                    <option value="all" {{ $brandFilters['type'] === 'all' ? 'selected' : '' }}>All</option>
                                    <option value="beers" {{ $brandFilters['type'] === 'beers' ? 'selected' : '' }}>Beers</option>
                                    <option value="alcohol" {{ $brandFilters['type'] === 'alcohol' ? 'selected' : '' }}>Others</option>
                                </select>
                            </div>
                            <div class="col-auto">
                                <select name="brand_name" class="form-select form-select-sm">
                                    <option value="">All Brands</option>
                                    @foreach ($brandOptions as $brand)
                                        <option value="{{ $brand }}" {{ $brandFilters['brand_name'] === $brand ? 'selected' : '' }}>
                                            {{ $brand }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-auto">
                                <button type="submit" class="btn btn-primary btn-sm border-0">Apply</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="card-body d-flex flex-column" style="min-height: 300px;">
                    <div class="chart-container" style="position: relative; flex-grow: 1;">
                        <canvas id="saleByBrandChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

   <!-- Two half-width charts -->
<div class="row mb-4 g-3">

    <!-- Sale by Industry -->
    <div class="col-lg-6 d-flex">
        <div class="card flex-fill d-flex flex-column">

            <div class="card-header">
                <!-- Title Row -->
                <div class="row">
                    <div class="col">
                        <h5 class="mb-0 text-nowrap">Sale by Industry</h5>
                    </div>
                </div>

                <!-- Filter Row -->
                <div class="row g-2 mt-2">
                    <form method="GET" action="{{ route('csm.corporate-sales-dashboard.index') }}" class="d-flex flex-wrap flex-md-nowrap align-items-center gap-2">

                        <div class="col-auto">
                            <select name="industry_month" class="form-select form-select-sm">
                                @foreach ($months as $m)
                                    <option value="{{ $m['value'] }}" {{ $industryFilters['month'] == $m['value'] ? 'selected' : '' }}>
                                        {{ $m['label'] }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-auto">
                            <select name="industry_type" class="form-select form-select-sm">
                                <option value="all" {{ $industryFilters['type'] === 'all' ? 'selected' : '' }}>All</option>
                                <option value="beers" {{ $industryFilters['type'] === 'beers' ? 'selected' : '' }}>Beers</option>
                                <option value="alcohol" {{ $industryFilters['type'] === 'alcohol' ? 'selected' : '' }}>Others</option>
                            </select>
                        </div>

                        <div class="col-auto">
                            <select name="industry_name" class="form-select form-select-sm">
                                <option value="">All Industries</option>
                                @foreach ($industryOptions as $industry)
                                    <option value="{{ $industry }}" {{ $industryFilters['industry_name'] === $industry ? 'selected' : '' }}>
                                        {{ $industry }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-auto">
                            <button type="submit" class="btn btn-primary btn-sm border-0">Apply</button>
                        </div>

                    </form>
                </div>
            </div>

            <div class="card-body d-flex flex-column" style="min-height: 300px;">
                <div class="chart-container" style="position: relative; flex-grow: 1;">
                    <canvas id="saleByIndustryChart"></canvas>
                </div>
            </div>

        </div>
    </div>

    <!-- Sale by Event Type -->
    <div class="col-lg-6 d-flex">
        <div class="card flex-fill d-flex flex-column">

            <div class="card-header">
                <!-- Title Row -->
                <div class="row">
                    <div class="col">
                        <h5 class="mb-0 text-nowrap">Sale by Type of Event</h5>
                    </div>
                </div>

                <!-- Filter Row -->
                <div class="row g-2 mt-2">
                    <form method="GET" action="{{ route('csm.corporate-sales-dashboard.index') }}" class="d-flex flex-wrap flex-md-nowrap align-items-center gap-2">

                        <div class="col-auto">
                            <select name="event_month" class="form-select form-select-sm">
                                @foreach ($months as $m)
                                    <option value="{{ $m['value'] }}" {{ $eventTypeFilters['month'] == $m['value'] ? 'selected' : '' }}>
                                        {{ $m['label'] }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-auto">
                            <select name="event_sales_type" class="form-select form-select-sm">
                                <option value="all" {{ $eventTypeFilters['type'] === 'all' ? 'selected' : '' }}>All</option>
                                <option value="beers" {{ $eventTypeFilters['type'] === 'beers' ? 'selected' : '' }}>Beers</option>
                                <option value="alcohol" {{ $eventTypeFilters['type'] === 'alcohol' ? 'selected' : '' }}>Others</option>
                            </select>
                        </div>

                        <div class="col-auto" style="min-width: 140px;">
                            <select name="event_type" class="form-select form-select-sm" style="max-width: 140px;">
                                <option value="">All Event Types</option>
                                @foreach ($eventTypeOptions as $et)
                                    <option value="{{ $et }}" {{ $eventTypeFilters['event_type'] === $et ? 'selected' : '' }}>
                                        {{ $et }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-auto">
                            <button type="submit" class="btn btn-primary btn-sm border-0">Apply</button>
                        </div>

                    </form>
                </div>
            </div>

            <div class="card-body d-flex flex-column" style="min-height: 300px;">
                <div class="chart-container" style="position: relative; flex-grow: 1;">
                    <canvas id="saleByEventTypeChart"></canvas>
                </div>
            </div>

        </div>
    </div>

</div>
@endsection

@push('css')
<style>
    /* Simple card hover effect */
    .card {
        transition: box-shadow 0.3s ease;
    }

    .card:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    /* Static styles - no animations */
    .progress-bar {
        transition: none !important;
        animation: none !important;
    }

    /* Button loading state */
    .fa-sync-alt.loading {
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    /* Remove any other animations */
    * {
        animation-play-state: paused !important;
    }

    /* Allow only the loading spinner */
    .fa-sync-alt.loading {
        animation-play-state: running !important;
    }

    .chart-container {
        height: 100%;
    }

    /* Filter dropdown styling */
    .card-header .form-select {
        background-color: #ffffff;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 6px 32px 6px 12px;
        font-size: 14px;
        color: #495057;
        cursor: pointer;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        min-width: 140px;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 8px center;
        background-size: 12px;
    }

    /* .card-header .form-select:focus {
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    .card-header .form-select:hover {
        border-color: #adb5bd;
    } */

    .card-header .btn-primary {
        padding: 6px 16px;
        font-size: 14px;
        font-weight: 500;
        border-radius: 4px;
        transition: all 0.2s ease;
    }

    .card-header .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .card-header .row.g-2 {
        margin: 0;
    }

    .card-header .col-auto {
        padding-left: 4px;
        padding-right: 4px;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .card-header .form-select {
            min-width: 120px;
            font-size: 13px;
        }
    }
</style>
@endpush

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        let brandChart, industryChart, eventTypeChart;

        // Static chart configuration - no animations
        const chartOptions = {
            responsive: true,
            maintainAspectRatio: false,
            animation: false,
            interaction: {
                intersect: false
            },
            plugins: {
                legend: {
                    display: true,
                    position: 'bottom',
                    labels: { padding: 10, usePointStyle: true }
                },
                tooltip: {
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    cornerRadius: 4
                }
            }
        };

        function initCsmCharts() {
            const saleByBrandData = @json($saleByBrand);
            const saleByIndustryData = @json($saleByIndustry);
            const saleByEventTypeData = @json($saleByEventType);

            const brandCtx = document.getElementById('saleByBrandChart');
            if (brandCtx) {
                brandChart = new Chart(brandCtx, {
                    type: 'bar',
                    data: {
                        labels: saleByBrandData.map(item => item.brand),
                        datasets: [{
                            label: 'Total Sales',
                            data: saleByBrandData.map(item => item.total_sales),
                            backgroundColor: '#f1c40f',
                            borderColor: '#f1c40f',
                            borderWidth: 2
                        }]
                    },
                    options: {
                        ...chartOptions,
                        scales: {
                            y: {
                                beginAtZero: true,
                                grid: { color: '#f0f0f0' }
                            },
                            x: {
                                grid: { display: false }
                            }
                        }
                    }
                });
            }

            const industryCtx = document.getElementById('saleByIndustryChart');
            if (industryCtx) {
                industryChart = new Chart(industryCtx, {
                    type: 'pie',
                    data: {
                        labels: saleByIndustryData.map(item => item.industry),
                        datasets: [{
                            data: saleByIndustryData.map(item => item.total_sales),
                            backgroundColor: ['#f1c40f', '#D11A2A', '#28a745', '#17a2b8', '#6f42c1', '#fd7e14'],
                            borderWidth: 2,
                            borderColor: '#fff'
                        }]
                    },
                    options: chartOptions
                });
            }

            const eventTypeCtx = document.getElementById('saleByEventTypeChart');
            if (eventTypeCtx) {
                eventTypeChart = new Chart(eventTypeCtx, {
                    type: 'pie',
                    data: {
                        labels: saleByEventTypeData.map(item => item.event_type),
                        datasets: [{
                            data: saleByEventTypeData.map(item => item.total_sales),
                            backgroundColor: ['#f1c40f', '#D11A2A', '#28a745', '#17a2b8', '#6f42c1', '#fd7e14'],
                            borderWidth: 2,
                            borderColor: '#fff'
                        }]
                    },
                    options: chartOptions
                });
            }
        }

        function refreshDashboard() {
            const button = event.target.closest('button');
            const icon = button.querySelector('i');
            
            icon.classList.add('loading');
            button.disabled = true;
            
            setTimeout(() => {
                location.reload();
            }, 1000);
        }

        document.addEventListener('DOMContentLoaded', initCsmCharts);
    </script>
@endpush