@extends('master')
@section('content')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .card-hover:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            transform: translateY(-2px);
        }

        .card {
            transition: all 0.3s ease;
            margin-bottom: 0 !important;
        }

        .card-icon {
            opacity: 0.5;
        }

        .topbar {
            margin-bottom: 1rem;
        }

        .topbar .card-body {
            padding: 0.5rem !important;
            padding-bottom: 0 !important;
        }

        .topbar .card-body .row {
            --bs-gutter-x: 0.5rem !important;
        }
    </style>
    <div class="page-wrapper">
        <div class="content">
            <div class="topbar flex justify-between gap-4">
                <div class="w-1/2 p-1 bg-white rounded-xl shadow-sm hover-shadow transition overflow-hidden">
                    <div class="px-1 py-1" style="background: #D2DAFF; color: #2551A1">
                        <h4 class="text-xl font-bold text-center">{{ __('sitelabel.FilterData') }}</h4>
                    </div>
                    <div class="card-body">
                        <form method="post" action="#" enctype="multipart/form-data" id="filterForm">
                            @csrf
                            <div class="row">
                                <div class="col-4">
                                    <div class="form-group">
                                        <label>{{ __('sitelabel.StartDate') }}</label>
                                        <input type="date" class="form-control" name="txtStartDate"
                                            max="{{ $date }}" required>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="form-group">
                                        <label>{{ __('sitelabel.EndDate') }}</label>
                                        <input type="date" class="form-control" name="txtEndDate"
                                            max="{{ $date }}" value="{{ $date }}" required>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="form-group">
                                        <label>{{ __('sitelabel.Branch') }}</label>
                                        <select class="form-control" name="cmbBranch" id="cmbBranch" required>
                                            <option value="">{{ __('sitelabel.SelectBranch') }}</option>
                                            @foreach ($posbranch as $item)
                                                <option value="{{ $item->Id }}">{{ $item->Name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-group">
                                        <button type="submit" class="btn btn-primary">Search</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="w-1/2 p-1 bg-white rounded-xl shadow-sm hover-shadow transition overflow-hidden">
                    <div class="px-1 py-1" style="background: #FFDBC7; color: #D07645">
                        <h4 class="text-xl font-bold text-center">{{ __('sitelabel.CloseDay') }}</h4>
                    </div>
                    <div class="card-body">
                        <form id="closeDayForm" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-6">
                                    <div class="form-group">
                                        <label>{{ __('sitelabel.Date') }}</label>
                                        <input type="date" name="txtCloseDate" id="txtCloseDate" class="form-control"
                                            value="{{ $date }}" max="{{ $date }}">
                                        <span class="text-danger" id="txtCloseDateError">
                                            @error('txtCloseDate')
                                                {{ $message }}
                                            @enderror
                                        </span>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group">
                                        <label>{{ __('sitelabel.Branch') }}</label>
                                        <select class="form-control" name="posBranch" id="posBranch">
                                            <option value="">{{ __('sitelabel.SelectBranch') }}</option>
                                            @foreach ($posbranch as $item)
                                                <option value="{{ $item->Id }}">{{ $item->Name }}</option>
                                            @endforeach
                                        </select>
                                        <span class="text-danger" id="posBranchError">
                                            @error('posBranch')
                                                {{ $message }}
                                            @enderror
                                        </span>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-group">
                                        <button type="submit"
                                            class="btn btn-primary">{{ __('sitelabel.CloseDay') }}</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-2 mb-3">
                @php
                    $closingBalance =
                        $todayOpeningBalance +
                        $todayCashSale +
                        $todayScrapSale +
                        $todayCustomerPayment -
                        ($todayBankCashDeposit + $todayStoreExpense + $todayCashReturn);
                    $cards = [
                        [
                            'route' => '#',
                            'amount' => number_format($todayOpeningBalance, 2),
                            'label' => __('sitelabel.OpeningBalance'),
                            'icon' => 'fa-shopping-bag',
                            'bg_color' => 'bg-success',
                        ],
                        [
                            'route' => '#',
                            'amount' => number_format($todayCashSale, 2),
                            'label' => __('sitelabel.CashSale'),
                            'icon' => 'fa-shopping-cart',
                            'bg_color' => 'bg-primary',
                        ],
                        [
                            'route' => '#',
                            'amount' => number_format($todayCreditSale, 2),
                            'label' => __('sitelabel.CreditSale'),
                            'icon' => 'fa-chart-bar',
                            'bg_color' => 'bg-info',
                        ],
                        [
                            'route' => '#',
                            'amount' => number_format($todayBankCashDeposit, 2),
                            'label' => __('sitelabel.BankCashDeposit'),
                            'icon' => 'fa-users',
                            'bg_color' => 'bg-secondary',
                        ],
                        [
                            'route' => '#',
                            'amount' => number_format($todayStoreExpense, 2),
                            'label' => __('sitelabel.StoreExpense'),
                            'icon' => 'fa-store',
                            'bg_color' => 'bg-danger',
                        ],
                        [
                            'route' => '#',
                            'amount' => number_format($todayCustomerPayment, 2),
                            'label' => __('sitelabel.CustomerPayment'),
                            'icon' => 'fa-credit-card',
                            'bg_color' => 'bg-warning',
                        ],
                        [
                            'route' => '#',
                            'amount' => number_format($todayCashReturn, 2),
                            'label' => __('sitelabel.CashReturnSale'),
                            'icon' => 'fa-undo',
                            'bg_color' => 'bg-dark',
                        ],
                        [
                            'route' => '#',
                            'amount' => number_format($todayCreditReturn, 2),
                            'label' => __('sitelabel.CreditReturnSale'),
                            'icon' => 'fa-undo-alt',
                            'bg_color' => 'bg-primary',
                        ],
                        [
                            'route' => '#',
                            'amount' => number_format($todayScrapSale, 2),
                            'label' => __('sitelabel.ScrapSale'),
                            'icon' => 'fa-trash',
                            'bg_color' => 'bg-secondary',
                        ],
                        [
                            'route' => '#',
                            'amount' => number_format($closingBalance, 2),
                            'label' => __('sitelabel.ClosingBalance'),
                            'icon' => 'fa-balance-scale',
                            'bg_color' => 'bg-success',
                        ],
                        [
                            'route' => '#',
                            'amount' => '27,148.00',
                            'label' => __('sitelabel.StockInventory'),
                            'icon' => 'fa-boxes',
                            'bg_color' => 'bg-danger',
                        ],
                        [
                            'route' => 'posreport',
                            'amount' => 'Reports',
                            'label' => __('sitelabel.ViewReports'),
                            'icon' => 'fa-file-alt',
                            'bg_color' => 'bg-dark',
                        ],
                    ];
                @endphp
                @foreach ($cards as $card)
                    <a href="{{ url('/') }}/{{ $card['route'] }}" class="text-white no-underline" target="_blank">
                        <div class="card card-hover rounded-lg p-3 {{ $card['bg_color'] }} h-100">
                            <div class="d-flex flex-row align-items-center justify-content-center h-100">
                                <div class="d-flex flex-column align-items-center justify-content-center h-100"
                                    style="margin: 0 auto;">
                                    <div class="text-lg font-bold mb-1 card-amount"
                                        data-type="{{ str_replace(' ', '', $card['label']) }}">{{ $card['amount'] }}</div>
                                    <div class="text-sm">{{ $card['label'] }}</div>
                                </div>
                                <div class="card-icon" style="margin: 0 auto;">
                                    <i class="fas {{ $card['icon'] }} fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>

            <div id="my_dashboard_data_tables" class="row g-2 mb-3">
                <div class="grid lg:grid-cols-2 gap-4 mb-3">
                    <div class="rounded-xl shadow-sm hover-shadow transition overflow-hidden">
                        <div class="px-3 py-2" style="background: #D2DAFF; color: #2551A1">
                            <h4 class="text-xl font-bold text-center">
                                {{ __('sitelabel.Last30DaysSale') }}</h4>
                        </div>
                        <div class="p-4">
                            <div class="overflow-x-auto">
                                <div class="chart-container" style="position: relative; height: 300px;">
                                    <canvas id="Last30DaysSale"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="rounded-xl shadow-sm hover-shadow transition overflow-hidden">
                        <div class="px-3 py-2" style="background: #FFDBC7;color:#D07645">
                            <h4 class="text-xl font-bold text-center">
                                {{ __('sitelabel.Last30DaysExpense') }}</h4>
                        </div>
                        <div class="p-4">
                            <div class="overflow-x-auto">
                                <div class="chart-container" style="position: relative; height: 300px;">
                                    <canvas id="Last30DaysExpense"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="grid lg:grid-cols-2 gap-4 mb-3">
                    <div class="rounded-xl shadow-sm hover-shadow transition overflow-hidden">
                        <div class="px-1 py-1" style="background: #D2DAFF; color: #2551A1">
                            <h4 class="text-xl font-bold text-center">
                                {{ __('sitelabel.Notification') }}</h4>
                        </div>
                        <div class="p-4">
                            <div class="overflow-x-auto">
                                <div class="table-responsive" style="padding-bottom: 8px;">
                                    <table class="table datanew">
                                        <thead>
                                            <tr>
                                                <th>{{ __('sitelabel.SerialNumber') }}</th>
                                                <th>{{ __('sitelabel.Description') }}</th>
                                                <th>{{ __('sitelabel.Date') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($notifications as $item)
                                                <tr>
                                                    <td>{{ $loop->iteration }}</td>
                                                    <td>{{ $item->Description }}</td>
                                                    <td>{{ \Carbon\Carbon::parse($item->Date)->format('d-F-Y') }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="rounded-xl shadow-sm hover-shadow transition overflow-hidden">
                        <div class="px-1 py-1" style="background: #FFDBC7;color:#D07645">
                            <h4 class="text-xl font-bold text-center">{{ __('sitelabel.DailyCashLedger') }}
                            </h4>
                        </div>
                        <div class="p-4">
                            <div class="overflow-x-auto">
                                <div class="table-responsive" style="padding-bottom: 8px;">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>{{ __('sitelabel.SerialNumber') }}</th>
                                                <th>{{ __('sitelabel.Description') }}</th>
                                                <th style="text-align: right">{{ __('sitelabel.Debit') }}</th>
                                                <th style="text-align: right">{{ __('sitelabel.Credit') }}</th>
                                                <th style="text-align: right">{{ __('sitelabel.Balance') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                @php
                                                    $runningBalance = $todayOpeningBalance;
                                                @endphp
                                                <td style="text-align: center">1</td>
                                                <td>{{ __('sitelabel.OpeningBalance') }}</td>
                                                <td style="text-align: right">{{ number_format($todayOpeningBalance, 2) }}
                                                </td>
                                                <td style="text-align: right">0.00</td>
                                                <td style="text-align: right">
                                                    <strong>{{ number_format($runningBalance, 2) }}</strong>
                                                </td>
                                            </tr>
                                            <tr>
                                                @php
                                                    $runningBalance += $todayCashSale;
                                                @endphp
                                                <td style="text-align: center">2</td>
                                                <td>{{ __('sitelabel.CashSale') }}</td>
                                                <td style="text-align: right">{{ number_format($todayCashSale, 2) }}</td>
                                                <td style="text-align: right">0.00</td>
                                                <td style="text-align: right">
                                                    <strong>{{ number_format($runningBalance, 2) }}</strong>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="text-align: center">3</td>
                                                <td>{{ __('sitelabel.CreditSale') }}</td>
                                                <td style="text-align: right">{{ number_format($todayCreditSale, 2) }}
                                                </td>
                                                <td style="text-align: right">0.00</td>
                                                <td style="text-align: right">
                                                    <strong>{{ number_format($runningBalance, 2) }}</strong>
                                                </td>
                                            </tr>
                                            <tr>
                                                @php
                                                    $runningBalance -= $todayCashReturn;
                                                @endphp
                                                <td style="text-align: center">4</td>
                                                <td>{{ __('sitelabel.CashReturnSale') }}</td>
                                                <td style="text-align: right">{{ number_format($todayCashReturn, 2) }}
                                                </td>
                                                <td style="text-align: right">0.00</td>
                                                <td style="text-align: right">
                                                    <strong>{{ number_format($runningBalance, 2) }}</strong>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="text-align: center">5</td>
                                                <td>{{ __('sitelabel.CreditReturnSale') }}</td>
                                                <td style="text-align: right">{{ number_format($todayCreditReturn, 2) }}
                                                </td>
                                                <td style="text-align: right">0.00</td>
                                                <td style="text-align: right">
                                                    <strong>{{ number_format($runningBalance, 2) }}</strong>
                                                </td>
                                            </tr>
                                            <tr>
                                                @php
                                                    $runningBalance -= $todayBankCashDeposit;
                                                @endphp
                                                <td style="text-align: center">6</td>
                                                <td>{{ __('sitelabel.BankCashDeposit') }}</td>
                                                <td style="text-align: right">
                                                    {{ number_format($todayBankCashDeposit, 2) }}</td>
                                                <td style="text-align: right">0.00</td>
                                                <td style="text-align: right">
                                                    <strong>{{ number_format($runningBalance, 2) }}</strong>
                                                </td>
                                            </tr>
                                            <tr>
                                                @php
                                                    $runningBalance += $todayCustomerPayment;
                                                @endphp
                                                <td style="text-align: center">7</td>
                                                <td>{{ __('sitelabel.CustomerPayment') }}</td>
                                                <td style="text-align: right">
                                                    {{ number_format($todayCustomerPayment, 2) }}</td>
                                                <td style="text-align: right">0.00</td>
                                                <td style="text-align: right">
                                                    <strong>{{ number_format($runningBalance, 2) }}</strong>
                                                </td>
                                            </tr>
                                            <tr>
                                                @php
                                                    $runningBalance -= $todayStoreExpense;
                                                @endphp
                                                <td style="text-align: center">8</td>
                                                <td>{{ __('sitelabel.StoreExpense') }}</td>
                                                <td style="text-align: right">{{ number_format($todayStoreExpense, 2) }}
                                                </td>
                                                <td style="text-align: right">0.00</td>
                                                <td style="text-align: right">
                                                    <strong>{{ number_format($runningBalance, 2) }}</strong>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="grid lg:grid-cols-2 gap-4 mb-3">
                    <div class="rounded-xl shadow-sm hover-shadow transition overflow-hidden">
                        <div class="px-3 py-2" style="background: #D2DAFF; color: #2551A1">
                            <h4 class="text-xl font-bold text-center">
                                {{ __('sitelabel.SaleByQuantity') }}</h4>
                        </div>
                        <div class="p-4">
                            <div class="overflow-x-auto">
                                <div class="chart-container" style="position: relative; height: 300px;">
                                    <canvas id="SaleByQuantity"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="rounded-xl shadow-sm hover-shadow transition overflow-hidden">
                        <div class="px-3 py-2" style="background: #FFDBC7;color:#D07645">
                            <h4 class="text-xl font-bold text-center">
                                {{ __('sitelabel.SaleByNetAmount') }}</h4>
                        </div>
                        <div class="p-4">
                            <div class="overflow-x-auto">
                                <div class="chart-container" style="position: relative; height: 300px;">
                                    <canvas id="SaleByNetAmount"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="grid lg:grid-cols-2 gap-4 mb-3">
                    <div class="rounded-xl shadow-sm hover-shadow transition overflow-hidden">
                        <div class="px-3 py-2" style="background: #D2DAFF; color: #2551A1">
                            <h4 class="text-xl font-bold text-center">
                                {{ __('sitelabel.Last30DaysCategorySale') }}</h4>
                        </div>
                        <div class="p-4">
                            <div class="overflow-x-auto">
                                <div class="chart-container" style="position: relative; height: 300px;">
                                    <canvas id="categoryWiseSale"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="rounded-xl shadow-sm hover-shadow transition overflow-hidden">
                        <div class="px-3 py-2" style="background: #FFDBC7;color:#D07645">
                            <h4 class="text-xl font-bold text-center">
                                {{ __('sitelabel.Last30DaysBrandSale') }}</h4>
                        </div>
                        <div class="p-4">
                            <div class="overflow-x-auto">
                                <div class="chart-container" style="position: relative; height: 300px;">
                                    <canvas id="brandWiseSale"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="grid lg:grid-cols-2 gap-4 mb-3">
                    <div class="rounded-xl shadow-sm hover-shadow transition overflow-hidden">
                        <div class="px-3 py-2" style="background: #D2DAFF; color: #2551A1">
                            <h4 class="text-xl font-bold text-center">
                                {{ __('sitelabel.CashvsCreditSale') }}</h4>
                        </div>
                        <div class="p-4">
                            <div class="overflow-x-auto">
                                <div class="chart-container" style="position: relative; height: 300px;">
                                    <canvas id="CashvsCreditSale"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Success Modal -->
    <div id="successModal" class="modal fade" tabindex="-1" aria-labelledby="successModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title" id="successModalLabel">Success</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Day Closed Successfully</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
    </div>

    <!-- No Data Modal -->
    <div id="noDataModal" class="modal fade" tabindex="-1" aria-labelledby="noDataModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-warning text-white">
                    <h5 class="modal-title" id="noDataModalLabel">No Data Found</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>No data found for the selected date range and branch</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#closeDayForm').on('submit', function(e) {
                e.preventDefault();
                $('#txtCloseDateError').text('');
                $('#posBranchError').text('');
                var formData = new FormData(this);
                $.ajax({
                    url: '{{ url('/closedayprocess') }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.success) {
                            var myModal = new bootstrap.Modal(document.getElementById(
                                'successModal'));
                            myModal.show();
                            $('#closeDayForm')[0].reset();
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            var errors = xhr.responseJSON.errors;
                            if (errors.txtCloseDate) {
                                $('#txtCloseDateError').text(errors.txtCloseDate[0]);
                            }
                            if (errors.posBranch) {
                                $('#posBranchError').text(errors.posBranch[0]);
                            }
                        } else {
                            alert('An error occurred. Please try again.');
                        }
                    }
                });
            });
            $('#filterForm').on('submit', function(e) {
                e.preventDefault();

                // Client-side date validation
                var startDate = $('input[name="txtStartDate"]').val();
                var endDate = $('input[name="txtEndDate"]').val();
                
                if (startDate && endDate && new Date(startDate) > new Date(endDate)) {
                    alert('Start date must be before or equal to end date');
                    return;
                }

                var formData = new FormData(this);

                $.ajax({
                    url: '{{ url('/api/get-filtered-dashboard-data') }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.success) {
                            // Update card values
                            $('.card-amount[data-type="OpeningBalance"]').text(response.data.todayOpeningBalance);
                            $('.card-amount[data-type="CashSale"]').text(response.data.todayCashSale);
                            $('.card-amount[data-type="CreditSale"]').text(response.data.todayCreditSale);
                            $('.card-amount[data-type="BankCashDeposit"]').text(response.data.todayBankCashDeposit);
                            $('.card-amount[data-type="StoreExpense"]').text(response.data.todayStoreExpense);
                            $('.card-amount[data-type="CustomerPayment"]').text(response.data.todayCustomerPayment);
                            $('.card-amount[data-type="CashReturnSale"]').text(response.data.todayCashReturn);
                            $('.card-amount[data-type="CreditReturnSale"]').text(response.data.todayCreditReturn);
                            $('.card-amount[data-type="ScrapSale"]').text(response.data.todayScrapSale);
                            $('.card-amount[data-type="ClosingBalance"]').text(response.data.closingBalance);
                            $('.card-amount[data-type="StockInventory"]').text(response.data.stockInventory);
                        } else {
                            var noDataModal = new bootstrap.Modal(document.getElementById('noDataModal'));
                            noDataModal.show();
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            alert(xhr.responseJSON.message);
                        } else {
                            alert('An error occurred while filtering data. Please try again.');
                        }
                    }
                });
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            $('#cmbBranch, #posBranch').select2({
                theme: "bootstrap-5",
            });
            var table = $('.datanew');
            if ($.fn.DataTable.isDataTable(table)) {
                table.DataTable().destroy();
            }
            table.DataTable({
                pageLength: 5,
                lengthMenu: [
                    [5, 10, 25, 50, -1],
                    [5, 10, 25, 50, "All"]
                ],
                destroy: true,
                language: {
                    lengthMenu: "_MENU_ records per page",
                    zeroRecords: "No records found",
                    info: "Showing page _PAGE_ of _PAGES_",
                    infoEmpty: "No records available",
                    infoFiltered: "(filtered from _MAX_ total records)"
                }
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const salesData = @json($last30DaysSales);

            const days = salesData.map(item => item.Date);
            const amounts = salesData.map(item => parseFloat(item.TotalAmount));

            const saleChartData = {
                labels: days,
                datasets: [{
                    label: 'Sales (Last 30 Days)',
                    data: amounts,
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 2,
                    tension: 0.3,
                    fill: true,
                    spanGaps: false
                }]
            };

            const saleChartConfig = {
                type: 'line',
                data: saleChartData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false,
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const amount = new Intl.NumberFormat('en-US', {
                                        style: 'currency',
                                        currency: 'USD'
                                    }).format(context.raw);
                                    return `Sales: ${amount}`;
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            title: {
                                display: true,
                                text: 'Date',
                            },
                            ticks: {
                                maxRotation: 45,
                                minRotation: 45
                            },
                            grid: {
                                display: false // Hide vertical grid lines
                            }
                        },
                        y: {
                            title: {
                                display: true,
                                text: 'Sales ($)',
                            },
                            beginAtZero: true,
                            ticks: {
                                callback: function(value) {
                                    return new Intl.NumberFormat('en-US', {
                                        style: 'currency',
                                        currency: 'USD',
                                        minimumFractionDigits: 0,
                                        maximumFractionDigits: 0
                                    }).format(value);
                                }
                            }
                        }
                    }
                }
            };

            new Chart(
                document.getElementById('Last30DaysSale'),
                saleChartConfig
            );
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const expenseData = @json($last30daysExpense);

            const day = expenseData.map(item => item.Date);
            const amounts = expenseData.map(item => parseFloat(item.TotalAmount));

            const expenseChartData = {
                labels: day,
                datasets: [{
                    label: 'Expense (Last 30 Days)',
                    data: amounts,
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 2,
                    tension: 0.3,
                    fill: true,
                    spanGaps: false
                }]
            };

            const expenseChartConfig = {
                type: 'line',
                data: expenseChartData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false,
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const amount = new Intl.NumberFormat('en-US', {
                                        style: 'currency',
                                        currency: 'USD'
                                    }).format(context.raw);
                                    return `Expenses: ${amount}`;
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            title: {
                                display: true,
                                text: 'Date',
                            },
                            ticks: {
                                maxRotation: 45,
                                minRotation: 45
                            },
                            grid: {
                                display: false // Hide vertical grid lines
                            }
                        },
                        y: {
                            title: {
                                display: true,
                                text: 'Expenses ($)',
                            },
                            beginAtZero: true,
                            ticks: {
                                callback: function(value) {
                                    return new Intl.NumberFormat('en-US', {
                                        style: 'currency',
                                        currency: 'USD',
                                        minimumFractionDigits: 0,
                                        maximumFractionDigits: 0
                                    }).format(value);
                                }
                            }
                        }
                    }
                }
            };

            new Chart(
                document.getElementById('Last30DaysExpense'),
                expenseChartConfig
            );
        });
    </script>

    <script>
        $(document).ready(function() {
            $('#example').DataTable({
                "pagingType": "full_numbers",
                "language": {
                    "lengthMenu": "_MENU_ records per page",
                    "zeroRecords": "No records found",
                    "info": "Showing page _PAGE_ of _PAGES_",
                    "infoEmpty": "No records available",
                    "infoFiltered": "(filtered from _MAX_ total records)"
                }
            });
        });

        document.addEventListener('DOMContentLoaded', function() {
            // Data for Last 7 Days Sale By NetAmount (Line Chart)
            const last7daysSaleData = @json($last7daysSaleByNetAmount);

            // Extract dates and total amounts from the data
            const dateLabels = last7daysSaleData.map(item => item.Date);
            const dailyTotalAmounts = last7daysSaleData.map(item => item.TotalAmount);

            const saleByNetAmountChartData = {
                labels: dateLabels,
                datasets: [{
                    label: 'Daily Sales (Last 7 Days)',
                    data: dailyTotalAmounts,
                    backgroundColor: 'rgba(208, 118, 69, 0.2)', // Light version of your theme color #D07645
                    borderColor: 'rgba(208, 118, 69, 1)', // Your theme color #D07645
                    borderWidth: 2,
                    tension: 0.3, // Smoothing effect for the line
                    fill: true,
                }]
            };

            const saleByNetAmountChartConfig = {
                type: 'line',
                data: saleByNetAmountChartData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: true,
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `Sales: ${context.raw}`;
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            title: {
                                display: true,
                                text: 'Date',
                            }
                        },
                        y: {
                            title: {
                                display: true,
                                text: 'Net Amount',
                            },
                            beginAtZero: true,
                        }
                    }
                }
            };

            new Chart(
                document.getElementById('SaleByNetAmount'),
                saleByNetAmountChartConfig
            );

            // Data for Last 7 Days Sale By Quantity (Bar Chart)
            const last7daysQuantitySaleData = @json($last7daysSaleByQuantity);

            // Extract dates and total amounts from the data
            const dateLabel = last7daysQuantitySaleData.map(item => item.Date);
            const dailyTotalQuantity = last7daysQuantitySaleData.map(item => item.TotalQuantity);

            const saleByQuantityChartData = {
                labels: dateLabel,
                datasets: [{
                    label: 'Daily Sales (Last 7 Days)',
                    data: dailyTotalQuantity,
                    backgroundColor: 'rgba(208, 118, 69, 0.5)',
                    borderColor: 'rgba(208, 118, 69, 1)',
                    borderWidth: 1,
                }]
            };

            const saleByQuantityChartConfig = {
                type: 'bar',
                data: saleByQuantityChartData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: true,
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `Quantity: ${context.raw}`;
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            title: {
                                display: true,
                                text: 'Date',
                            }
                        },
                        y: {
                            title: {
                                display: true,
                                text: 'Quantity',
                            },
                            beginAtZero: true,
                        }
                    }
                }
            };

            new Chart(
                document.getElementById('SaleByQuantity'),
                saleByQuantityChartConfig
            );

            // Data for Last 7 Days Cash vs Credit (Donut Chart)
            const last7daysCashvsCreditData = @json($last7daysCashvsCredit);

            // Calculate total cash and credit sales across all 7 days
            const totalCashSales = last7daysCashvsCreditData.reduce((sum, item) => sum + parseFloat(item.CashSale),
                0);
            const totalCreditSales = last7daysCashvsCreditData.reduce((sum, item) => sum + parseFloat(item
                .CreditSale), 0);

            const cashVsCreditData = {
                labels: ['Cash Sales', 'Credit Sales'],
                datasets: [{
                    label: 'Cash vs Credit Sales',
                    data: [totalCashSales, totalCreditSales],
                    backgroundColor: [
                        'rgba(208, 118, 69, 0.8)',
                        'rgba(69, 118, 208, 0.8)'
                    ],
                    borderColor: [
                        'rgba(208, 118, 69, 1)',
                        'rgba(69, 118, 208, 1)'
                    ],
                    borderWidth: 1
                }]
            };

            const cashVsCreditConfig = {
                type: 'doughnut',
                data: cashVsCreditData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                            labels: {
                                boxWidth: 20
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.raw || 0;
                                    const total = context.dataset.data.reduce((sum, val) => sum + val, 0);
                                    const percentage = ((value / total) * 100).toFixed(1);
                                    return `${label}: $${value.toFixed(2)} (${percentage}%)`;
                                }
                            }
                        }
                    },
                }
            };

            new Chart(
                document.getElementById('CashvsCreditSale'),
                cashVsCreditConfig
            );
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Utility function to generate random colors
            function generateRandomColors(count) {
                const colors = [];
                for (let i = 0; i < count; i++) {
                    const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0')}`;
                    colors.push(randomColor);
                }
                return colors;
            }

            // Process last30DaysSalesbyCategory data
            const categorySales = @json($last30DaysSalesbyCategory);
            const categoryTotals = {};
            categorySales.forEach(item => {
                if (item.Category) { // Check if Category is not null
                    categoryTotals[item.Category] = (categoryTotals[item.Category] || 0) + parseFloat(item
                        .TotalQuantity);
                }
            });

            const categoryData = {
                labels: Object.keys(categoryTotals),
                datasets: [{
                    data: Object.values(categoryTotals),
                    backgroundColor: generateRandomColors(Object.keys(categoryTotals).length),
                    borderWidth: 0,
                }]
            };

            const categoryConfig = {
                type: 'pie',
                data: categoryData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                padding: 20,
                                usePointStyle: true,
                                pointStyle: 'circle',
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.raw || 0;
                                    return `${label}: ${value} units`;
                                }
                            }
                        }
                    }
                }
            };

            new Chart(
                document.getElementById('categoryWiseSale'),
                categoryConfig
            );

            // Process last30DaysSalesbyBrand data
            const brandSales = @json($last30DaysSalesbyBrand);
            const brandTotals = {};
            brandSales.forEach(item => {
                if (item.Brand) { // Check if Brand is not null
                    brandTotals[item.Brand] = (brandTotals[item.Brand] || 0) + parseFloat(item
                        .TotalQuantity);
                }
            });

            const brandData = {
                labels: Object.keys(brandTotals),
                datasets: [{
                    data: Object.values(brandTotals),
                    backgroundColor: generateRandomColors(Object.keys(brandTotals).length),
                    borderWidth: 0,
                }]
            };

            const brandConfig = {
                type: 'pie',
                data: brandData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                padding: 20,
                                usePointStyle: true,
                                pointStyle: 'circle',
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.raw || 0;
                                    return `${label}: ${value} units`;
                                }
                            }
                        }
                    }
                }
            };

            new Chart(
                document.getElementById('brandWiseSale'),
                brandConfig
            );
        });
    </script>
@endsection