@extends('layouts.owner-dashboard')

@section('section-main')
    <div class="row no-gutters">
        <!-- Boletas Creadas -->
        <div class="col-md-3 px-1">
            <div class="card metric-card bg-gradient-blue">
                <div class="card-body">
                    <div class="metric-icon">
                        <i class="fa fa-ticket"></i>
                    </div>
                    <div class="metric-info">
                        <span class="metric-label text-uppercase text-white">Boletas Creadas</span>
                        <h2 class="metric-value text-white">{{ number_format($total_created) }}</h2>
                    </div>
                </div>
            </div>
        </div>

        <!-- Boletas Vendidas -->
        <div class="col-md-3 px-1">
            <div class="card metric-card bg-gradient-green">
                <div class="card-body">
                    <div class="metric-icon">
                        <i class="fa fa-shopping-cart"></i>
                    </div>
                    <div class="metric-info">
                        <span class="metric-label text-uppercase text-white">Boletas Vendidas</span>
                        <h2 class="metric-value text-white">{{ number_format($total_sold) }}</h2>
                    </div>
                </div>
            </div>
        </div>

        <!-- Boletas Restantes -->
        <div class="col-md-3 px-1">
            <div class="card metric-card bg-gradient-orange">
                <div class="card-body">
                    <div class="metric-icon">
                        <i class="fa fa-clock-o"></i>
                    </div>
                    <div class="metric-info">
                        <span class="metric-label text-uppercase text-white">Boletas Restantes</span>
                        <h2 class="metric-value text-white">{{ number_format($total_remaining) }}</h2>
                    </div>
                </div>
            </div>
        </div>

        <!-- Monto Recaudado -->
        <div class="col-md-3 px-1">
            <div class="card metric-card bg-gradient-purple">
                <div class="card-body">
                    <div class="metric-icon">
                        <i class="fa fa-usd"></i>
                    </div>
                    <div class="metric-info">
                        <span class="metric-label text-uppercase text-white">Monto Recaudado</span>
                        <h2 class="metric-value text-white">RD$ {{ number_format($total_revenue, 2) }}</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Grafico Boletas Creadas vs Vendidas -->
    <div class="row no-gutters mt-4">
        <div class="col-12 px-1">
            <div class="card chart-card">
                <div class="card-header bg-white">
                    <h5 class="card-title text-uppercase mb-0">Comparativa: Creadas vs Vendidas</h5>
                </div>
                <div class="card-body">
                    <div id="chart_created_vs_sold"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Graficos Segunda Fila -->
    <div class="row no-gutters mt-4">
        <!-- Grafico Distribución de Ingresos -->
        <div class="col-md-6 px-1">
            <div class="card chart-card">
                <div class="card-header bg-white">
                    <h5 class="card-title text-uppercase mb-0">Distribución de Ingresos</h5>
                </div>
                <div class="card-body">
                    <div id="chart_revenue_distribution"></div>
                </div>
            </div>
        </div>

        <!-- Grafico Recaudado por Tipo de Boleta -->
        <div class="col-md-6 px'1">
            <div class="card chart-card">
                <div class="card-header bg-white">
                    <h5 class="card-title text-uppercase mb-0">Recaudado por Tipo de Boleta</h5>
                </div>
                <div class="card-body">
                    <div id="chart_revenue_by_type"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Grafico Descuentos por Tipo de Boleta -->
    <div class="row no-gutters mt-4">
        <div class="col-12 px-1">
            <div class="card chart-card">
                <div class="card-header bg-white">
                    <h5 class="card-title text-uppercase mb-0">Descuentos Aplicados por Tipo de Boleta</h5>
                </div>
                <div class="card-body">
                    <div id="chart_discounts_by_type"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('styles')
    <link href="{{ asset('css/c3.min.css') }}" rel="stylesheet">
    <style>
        .chart-card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
            padding: 10px;
        }
        .chart-card .card-header {
            border-bottom: 1px solid #f0f0f0;
            padding: 15px 20px;
        }
        .chart-card .card-title {
            font-size: 0.9rem;
            font-weight: 700;
            color: #4b5563;
        }
        /* ... existing metric-card styles ... */
        .metric-card {
            border: none;
            border-radius: 15px;
            color: white;
            margin-bottom: 20px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }
        /* ... keeping other styles ... */
        .metric-card:hover {
            transform: translateY(-5px);
        }
        .metric-card .card-body {
            display: flex;
            align-items: center;
            padding: 25px;
        }
        .metric-icon {
            font-size: 2.5rem;
            margin-right: 20px;
            opacity: 0.8;
        }
        .metric-label {
            font-size: 0.8rem;
            font-weight: 600;
            display: block;
            margin-bottom: 5px;
            letter-spacing: 0.5px;
        }
        .metric-value {
            font-size: 1.8rem;
            font-weight: 700;
            margin: 0;
        }
        .bg-gradient-blue { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); }
        .bg-gradient-green { background: linear-gradient(135deg, #14532d 0%, #22c55e 100%); }
        .bg-gradient-orange { background: linear-gradient(135deg, #7c2d12 0%, #f97316 100%); }
        .bg-gradient-purple { background: linear-gradient(135deg, #581c87 0%, #a855f7 100%); }
    </style>
@endsection

@section('scripts')
    <script src="{{ asset('js/vendor/d3.v5.min.js') }}" charset="utf-8"></script>
    <script src="{{ asset('js/vendor/c3.min.js') }}"></script>
    <script>
        var created_vs_sold = @json($created_vs_sold);
        
        // Calcular alto dinámico basado en la cantidad de items
        var itemHeight = 45;
        var minHeight = 300;
        var calculatedHeight = Math.max(minHeight, (created_vs_sold.categories.length * itemHeight));

        var chart = c3.generate({
            bindto: '#chart_created_vs_sold',
            size: {
                height: calculatedHeight
            },
            data: {
                x: 'x',
                columns: [
                    ['x'].concat(created_vs_sold.categories),
                    created_vs_sold.created,
                    created_vs_sold.sold
                ],
                type: 'bar',
                labels: true,
                colors: {
                    'Creadas': '#3b82f6',
                    'Vendidas': '#22c55e'
                }
            },
            axis: {
                rotated: true,
                x: {
                    type: 'category'
                }
            },
            bar: {
                width: {
                    ratio: 0.5
                }
            },
            grid: {
                y: {
                    show: true
                }
            }
        });

        // Grafico de Distribucion de Ingresos
        var total_revenue = {{ $total_revenue }};
        var total_discounts = {{ $total_discounts }};
        
        var chart_revenue = c3.generate({
            bindto: '#chart_revenue_distribution',
            data: {
                columns: [
                    ['Monto Recaudado', total_revenue],
                    ['Cupones Aplicados', total_discounts]
                ],
                type : 'donut',
                colors: {
                    'Monto Recaudado': '#a855f7',
                    'Cupones Aplicados': '#6b7280'
                }
            },
            donut: {
                title: "RD$ " + ({{ $total_expected }}).toLocaleString(),
                label: {
                    format: function (value, ratio, id) {
                        return 'RD$ ' + (value).toLocaleString();
                    }
                }
            }
        });

        // Grafico Recaudado por Tipo de Boleta
        var revenue_by_type = @json($revenue_by_type);
        
        var chart_pie = c3.generate({
            bindto: '#chart_revenue_by_type',
            data: {
                columns: revenue_by_type,
                type : 'pie'
            },
            pie: {
                label: {
                    format: function (value, ratio, id) {
                        return 'RD$ ' + (value).toLocaleString();
                    }
                }
            }
        });

        // Grafico de Descuentos por Tipo de Boleta
        var discounts_by_type = @json($discounts_by_type);
        var calculatedHeightDiscounts = Math.max(minHeight, (discounts_by_type.categories.length * itemHeight));

        var chart_discounts = c3.generate({
            bindto: '#chart_discounts_by_type',
            size: {
                height: calculatedHeightDiscounts
            },
            data: {
                x: 'x',
                columns: [
                    ['x'].concat(discounts_by_type.categories),
                    discounts_by_type.data
                ],
                type: 'bar',
                labels: {
                    format: function (v, id, i, j) { return "RD$ " + v.toLocaleString(); }
                },
                colors: {
                    'Descuento': '#6b7280'
                }
            },
            axis: {
                rotated: true,
                x: {
                    type: 'category'
                }
            },
            bar: {
                width: { ratio: 0.5 }
            }
        });
    </script>
@endsection