@extends('layouts.main')

@section('content')
    <section>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="fs-base lh-base fw-medium text-muted mb-0" id="hello">
                            {{ $title }}
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <h5 class="text-primary mb-2">{{ __('general.sales') }}</h5>
                            <hr/>
                            <div class="col-12 col-sm-6 col-md-4 mb-4">
                                <x-reports.button-modal-action :url="route('report-sales.sales-per-category')" :label="__('general.report-sales.sales_per_category')" icon="fa-box" options="#option-date-range,#option-branch,#option-area,#option-customer,#option-customer-type,#option-category,#option-brand,#option-show-content" />
                            </div>
                            <div class="col-12 col-sm-6 col-md-4 mb-4">
                                <x-reports.button-modal-action :url="route('report-sales.sales-per-product')" :label="__('general.report-sales.sales_per_product')" icon="fa-boxes" options="#option-date-range,#option-branch,#option-area,#option-customer,#option-customer-type,#option-category,#option-brand,#option-product,#option-show-content" />
                            </div>
                            <div class="col-12 col-sm-6 col-md-4 mb-4">
                                <x-reports.button-modal-action :url="route('report-sales.sales-trend')" :label="__('general.report-sales.sales_trend')" icon="fa-line-chart" options="#option-period,#option-branch,#option-area,#option-customer-type,#option-category,#option-brand,#option-product,#option-show-content" />
                            </div>
                        </div>
                        <div class="row">
                            <h5 class="text-primary mb-2">{{ __('general.customer') }}</h5>
                            <hr/>
                            <div class="col-12 col-sm-6 col-md-4 mb-4">
                                <x-reports.button-modal-action :url="route('report-sales.pareto-per-customer')" :label="__('general.report-sales.pareto_per_customer')" icon="fa-percent" options="#option-period,#option-branch,#option-area,#option-customer-type,#option-category,#option-brand" />
                            </div>
                             <div class="col-12 col-sm-6 col-md-4 mb-4">
                                <x-reports.button-modal-action :url="route('report-sales.sales-order-per-customer')" :label="__('general.report-sales.sales_order_per_customer')" icon="fa-person" options="#option-date-range,#option-branch,#option-area,#option-customer,#option-customer-type" />
                            </div>
                            <div class="col-12 col-sm-6 col-md-4 mb-4">
                                <x-reports.button-modal-action :url="route('report-sales.owing-receivables')" :label="__('general.report-sales.owing_receivables') ?? 'Owing Receivables'" icon="fa-money-bill" options="#option-date-range,#option-branch,#option-customer" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="section-options-placeholder" class="d-none">
        <x-reports.modal-option-branch />
        <x-reports.modal-option-customer />
        <x-reports.modal-option-customer-type />
        <x-reports.modal-option-category />
        <x-reports.modal-option-brand />
        <x-reports.modal-option-product />
        <x-reports.modal-option-period />
        <x-reports.modal-option-show-content />
        <x-reports.modal-option-date-range />
        <x-reports.modal-option-date name="start_date" :label="__('validation.attributes.start_date')" :can-clear="true" :value="dateDisplay(today()->startOf('year'))" />
        <x-reports.modal-option-date name="end_date" :label="__('validation.attributes.end_date')" :can-clear="true" value="" />
        <x-reports.modal-option-is-active />
    </section>
@endsection

@pushonce('modal')
    <x-reports.modal-form-report />
@endpushonce