@extends('layouts.app')
@section('title', __('dashboard.purchase_dashboard'))

@section('content')

@include('dashboard.partials.theme')

<div class="dava-dash-bg">
<div class="dava-dash-wrap">

    {{-- Header banner with filters --}}
    <div class="dava-welcome">
        <div class="dava-pill dava-pill-1"></div>
        <div class="dava-pill dava-pill-2"></div>
        <div class="dava-pill dava-pill-3"></div>

        <div class="tw-flex tw-flex-col md:tw-flex-row md:tw-items-center md:tw-justify-between tw-gap-4">
            <div style="position: relative; z-index: 2;">
                <h1>{{ __('dashboard.purchase_dashboard') }}</h1>
                <p class="dava-welcome-sub">{{ __('dashboard.purchase_overview_sub') }}</p>
                <div class="dava-welcome-meta" style="margin-top:10px;">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                        <line x1="16" y1="2" x2="16" y2="6"/>
                        <line x1="8" y1="2" x2="8" y2="6"/>
                        <line x1="3" y1="10" x2="21" y2="10"/>
                    </svg>
                    {{ \Carbon::now()->format('l, d M Y') }}
                </div>
            </div>

            <div class="dava-filter tw-flex tw-flex-col sm:tw-flex-row tw-gap-3 tw-w-full md:tw-w-auto">
                @if (count($all_locations) > 1)
                    {!! Form::select('dashboard_location', $all_locations, null, [
                        'class' => 'dava-select select2',
                        'placeholder' => __('lang_v1.select_location'),
                        'id' => 'dashboard_location',
                    ]) !!}
                @endif

                <button type="button" id="dashboard_date_filter">
                    <svg width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                        <line x1="16" y1="2" x2="16" y2="6"/>
                        <line x1="8" y1="2" x2="8" y2="6"/>
                        <line x1="3" y1="10" x2="21" y2="10"/>
                    </svg>
                    <span>{{ __('messages.filter_by_date') }}</span>
                    <svg width="14" height="14" viewBox="0 0 24 24" stroke-width="2.2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="6 9 12 15 18 9"/>
                    </svg>
                </button>
            </div>
        </div>
    </div>

    {{-- PURCHASE STAT CARDS --}}
    <div class="dava-section-title">
        <div class="bar"></div>
        <h2>{{ __('dashboard.purchase_overview') }}</h2>
        <span class="hint">{{ __('dashboard.purchase_overview_sub') }}</span>
    </div>

    <div class="dava-stat-grid cols-5">

        <div class="dava-stat-card solid compact sky">
            <div class="tw-flex tw-items-start tw-justify-between tw-gap-2">
                <div style="flex:1; min-width:0;">
                    <p class="dava-stat-label">{{ __('home.total_purchase') }}</p>
                    <p class="total_purchase dava-stat-value" style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;"></p>
                </div>
                <div class="dava-stat-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                </div>
            </div>
        </div>

        <div class="dava-stat-card solid compact amber">
            <div class="tw-flex tw-items-start tw-justify-between tw-gap-2">
                <div style="flex:1; min-width:0;">
                    <p class="dava-stat-label">{{ __('home.purchase_due') }}</p>
                    <p class="purchase_due dava-stat-value" style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;"></p>
                </div>
                <div class="dava-stat-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                </div>
            </div>
        </div>

        <div class="dava-stat-card solid compact red">
            <div class="tw-flex tw-items-start tw-justify-between tw-gap-2">
                <div style="flex:1; min-width:0;">
                    <p class="dava-stat-label">{{ __('lang_v1.total_purchase_return') }}</p>
                    <p class="total_purchase_return dava-stat-value" style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;"></p>
                </div>
                <div class="dava-stat-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                </div>
            </div>
        </div>

        <div class="dava-stat-card solid compact green">
            <div class="tw-flex tw-items-start tw-justify-between tw-gap-2">
                <div style="flex:1; min-width:0;">
                    <p class="dava-stat-label">{{ __('lang_v1.total_purchase_return_paid') }}</p>
                    <p class="total_purchase_return_paid dava-stat-value" style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;"></p>
                </div>
                <div class="dava-stat-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
                </div>
            </div>
        </div>

        <div class="dava-stat-card solid compact violet">
            <div class="tw-flex tw-items-start tw-justify-between tw-gap-2">
                <div style="flex:1; min-width:0;">
                    <p class="dava-stat-label">{{ __('dashboard.purchase_discount') }}</p>
                    <p class="purchase_discount dava-stat-value" style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;"></p>
                </div>
                <div class="dava-stat-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
                </div>
            </div>
        </div>

        <div class="dava-stat-card solid compact orange">
            <div class="tw-flex tw-items-start tw-justify-between tw-gap-2">
                <div style="flex:1; min-width:0;">
                    <p class="dava-stat-label">{{ __('sale.tax') }}</p>
                    <p class="total_tax dava-stat-value" style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;"></p>
                </div>
                <div class="dava-stat-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.59 13.41 13 21l-9-9V3h9l7.59 7.59a2 2 0 0 1 0 2.82Z"/><circle cx="7.5" cy="7.5" r="1.5"/></svg>
                </div>
            </div>
        </div>

        <div class="dava-stat-card solid compact sky">
            <div class="tw-flex tw-items-start tw-justify-between tw-gap-2">
                <div style="flex:1; min-width:0;">
                    <p class="dava-stat-label">{{ __('sale.shipping_charges') }}</p>
                    <p class="total_shipping_charges dava-stat-value" style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;"></p>
                </div>
                <div class="dava-stat-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
                </div>
            </div>
        </div>

        <div class="dava-stat-card solid compact amber">
            <div class="tw-flex tw-items-start tw-justify-between tw-gap-2">
                <div style="flex:1; min-width:0;">
                    <p class="dava-stat-label">{{ __('lang_v1.purchase_additional_expense') }}</p>
                    <p class="total_additional_expense dava-stat-value" style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;"></p>
                </div>
                <div class="dava-stat-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
                </div>
            </div>
        </div>

        <div class="dava-stat-card solid compact green">
            <div class="tw-flex tw-items-start tw-justify-between tw-gap-2">
                <div style="flex:1; min-width:0;">
                    <p class="dava-stat-label">{{ __('dashboard.no_of_purchases') }}</p>
                    <p class="no_of_purchases dava-stat-value" style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;"></p>
                </div>
                <div class="dava-stat-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>
                </div>
            </div>
        </div>

        <div class="dava-stat-card solid compact violet">
            <div class="tw-flex tw-items-start tw-justify-between tw-gap-2">
                <div style="flex:1; min-width:0;">
                    <p class="dava-stat-label">{{ __('dashboard.avg_purchase_value') }}</p>
                    <p class="avg_purchase_value dava-stat-value" style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;"></p>
                </div>
                <div class="dava-stat-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
                </div>
            </div>
        </div>
    </div>

    {{-- CHARTS --}}
    <div class="tw-mt-2">
        <div class="tw-grid tw-grid-cols-1 tw-gap-4 sm:tw-gap-5 lg:tw-grid-cols-2">

            <div class="dava-panel lg:tw-col-span-2">
                <div class="dava-panel-head">
                    <div class="dava-panel-icon sky">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
                        </svg>
                    </div>
                    <div>
                        <h3>{{ __('dashboard.purchase_trend_30_days') }}</h3>
                        <p class="dava-panel-sub">{{ __('dashboard.purchase_overview_sub') }}</p>
                    </div>
                </div>
                <div class="dava-panel-body">
                    <div class="dava-chart-wrap">
                        {!! $purchase_chart_1->container() !!}
                    </div>
                </div>
            </div>

            <div class="dava-panel lg:tw-col-span-2">
                <div class="dava-panel-head">
                    <div class="dava-panel-icon orange">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M3 3v18h18"/><path d="M7 12l3-3 4 4 5-5"/>
                        </svg>
                    </div>
                    <div>
                        <h3>{{ __('dashboard.purchase_trend_fy') }}</h3>
                    </div>
                </div>
                <div class="dava-panel-body">
                    <div class="dava-chart-wrap">
                        {!! $purchase_chart_2->container() !!}
                    </div>
                </div>
            </div>

            {{-- TOP SUPPLIERS - BAR --}}
            <div class="dava-panel lg:tw-col-span-1">
                <div class="dava-panel-head">
                    <div class="dava-panel-icon green">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                        </svg>
                    </div>
                    <div>
                        <h3>{{ __('dashboard.top_suppliers') }}</h3>
                    </div>
                </div>
                <div class="dava-panel-body">
                    <div class="dava-chart-wrap">
                        {!! $top_suppliers_chart->container() !!}
                    </div>
                </div>
            </div>

            {{-- TOP PURCHASED PRODUCTS - BAR --}}
            <div class="dava-panel lg:tw-col-span-1">
                <div class="dava-panel-head">
                    <div class="dava-panel-icon sky">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M20.59 13.41 13 21l-9-9V3h9l7.59 7.59a2 2 0 0 1 0 2.82Z"/><circle cx="7.5" cy="7.5" r="1.5"/>
                        </svg>
                    </div>
                    <div>
                        <h3>{{ __('dashboard.top_purchased_products') }}</h3>
                    </div>
                </div>
                <div class="dava-panel-body">
                    <div class="dava-chart-wrap">
                        {!! $top_products_chart->container() !!}
                    </div>
                </div>
            </div>

            {{-- PAYMENT STATUS - PIE --}}
            <div class="dava-panel lg:tw-col-span-1">
                <div class="dava-panel-head">
                    <div class="dava-panel-icon amber">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="10"/><path d="M12 2a10 10 0 0 1 10 10H12Z"/>
                        </svg>
                    </div>
                    <div>
                        <h3>{{ __('sale.payment_status') }}</h3>
                    </div>
                </div>
                <div class="dava-panel-body">
                    <div class="dava-chart-wrap">
                        {!! $payment_status_chart->container() !!}
                    </div>
                </div>
            </div>

            {{-- COST BREAKDOWN - PIE --}}
            <div class="dava-panel lg:tw-col-span-1">
                <div class="dava-panel-head">
                    <div class="dava-panel-icon violet">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="10"/><path d="M12 2a10 10 0 0 1 10 10H12Z"/>
                        </svg>
                    </div>
                    <div>
                        <h3>{{ __('dashboard.purchase_overview') }}</h3>
                    </div>
                </div>
                <div class="dava-panel-body">
                    <div class="dava-chart-wrap">
                        {!! $cost_breakdown_chart->container() !!}
                    </div>
                </div>
            </div>

            {{-- TOP SUPPLIERS --}}
            <div class="dava-panel lg:tw-col-span-1">
                <div class="dava-panel-head">
                    <div class="dava-panel-icon green">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                        </svg>
                    </div>
                    <div>
                        <h3>{{ __('dashboard.top_suppliers') }}</h3>
                    </div>
                </div>
                <div class="dava-panel-body tight">
                    <div class="tw-overflow-x-auto">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>{{ __('dashboard.supplier') }}</th>
                                    <th>{{ __('dashboard.purchases_count') }}</th>
                                    <th>{{ __('dashboard.total_purchased') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($top_suppliers as $supplier)
                                    <tr>
                                        <td>{{ $supplier->supplier_name }}</td>
                                        <td>{{ $supplier->purchases_count }}</td>
                                        <td>@format_currency($supplier->total_purchased)</td>
                                    </tr>
                                @empty
                                    <tr><td colspan="3" class="text-center">@lang('lang_v1.no_records_found')</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- RECENT PURCHASES --}}
            <div class="dava-panel lg:tw-col-span-1">
                <div class="dava-panel-head">
                    <div class="dava-panel-icon amber">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/>
                        </svg>
                    </div>
                    <div>
                        <h3>{{ __('dashboard.recent_purchases') }}</h3>
                    </div>
                </div>
                <div class="dava-panel-body tight">
                    <div class="tw-overflow-x-auto">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>@lang('messages.date')</th>
                                    <th>@lang('purchase.ref_no')</th>
                                    <th>{{ __('dashboard.supplier') }}</th>
                                    <th>@lang('sale.status')</th>
                                    <th>@lang('sale.total')</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($recent_purchases as $purchase)
                                    <tr>
                                        <td>{{ \Carbon::parse($purchase->transaction_date)->format('d-m-Y') }}</td>
                                        <td>
                                            <a data-href="{{ action([\App\Http\Controllers\PurchaseController::class, 'showGrn'], [$purchase->id]) }}" href="#" data-container=".view_modal" class="btn-modal">
                                                {{ $purchase->ref_no }}
                                            </a>
                                        </td>
                                        <td>{{ $purchase->supplier_name }}</td>
                                        <td>
                                            @php
                                                $badge_class = $purchase->payment_status == 'paid' ? 'green' : ($purchase->payment_status == 'due' ? 'red' : 'amber');
                                            @endphp
                                            <span class="dava-badge {{ $badge_class }}">{{ __('lang_v1.'.$purchase->payment_status) }}</span>
                                        </td>
                                        <td>@format_currency($purchase->final_total)</td>
                                    </tr>
                                @empty
                                    <tr><td colspan="5" class="text-center">@lang('lang_v1.no_records_found')</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>
</div>

@endsection

@section('javascript')
    {!! $purchase_chart_1->script() !!}
    {!! $purchase_chart_2->script() !!}
    {!! $top_suppliers_chart->script() !!}
    {!! $top_products_chart->script() !!}
    {!! $payment_status_chart->script() !!}
    {!! $cost_breakdown_chart->script() !!}
    <script type="text/javascript">
        $(document).ready(function() {
            function update_purchase_dashboard_statistics(start, end) {
                var location_id = '';
                if ($('#dashboard_location').length > 0) {
                    location_id = $('#dashboard_location').val();
                }
                var data = { start: start, end: end, location_id: location_id };
                var loader = '<i class="fas fa-sync fa-spin fa-fw margin-bottom"></i>';
                $('.total_purchase').html(loader);
                $('.purchase_due').html(loader);
                $('.total_purchase_return').html(loader);
                $('.total_purchase_return_paid').html(loader);
                $('.purchase_discount').html(loader);
                $('.total_tax').html(loader);
                $('.total_shipping_charges').html(loader);
                $('.total_additional_expense').html(loader);
                $('.no_of_purchases').html(loader);
                $('.avg_purchase_value').html(loader);

                $.ajax({
                    method: 'get',
                    url: '{{ route('dashboard.purchase.get-totals') }}',
                    dataType: 'json',
                    data: data,
                    success: function(data) {
                        $('.total_purchase').html(__currency_trans_from_en(data.total_purchase, true));
                        $('.purchase_due').html(__currency_trans_from_en(data.purchase_due, true));
                        var total_purchase_return = data.total_purchase_return - data.total_purchase_return_paid;
                        $('.total_purchase_return').html(__currency_trans_from_en(total_purchase_return, true));
                        $('.total_purchase_return_paid').html(__currency_trans_from_en(data.total_purchase_return_paid, true));
                        $('.purchase_discount').html(__currency_trans_from_en(data.purchase_discount, true));
                        $('.total_tax').html(__currency_trans_from_en(data.total_tax, true));
                        $('.total_shipping_charges').html(__currency_trans_from_en(data.total_shipping_charges, true));
                        $('.total_additional_expense').html(__currency_trans_from_en(data.total_additional_expense, true));
                        $('.no_of_purchases').html(data.no_of_purchases);
                        $('.avg_purchase_value').html(__currency_trans_from_en(data.avg_purchase_value, true));
                    },
                });
            }

            if ($('#dashboard_date_filter').length == 1) {
                dateRangeSettings.startDate = moment();
                dateRangeSettings.endDate = moment();
                $('#dashboard_date_filter').daterangepicker(dateRangeSettings, function(start, end) {
                    $('#dashboard_date_filter span').html(
                        start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format)
                    );
                    update_purchase_dashboard_statistics(start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'));
                });

                update_purchase_dashboard_statistics(moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
            }

            $('#dashboard_location').change(function(e) {
                var start = $('#dashboard_date_filter').data('daterangepicker').startDate.format('YYYY-MM-DD');
                var end = $('#dashboard_date_filter').data('daterangepicker').endDate.format('YYYY-MM-DD');
                update_purchase_dashboard_statistics(start, end);
            });
        });
    </script>
@endsection