@extends('admin.layouts')

@section('title', 'Category Wise Sales')

@section('content')

<div class="container-fluid py-3">

    {{-- ========================================================= --}}
    {{-- PAGE HEADER --}}
    {{-- ========================================================= --}}

    <div class="d-flex justify-content-between align-items-center mb-4">

        <div>
            <h4 class="mb-1 fw-bold page-title">
                <i class="fas fa-chart-pie me-2 text-primary"></i>
                Category-wise Sales & Profit Report
            </h4>

            @if(!empty($branchName))
                <span class="text-muted">
                    Branch:
                    <strong>{{ $branchName }}</strong>
                </span>
            @else
                <span class="text-muted">
                    All Branches
                </span>
            @endif
        </div>

    </div>


    {{-- ========================================================= --}}
    {{-- FILTER CARD --}}
    {{-- ========================================================= --}}

    <div class="card border-0 shadow-sm mb-4 filter-card">

        <div class="card-body p-4">

            <form method="GET"
                  action="{{ route('category_wise_sales') }}">

                <div class="row g-3 align-items-end">

                    {{-- FROM DATE --}}
                    <div class="col-lg-3 col-md-6">

                        <label class="form-label fw-semibold">
                            From Date
                        </label>

                        <input
                            type="date"
                            name="from_date"
                            class="form-control"
                            value="{{ $fromDate }}"
                        >

                    </div>


                    {{-- TO DATE --}}
                    <div class="col-lg-3 col-md-6">

                        <label class="form-label fw-semibold">
                            To Date
                        </label>

                        <input
                            type="date"
                            name="to_date"
                            class="form-control"
                            value="{{ $toDate }}"
                        >

                    </div>


                    {{-- CATEGORY --}}
                    <div class="col-lg-3 col-md-6">

                        <label class="form-label fw-semibold">
                            Category
                        </label>

                        <select
                            name="category"
                            id="categoryFilter"
                            class="form-select"
                        >

                            <option value="">
                                All Categories
                            </option>

                            @foreach($categories as $category)

                                <option
                                    value="{{ $category->category_name }}"
                                    {{ ($selectedCategory ?? '') === $category->category_name ? 'selected' : '' }}
                                >
                                    {{ $category->category_name }}
                                </option>

                            @endforeach

                        </select>

                    </div>


                    {{-- SUBCATEGORY --}}
                    <div class="col-lg-3 col-md-6">

                        <label class="form-label fw-semibold">
                            Subcategory
                        </label>

                        <select
                            name="subcategory"
                            id="subcategoryFilter"
                            class="form-select"
                        >

                            <option value="">
                                All Subcategories
                            </option>

                            @foreach($subcategories as $subcategory)

                                <option
                                    value="{{ $subcategory->subcategory_name }}"
                                    {{ ($selectedSubcategory ?? '') === $subcategory->subcategory_name ? 'selected' : '' }}
                                >
                                    {{ $subcategory->subcategory_name }}
                                </option>

                            @endforeach

                        </select>

                    </div>


                    {{-- ORDER ID --}}
                    <div class="col-lg-3 col-md-6">

                        <label class="form-label fw-semibold">
                            Search Order ID
                        </label>

                        <input
                            type="text"
                            name="order_id"
                            class="form-control"
                            placeholder="Search Order ID..."
                            value="{{ $orderId }}"
                        >

                    </div>


                    {{-- SEARCH --}}
                    <div class="col-lg-2 col-md-6">

                        <button
                            type="submit"
                            class="btn btn-primary w-100"
                        >
                            <i class="fas fa-search me-1"></i>
                            Search
                        </button>

                    </div>


                    {{-- RESET --}}
                    <div class="col-lg-2 col-md-6">

                        <a
                            href="{{ route('category_wise_sales') }}"
                            class="btn btn-light border w-100"
                        >
                            <i class="fas fa-undo me-1"></i>
                            Reset
                        </a>

                    </div>

                </div>

            </form>

        </div>

    </div>


    {{-- ========================================================= --}}
    {{-- REPORT --}}
    {{-- ========================================================= --}}

    @if($categoryReport->count() > 0)


        {{-- ========================================================= --}}
        {{-- CHART SECTION --}}
        {{-- SALES TOP / PROFIT BELOW --}}
        {{-- ========================================================= --}}

        <div class="row g-4 mb-4">


            {{-- ===================================================== --}}
            {{-- SALES CHART --}}
            {{-- ===================================================== --}}

            <div class="col-12">

                <div class="card border-0 shadow-sm chart-card">

                    <div class="card-body p-4">


                        {{-- CHART HEADER --}}
                        <div class="chart-header">

                            <div class="chart-heading">

                                <div class="chart-icon sales-icon">

                                    <i class="fas fa-chart-column"></i>

                                </div>

                                <div>

                                    <h5 class="fw-bold mb-1">

                                        Category-wise Sales

                                        @if(!empty($branchName))

                                            <span class="branch-title sales-text">
                                                — {{ $branchName }}
                                            </span>

                                        @endif

                                    </h5>

                                    <p class="chart-subtitle mb-0">
                                        Sales performance by category and subcategory
                                    </p>

                                </div>

                            </div>

                        </div>


                        {{-- SALES CHART --}}
                        <div class="chart-area">

                            <div class="chart-scroll">

                                <div
                                    class="chart-canvas-container"
                                    style="min-width: {{ max(650, $categoryReport->count() * 75) }}px;"
                                >

                                    <canvas id="salesChart"></canvas>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>


            {{-- ===================================================== --}}
            {{-- PROFIT CHART --}}
            {{-- ===================================================== --}}

            <div class="col-12">

                <div class="card border-0 shadow-sm chart-card">

                    <div class="card-body p-4">


                        {{-- CHART HEADER --}}
                        <div class="chart-header">

                            <div class="chart-heading">

                                <div class="chart-icon profit-icon">

                                    <i class="fas fa-chart-line"></i>

                                </div>

                                <div>

                                    <h5 class="fw-bold mb-1">

                                        Category-wise Profit

                                        @if(!empty($branchName))

                                            <span class="branch-title profit-text">
                                                — {{ $branchName }}
                                            </span>

                                        @endif

                                    </h5>

                                    <p class="chart-subtitle mb-0">
                                        Profit performance by category and subcategory
                                    </p>

                                </div>

                            </div>

                        </div>


                        {{-- PROFIT CHART --}}
                        <div class="chart-area">

                            <div class="chart-scroll">

                                <div
                                    class="chart-canvas-container"
                                    style="min-width: {{ max(650, $categoryReport->count() * 75) }}px;"
                                >

                                    <canvas id="profitChart"></canvas>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>


        {{-- ========================================================= --}}
        {{-- HIGHEST SALES / PROFIT --}}
        {{-- ========================================================= --}}

        <div class="row g-4 mb-4">


            {{-- HIGHEST SALES --}}
            <div class="col-md-6">

                <div class="card border-0 shadow-sm summary-card">

                    <div class="card-body p-4">

                        <div class="d-flex justify-content-between align-items-center">

                            <div>

                                <small class="text-muted fw-semibold">

                                    <i class="fas fa-trophy text-warning me-1"></i>

                                    HIGHEST SALES CATEGORY

                                </small>

                                @if($highestSalesCategory)

                                    <h4 class="fw-bold mt-2 mb-1">
                                        {{ $highestSalesCategory['category_name'] }}
                                    </h4>

                                    @if(!empty($highestSalesCategory['subcategory_name']))

                                        <small class="text-muted">
                                            {{ $highestSalesCategory['subcategory_name'] }}
                                        </small>

                                    @endif

                                    <h5 class="text-primary mt-2 mb-0">

                                        ₹{{ number_format(
                                            $highestSalesCategory['sales_amount'],
                                            2
                                        ) }}

                                    </h5>

                                @else

                                    <span class="text-muted">
                                        No data
                                    </span>

                                @endif

                            </div>

                            <div class="summary-icon sales-summary-icon">

                                <i class="fas fa-chart-bar"></i>

                            </div>

                        </div>

                    </div>

                </div>

            </div>


            {{-- HIGHEST PROFIT --}}
            <div class="col-md-6">

                <div class="card border-0 shadow-sm summary-card">

                    <div class="card-body p-4">

                        <div class="d-flex justify-content-between align-items-center">

                            <div>

                                <small class="text-muted fw-semibold">

                                    <i class="fas fa-trophy text-warning me-1"></i>

                                    HIGHEST PROFIT CATEGORY

                                </small>

                                @if($highestProfitCategory)

                                    <h4 class="fw-bold mt-2 mb-1">
                                        {{ $highestProfitCategory['category_name'] }}
                                    </h4>

                                    @if(!empty($highestProfitCategory['subcategory_name']))

                                        <small class="text-muted">
                                            {{ $highestProfitCategory['subcategory_name'] }}
                                        </small>

                                    @endif

                                    <h5 class="text-success mt-2 mb-0">

                                        ₹{{ number_format(
                                            $highestProfitCategory['profit'],
                                            2
                                        ) }}

                                    </h5>

                                @else

                                    <span class="text-muted">
                                        No data
                                    </span>

                                @endif

                            </div>

                            <div class="summary-icon profit-summary-icon">

                                <i class="fas fa-money-bill-wave"></i>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>


        {{-- ========================================================= --}}
        {{-- SUMMARY TABLE --}}
        {{-- ========================================================= --}}

        <div class="card border-0 shadow-sm mb-4">

            <div class="card-body p-4">

                <div class="d-flex justify-content-between align-items-center mb-4">

                    <div>

                        <h5 class="fw-bold mb-1">
                            Category Sales Summary
                        </h5>

                        <small class="text-muted">
                            Sales and profit grouped by category and subcategory
                        </small>

                    </div>

                    <span class="badge bg-primary px-3 py-2">

                        {{ $categoryReport->count() }}

                        Records

                    </span>

                </div>


                <div class="table-responsive">

                    <table class="table table-bordered table-hover align-middle mb-0">

                        <thead class="table-light">

                            <tr>

                                <th class="text-center">
                                    SNO
                                </th>

                                <th>
                                    CATEGORY NAME
                                </th>

                                <th>
                                    SUBCATEGORY
                                </th>

                                <th class="text-center">
                                    BILLS
                                </th>

                                <th class="text-end">
                                    QUANTITY
                                </th>

                                <th class="text-end">
                                    SALES AMOUNT
                                </th>

                                <th class="text-end">
                                    SALES %
                                </th>

                                <th class="text-end">
                                    COST
                                </th>

                                <th class="text-end">
                                    PROFIT
                                </th>

                                <th class="text-end">
                                    PROFIT %
                                </th>

                                <th class="text-center">
                                    ACTION
                                </th>

                            </tr>

                        </thead>


                        <tbody>

                            @forelse($categoryReport as $index => $category)

                                <tr>

                                    <td class="text-center">
                                        {{ $index + 1 }}
                                    </td>


                                    <td>

                                        <strong>
                                            {{ $category['category_name'] }}
                                        </strong>

                                    </td>


                                    <td>

                                        @if(!empty($category['subcategory_name']))

                                            {{ $category['subcategory_name'] }}

                                        @else

                                            <span class="text-muted">
                                                N/A
                                            </span>

                                        @endif

                                    </td>


                                    <td class="text-center">

                                        <span class="badge bg-secondary">
                                            {{ $category['bills'] }}
                                        </span>

                                    </td>


                                    <td class="text-end">

                                        {{ rtrim(
                                            rtrim(
                                                number_format(
                                                    $category['quantity'],
                                                    3,
                                                    '.',
                                                    ''
                                                ),
                                                '0'
                                            ),
                                            '.'
                                        ) }}

                                    </td>


                                    <td class="text-end">

                                        <strong class="text-primary">

                                            ₹{{ number_format(
                                                $category['sales_amount'],
                                                2
                                            ) }}

                                        </strong>

                                    </td>


                                    <td class="text-end">

                                        <span class="badge bg-primary">

                                            {{ number_format(
                                                $category['sales_percentage'],
                                                2
                                            ) }}%

                                        </span>

                                    </td>


                                    <td class="text-end">

                                        ₹{{ number_format(
                                            $category['cost_amount'],
                                            2
                                        ) }}

                                    </td>


                                    <td class="text-end">

                                        @if($category['profit'] >= 0)

                                            <strong class="text-success">

                                                ₹{{ number_format(
                                                    $category['profit'],
                                                    2
                                                ) }}

                                            </strong>

                                        @else

                                            <strong class="text-danger">

                                                ₹{{ number_format(
                                                    $category['profit'],
                                                    2
                                                ) }}

                                            </strong>

                                        @endif

                                    </td>


                                    <td class="text-end">

                                        <span
                                            class="badge
                                            {{ $category['profit_percentage'] >= 0
                                                ? 'bg-success'
                                                : 'bg-danger'
                                            }}"
                                        >

                                            {{ number_format(
                                                $category['profit_percentage'],
                                                2
                                            ) }}%

                                        </span>

                                    </td>


                                    <td class="text-center">

                                        @if(!empty($category['category_id']))

                                            <a
                                                href="{{ route(
                                                    'category.wise.sales.details',
                                                    [
                                                        'category_id' => $category['category_id'],
                                                        'from_date' => $fromDate,
                                                        'to_date' => $toDate,
                                                        'order_id' => $orderId,
                                                        'category' => $category['category_name'] ?? '',
                                                        'subcategory' => $category['subcategory_name'] ?? '',
                                                    ]
                                                ) }}"
                                                class="btn btn-warning btn-sm"
                                                title="View Details"
                                            >

                                                <i class="fas fa-eye me-1"></i>
                                                View

                                            </a>

                                        @else

                                            <span class="text-muted">
                                                -
                                            </span>

                                        @endif

                                    </td>

                                </tr>

                            @empty

                                <tr>

                                    <td
                                        colspan="11"
                                        class="text-center py-4"
                                    >

                                        <i
                                            class="fas fa-inbox fa-2x text-muted mb-2"
                                        ></i>

                                        <br>

                                        No sales found.

                                    </td>

                                </tr>

                            @endforelse

                        </tbody>

                    </table>

                </div>

            </div>

        </div>


    @else


        {{-- ========================================================= --}}
        {{-- NO DATA --}}
        {{-- ========================================================= --}}

        <div class="card border-0 shadow-sm">

            <div class="card-body text-center py-5">

                <i
                    class="fas fa-chart-bar fa-3x text-muted mb-3"
                ></i>

                <h5 class="text-muted">
                    No sales found
                </h5>

                <p class="text-muted mb-0">
                    No category sales are available
                    for the selected filters.
                </p>

            </div>

        </div>

    @endif

</div>


{{-- ============================================================= --}}
{{-- MODERN CHART CSS --}}
{{-- ============================================================= --}}

<style>

    /* =========================================================
       GENERAL
    ========================================================= */

    .filter-card,
    .chart-card,
    .summary-card {
        border-radius: 16px;
    }

    .page-title {
        letter-spacing: -0.3px;
    }


    /* =========================================================
       CHART CARD
    ========================================================= */

    .chart-card {
        overflow: hidden;
        background: #ffffff;
    }

    /*
     * Reduced from 520px
     * because charts are now stacked vertically.
     */

    .chart-card .card-body {
        min-height: 400px;
    }


    /* =========================================================
       CHART HEADER
    ========================================================= */

    .chart-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 18px;
    }

    .chart-heading {
        display: flex;
        align-items: flex-start;
        gap: 13px;
    }

    .chart-icon {
        width: 44px;
        height: 44px;

        min-width: 44px;

        border-radius: 12px;

        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 18px;
    }


    /* =========================================================
       SALES
    ========================================================= */

    .sales-icon {
        background: rgba(13, 110, 253, 0.10);
        color: #0d6efd;
    }

    .sales-text {
        color: #0d6efd;
    }


    /* =========================================================
       PROFIT
    ========================================================= */

    .profit-icon {
        background: rgba(25, 135, 84, 0.10);
        color: #198754;
    }

    .profit-text {
        color: #198754;
    }


    /* =========================================================
       CHART TEXT
    ========================================================= */

    .chart-heading h5 {
        font-size: 17px;
        letter-spacing: -0.2px;
    }

    .branch-title {
        font-weight: 700;
    }

    .chart-subtitle {
        color: #7b8491;
        font-size: 12.5px;
    }


    /* =========================================================
       TOTAL BOX
    ========================================================= */

    .chart-total-box {
        min-width: 145px;

        padding: 11px 15px;

        border-radius: 12px;

        text-align: right;

        display: flex;
        flex-direction: column;

        gap: 3px;
    }

    .chart-total-box span {
        font-size: 11px;
        color: #7b8491;
        font-weight: 600;
    }

    .chart-total-box strong {
        font-size: 17px;
        font-weight: 800;
    }

    .sales-total {
        background: rgba(13, 110, 253, 0.07);
    }

    .sales-total strong {
        color: #0d6efd;
    }

    .profit-total {
        background: rgba(25, 135, 84, 0.07);
    }

    .profit-total strong {
        color: #198754;
    }


    /* =========================================================
       CHART AREA
       Reduced height so more content fits on screen.
    ========================================================= */

    .chart-area {
        width: 100%;
        height: 285px;
        position: relative;
    }

    .chart-scroll {
        width: 100%;
        height: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        padding-bottom: 8px;
    }

    .chart-canvas-container {
        height: 255px;
        position: relative;
    }


    /* =========================================================
       CUSTOM SCROLLBAR
    ========================================================= */

    .chart-scroll::-webkit-scrollbar {
        height: 7px;
    }

    .chart-scroll::-webkit-scrollbar-track {
        background: #f1f3f5;
        border-radius: 20px;
    }

    .chart-scroll::-webkit-scrollbar-thumb {
        background: #cbd1d8;
        border-radius: 20px;
    }

    .chart-scroll::-webkit-scrollbar-thumb:hover {
        background: #adb5bd;
    }


    /* =========================================================
       SUMMARY CARDS
    ========================================================= */

    .summary-card {
        transition:
            transform 0.2s ease,
            box-shadow 0.2s ease;
    }

    .summary-card:hover {
        transform: translateY(-2px);
        box-shadow:
            0 8px 24px rgba(0, 0, 0, 0.07) !important;
    }

    .summary-icon {
        width: 52px;
        height: 52px;

        border-radius: 14px;

        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 21px;
    }

    .sales-summary-icon {
        background: rgba(13, 110, 253, 0.10);
        color: #0d6efd;
    }

    .profit-summary-icon {
        background: rgba(25, 135, 84, 0.10);
        color: #198754;
    }


    /* =========================================================
       TABLE
    ========================================================= */

    .table thead th {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.3px;
        white-space: nowrap;
    }

    .table tbody td {
        font-size: 13px;
    }


    /* =========================================================
       FORM
    ========================================================= */

    .form-control,
    .form-select {
        min-height: 42px;
        border-radius: 9px;
    }

    .btn {
        border-radius: 9px;
    }


    /* =========================================================
       MOBILE
    ========================================================= */

    @media (max-width: 991px) {

        .chart-header {
            flex-direction: column;
        }

        .chart-total-box {
            width: 100%;
            text-align: left;
        }

    }


    @media (max-width: 768px) {

        .chart-card .card-body {
            min-height: auto;
        }

        .chart-area {
            height: 265px;
        }

        .chart-canvas-container {
            height: 235px;
        }

        .chart-heading h5 {
            font-size: 15px;
        }

        .chart-subtitle {
            font-size: 11.5px;
        }

    }

</style>


{{-- ============================================================= --}}
{{-- CHART.JS --}}
{{-- ============================================================= --}}

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>

document.addEventListener('DOMContentLoaded', function () {


    /* ============================================================
       CATEGORY / SUBCATEGORY FILTER
    ============================================================ */

    const allProducts = @json($filterProducts);

    const categoryFilter =
        document.getElementById('categoryFilter');

    const subcategoryFilter =
        document.getElementById('subcategoryFilter');

    const currentCategory =
        @json($selectedCategory ?? '');

    const currentSubcategory =
        @json($selectedSubcategory ?? '');


    function loadSubcategories(
        selectedCategory,
        selectedSubcategory = ''
    ) {

        const filteredProducts =
            allProducts.filter(function (product) {

                return (
                    selectedCategory === '' ||
                    product.category_name === selectedCategory
                );

            });


        const subcategories =
            filteredProducts

                .map(function (product) {

                    return product.subcategory_name;

                })

                .filter(function (value) {

                    return (
                        value !== null &&
                        value !== undefined &&
                        value !== ''
                    );

                })

                .filter(function (value, index, self) {

                    return self.indexOf(value) === index;

                });


        subcategoryFilter.innerHTML = '';


        const allOption =
            document.createElement('option');

        allOption.value = '';

        allOption.textContent =
            'All Subcategories';

        subcategoryFilter.appendChild(allOption);


        subcategories.forEach(function (subcategory) {

            const option =
                document.createElement('option');

            option.value =
                subcategory;

            option.textContent =
                subcategory;


            if (
                selectedSubcategory !== '' &&
                selectedSubcategory === subcategory
            ) {

                option.selected = true;

            }


            subcategoryFilter.appendChild(option);

        });


        if (selectedSubcategory === '') {

            subcategoryFilter.value = '';

        }

    }


    loadSubcategories(
        currentCategory,
        currentSubcategory
    );


    categoryFilter.addEventListener(
        'change',
        function () {

            loadSubcategories(
                this.value,
                ''
            );

        }
    );


    /* ============================================================
       CHART DATA
       
       IMPORTANT:
       Data/calculations are NOT changed.
       
       Only DISPLAY LABEL is changed.
       
       If subcategory exists:
           Show SUBCATEGORY only.
       
       If no subcategory:
           Show CATEGORY.
       
       Full category/subcategory is available in tooltip.
    ============================================================ */


    const chartFullLabels =
        @json(
            $categoryReport
                ->map(function ($item) {

                    $category =
                        trim($item['category_name'] ?? '');

                    $subcategory =
                        trim($item['subcategory_name'] ?? '');

                    if ($subcategory !== '') {

                        return $category . ' / ' . $subcategory;

                    }

                    return $category;

                })
                ->values()
        );


    const chartDisplayLabels =
        @json(
            $categoryReport
                ->map(function ($item) {

                    $category =
                        trim($item['category_name'] ?? '');

                    $subcategory =
                        trim($item['subcategory_name'] ?? '');

                    if ($subcategory !== '') {

                        return $subcategory;

                    }

                    return $category;

                })
                ->values()
        );


    const salesData =
        @json(
            $categoryReport
                ->pluck('sales_amount')
                ->values()
        );


    const profitData =
        @json(
            $categoryReport
                ->pluck('profit')
                ->values()
        );


    const salesPercentageData =
        @json(
            $categoryReport
                ->pluck('sales_percentage')
                ->values()
        );


    const profitPercentageData =
        @json(
            $categoryReport
                ->pluck('profit_percentage')
                ->values()
        );


    /* ============================================================
       COMMON CHART OPTIONS
    ============================================================ */

    const commonOptions = {

        responsive: true,

        maintainAspectRatio: false,

        animation: {

            duration: 800,

            easing: 'easeOutQuart'

        },

        interaction: {

            intersect: false,

            mode: 'index'

        },

        layout: {

            padding: {

                top: 8,

                right: 15,

                bottom: 3,

                left: 5

            }

        },

        plugins: {

            legend: {

                display: false

            },

            tooltip: {

                backgroundColor: '#171b26',

                titleColor: '#ffffff',

                bodyColor: '#e9edf3',

                padding: 14,

                cornerRadius: 10,

                displayColors: false,

                titleFont: {

                    size: 13,

                    weight: '700'

                },

                bodyFont: {

                    size: 12,

                    weight: '500'

                },

                callbacks: {

                    title: function (items) {

                        if (!items.length) {

                            return '';

                        }

                        return chartFullLabels[
                            items[0].dataIndex
                        ];

                    }

                }

            }

        },

        scales: {

            x: {

                grid: {

                    display: false

                },

                border: {

                    display: false

                },

                ticks: {

                    color: '#697386',

                    font: {

                        size: 10,

                        weight: '600'

                    },

                    maxRotation: 0,

                    minRotation: 0,

                    autoSkip: false,

                    padding: 7,

                    callback: function (value) {

                        const label =
                            this.getLabelForValue(value);

                        if (!label) {

                            return '';

                        }


                        if (label.length > 16) {

                            return (
                                label.substring(0, 16) +
                                '...'
                            );

                        }

                        return label;

                    }

                }

            },


            y: {

                beginAtZero: true,

                border: {

                    display: false

                },

                grid: {

                    color:
                        'rgba(108, 117, 125, 0.09)',

                    drawTicks: false,

                    lineWidth: 1

                },

                ticks: {

                    color: '#697386',

                    padding: 8,

                    font: {

                        size: 10,

                        weight: '500'

                    }

                }

            }

        }

    };


    /* ============================================================
       SALES CHART
    ============================================================ */

    const salesCanvas =
        document.getElementById('salesChart');


    if (salesCanvas) {

        new Chart(

            salesCanvas,

            {

                type: 'bar',

                data: {

                    labels: chartDisplayLabels,

                    datasets: [

                        {

                            label: 'Sales',

                            data: salesData,

                            backgroundColor:
                                'rgba(13, 110, 253, 0.72)',

                            hoverBackgroundColor:
                                'rgba(13, 110, 253, 0.90)',

                            borderColor:
                                'rgba(13, 110, 253, 0)',

                            borderWidth: 0,

                            borderRadius: 7,

                            borderSkipped: false,

                            /*
                             * Reduced from 52
                             */

                            maxBarThickness: 38,

                            categoryPercentage: 0.62,

                            barPercentage: 0.68

                        }

                    ]

                },


                options: {

                    ...commonOptions,

                    plugins: {

                        ...commonOptions.plugins,

                        tooltip: {

                            ...commonOptions.plugins.tooltip,

                            callbacks: {

                                title: function (items) {

                                    if (!items.length) {

                                        return '';

                                    }

                                    return chartFullLabels[
                                        items[0].dataIndex
                                    ];

                                },


                                label: function (context) {

                                    const index =
                                        context.dataIndex;

                                    const value =
                                        Number(
                                            context.raw || 0
                                        );

                                    const percentage =
                                        Number(
                                            salesPercentageData[index] || 0
                                        );


                                    return [

                                        'Sales: ₹' +
                                        value.toLocaleString(
                                            'en-IN',
                                            {
                                                minimumFractionDigits: 2,
                                                maximumFractionDigits: 2
                                            }
                                        ),

                                        'Sales %: ' +
                                        percentage.toFixed(2) +
                                        '%'

                                    ];

                                }

                            }

                        }

                    },


                    scales: {

                        ...commonOptions.scales,

                        y: {

                            ...commonOptions.scales.y,

                            title: {

                                display: true,

                                text: 'Sales Amount',

                                color: '#697386',

                                font: {

                                    size: 10,

                                    weight: '700'

                                }

                            },

                            ticks: {

                                ...commonOptions.scales.y.ticks,

                                callback: function (value) {

                                    return '₹' +
                                        Number(value)
                                            .toLocaleString(
                                                'en-IN'
                                            );

                                }

                            }

                        }

                    }

                }

            }

        );

    }


    /* ============================================================
       PROFIT CHART
    ============================================================ */

    const profitCanvas =
        document.getElementById('profitChart');


    if (profitCanvas) {

        new Chart(

            profitCanvas,

            {

                type: 'bar',

                data: {

                    labels: chartDisplayLabels,

                    datasets: [

                        {

                            label: 'Profit',

                            data: profitData,

                            backgroundColor:
                                'rgba(25, 135, 84, 0.72)',

                            hoverBackgroundColor:
                                'rgba(25, 135, 84, 0.90)',

                            borderColor:
                                'rgba(25, 135, 84, 0)',

                            borderWidth: 0,

                            borderRadius: 7,

                            borderSkipped: false,

                            /*
                             * Reduced from 52
                             */

                            maxBarThickness: 38,

                            categoryPercentage: 0.62,

                            barPercentage: 0.68

                        }

                    ]

                },


                options: {

                    ...commonOptions,

                    plugins: {

                        ...commonOptions.plugins,

                        tooltip: {

                            ...commonOptions.plugins.tooltip,

                            callbacks: {

                                title: function (items) {

                                    if (!items.length) {

                                        return '';

                                    }

                                    return chartFullLabels[
                                        items[0].dataIndex
                                    ];

                                },


                                label: function (context) {

                                    const index =
                                        context.dataIndex;

                                    const value =
                                        Number(
                                            context.raw || 0
                                        );

                                    const percentage =
                                        Number(
                                            profitPercentageData[index] || 0
                                        );


                                    return [

                                        'Profit: ₹' +
                                        value.toLocaleString(
                                            'en-IN',
                                            {
                                                minimumFractionDigits: 2,
                                                maximumFractionDigits: 2
                                            }
                                        ),

                                        'Profit %: ' +
                                        percentage.toFixed(2) +
                                        '%'

                                    ];

                                }

                            }

                        }

                    },


                    scales: {

                        ...commonOptions.scales,

                        y: {

                            ...commonOptions.scales.y,

                            title: {

                                display: true,

                                text: 'Profit',

                                color: '#697386',

                                font: {

                                    size: 10,

                                    weight: '700'

                                }

                            },

                            ticks: {

                                ...commonOptions.scales.y.ticks,

                                callback: function (value) {

                                    return '₹' +
                                        Number(value)
                                            .toLocaleString(
                                                'en-IN'
                                            );

                                }

                            }

                        }

                    }

                }

            }

        );

    }

});

</script>

@endsection