@extends('backend.layouts.master')
@section('page-title', 'Dashboard')
@push('css')
    <style>
        .order-card {
            color: #fff;
        }

        .bg-c-blue {
            background: linear-gradient(45deg, #4099ff, #73b4ff);
        }

        .bg-c-green {
            background: linear-gradient(45deg, #2ed8b6, #59e0c5);
        }

        .bg-c-yellow {
            background: linear-gradient(45deg, #FFB64D, #ffcb80);
        }

        .bg-c-pink {
            background: linear-gradient(45deg, #FF5370, #ff869a);
        }


        .card {
            border-radius: 25px;
            -webkit-box-shadow: 0 1px 2.94px 0.06px rgba(4, 26, 55, 0.16);
            box-shadow: 0 1px 2.94px 0.06px rgba(4, 26, 55, 0.16);
            border: none;
            margin-bottom: 30px;
            -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

        .card .card-block {
            padding: 25px;
        }

        .order-card i {
            font-size: 26px;
        }

        .f-left {
            float: left;
        }

        .f-right {
            float: right;
        }
    </style>
@endpush

@section('content')
    @php

        $total_invoice = App\Models\Invoice::sum('total_amount');
        $total_return = App\Models\ReturnTbl::sum('total_return');
        $total_purchase = App\Models\Purchase::sum('total_amount');
        $return_purchase = App\Models\ReturnPurchase::sum('total_return');

    @endphp
    <div class=" ms-3" style="margin-left:20px;margin-top:90px;margin-bottom: 50px;">
        <form action="{{ route('dashboard') }}" method="GET" id="filterForm">
            <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-10 filter_design">
                    <ul class="nav justify-content-end" id="filterNav">
                        <li class="nav-item">
                            <a class="nav-link active" href="#" data-filter="Today">Today</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" data-filter="Yesterday">Yesterday</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" data-filter="This-week">This Week</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" data-filter="This-month">This Month</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" data-filter="This-year">This Year</a>
                        </li>
                    </ul>
                </div>
            </div>
        </form>
        <div class="row mt-3">
                <div class="col-md-4 col-xl-3">
                    <div class="card order-card before_work_height" style="background: #fcfcfd">
                        <div class="card-block">
                            
                            <h6 class="text-left" style="font-size: 18px"><span class="filterName"></span> Sale</h6>
                            <h4 class="text-left" id="saleAmount" style="font-size: 23px"><span>{{ empty(get_setting('com_currency')) ? : get_setting('com_currency') }}
                                    {{ number_format($data['sale'], 0) }} </span>
                            </h4>
                        </div>
                    </div>
                </div>
                @if (check_permission('dashboard.dashboard'))
                <div class="col-md-4 col-xl-3">
                    <div class="card order-card before_work_height2" style="background: #fcfcfd">
                        <div class="card-block">
                            <h6 class="text-left" style="font-size: 18px"><span class="filterName"></span> Purchase</h6>
                            <h4 class="text-left" id="purchaseAmount" style="font-size: 23px"><span>{{ empty(get_setting('com_currency')) ? : get_setting('com_currency') }}
                                    {{ number_format($data['purchase'], 0) }} </span>
                            </h4>
                        </div>
                    </div>
                </div>
                @endif
                <div class="col-md-4 col-xl-3">
                    <div class="card order-card before_work_height3" style="background: #fcfcfd">
                        <div class="card-block">
                            <h6 class="text-left" style="font-size: 18px"><span class="filterName"></span> Expense</h6>
                            <h4 class="text-left" id="expenseAmount" style="font-size: 23px"><span>{{ empty(get_setting('com_currency')) ? : get_setting('com_currency') }}
                                    {{ number_format($data['expense'], 2) }} </span>
                            </h4>
                        </div>
                    </div>
                </div>
                @if (check_permission('dashboard.dashboard'))
                <div class="col-md-4 col-xl-3">
                    <div class="card order-card before_work_height4 " style="background: #fcfcfd">
                        <div class="card-block">
                            <h6 class="text-left" style="font-size: 18px"><span class="filterName"></span> Profit</h6>
                            <h4 class="text-left"  id="profitAmount" style="font-size: 23px"><span>{{ empty(get_setting('com_currency')) ? : get_setting('com_currency') }}
                                    {{ number_format($data['profit'], 2) }}</span>
                            </h4>
                        </div>
                    </div>
                </div>
                @endif
        </div>
        <div class="row">
            {{-- 1st col --}}
            <div class="col-md-4 col-xl-4">
                <div class="card order-card" style="background: #fcfcfd">
                    @if (check_permission('dashboard.dashboard'))
                    <div class="card-block">
                        <h6 class="text-left" style="font-size: 18px">Total Purchase Due</h6>
                        <h4 class="text-left" style="font-size: 23px"><span>{{ empty(get_setting('com_currency')) ? : get_setting('com_currency') }}
                                {{ number_format($total_pur_due, 0) }} </span>
                        </h4>
                    </div>
                    @endif
                    @if (check_permission('dashboard.dashboard'))
                    <p class="before_work"></p>
                    <div class="card-block d-none d-md-block">
                        <h6 class="text-left" style="font-size: 18px">Total Purchase Amount</h6>
                        <h4 class="text-left" style="font-size: 23px"><span>{{ empty(get_setting('com_currency')) ? : get_setting('com_currency') }}
                                {{ number_format($total_pur_amount, 0) }} </span>
                        </h4>
                    </div>
                    @endif
                    {{-- mobile view --}}
                    <div class="card-block d-block d-md-none">
                        <h6 class="text-left" style="font-size: 18px">Total Sales Due</h6>
                        <h4 class="text-left" style="font-size: 23px"><span>{{ empty(get_setting('com_currency')) ? : get_setting('com_currency') }}
                                {{ number_format($total_sale_due, 0) }} </span>
                        </h4>
                    </div>
                    <p class="before_work_orange"></p>
                    <div class="card-block d-none d-md-block">
                        <h6 class="text-left" style="font-size: 18px">Total Product</h6>
                        <h4 class="text-left" style="font-size: 23px"><span>
                                {{ number_format($total_product, 0) }} </span>
                        </h4>
                    </div>
                    {{-- mobile view --}}
                    <div class="card-block d-block d-md-none">
                        <h6 class="text-left" style="font-size: 18px">Total Return Amount</h6>
                        <h4 class="text-left" style="font-size: 23px"><span>{{ empty(get_setting('com_currency')) ? : get_setting('com_currency') }}
                                {{ number_format($total_return_amount, 0) }} </span>
                        </h4>
                    </div>
                </div>
            </div>
            {{-- 2nd col --}}
            <div class="col-md-4 col-xl-4">
                <div class="card order-card" style="background: #fcfcfd">
                    <div class="card-block d-none d-md-block">
                        <h6 class="text-left" style="font-size: 18px">Total Sales Due</h6>
                        <h4 class="text-left" style="font-size: 23px"><span>{{ empty(get_setting('com_currency')) ? : get_setting('com_currency') }}
                                {{ number_format($total_sale_due, 0) }} </span>
                        </h4>
                    </div>
                    {{-- mobile view --}}
                    <div class="card-block  d-block d-md-none">
                        <h6 class="text-left" style="font-size: 18px">Total Purchase Amount</h6>
                        <h4 class="text-left" style="font-size: 23px"><span>{{ empty(get_setting('com_currency')) ? : get_setting('com_currency') }}
                                {{ number_format($total_pur_amount, 0) }} </span>
                        </h4>
                    </div>
                    <p class="before_work2"></p>
                    <div class="card-block ">
                        <h6 class="text-left" style="font-size: 18px">Total Sales Amount</h6>
                        <h4 class="text-left" style="font-size: 23px"><span>{{ empty(get_setting('com_currency')) ? : get_setting('com_currency') }}
                                {{ number_format($total_sale, 0) }} </span>
                        </h4>
                    </div>
                    {{-- mobile view --}}
                    <div class="card-block  d-block d-md-none">
                        <h6 class="text-left" style="font-size: 18px">Available Stock Amount</h6>
                        <h4 class="text-left" style="font-size: 23px"><span>{{ empty(get_setting('com_currency')) ? : get_setting('com_currency') }}
                        </h4>
                    </div>
                    <p class="before_work_green"></p>
                    <div class="card-block d-none d-md-block">
                        <h6 class="text-left" style="font-size: 18px">Total Customer </h6>
                        <h4 class="text-left" style="font-size: 23px"><span>
                                {{ number_format($total_customer, 0) }} </span>
                        </h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-xl-4">
                <div class="card order-card" style="background: #fcfcfd;border-radius:20px">
                    <div class="card-block d-none d-md-block">
                        <h6 class="text-left" style="font-size: 18px">Total Return Amount</h6>
                        <h4 class="text-left" style="font-size: 23px"><span>{{ empty(get_setting('com_currency')) ? : get_setting('com_currency') }}
                                {{ number_format($total_return_amount, 0) }} </span>
                        </h4>
                    </div>
                    {{-- mobile view --}}
                    <div class="card-block  d-block d-md-none">
                        <h6 class="text-left" style="font-size: 18px">Total Product</h6>
                        <h4 class="text-left" style="font-size: 23px"><span>
                                {{ number_format($total_product, 0) }} </span>
                        </h4>
                    </div>
                    <p class="before_work3"></p>
                    <div class="card-block d-none d-md-block">
                        <h6 class="text-left" style="font-size: 18px">Available Stock Amount</h6>
                        <h4 class="text-left" style="font-size: 23px"><span>{{ empty(get_setting('com_currency')) ? : get_setting('com_currency') }}
                                {{ number_format($totalPrice, 0) }} </span>
                        </h4>
                    </div>
                    {{-- mobile view --}}
                    <div class="card-block  d-block d-md-none">
                        <h6 class="text-left" style="font-size: 18px">Total Customer</h6>
                        <h4 class="text-left" style="font-size: 23px"><span>
                                {{ number_format($total_customer, 0) }} </span>
                        </h4>
                    </div>
                    <p class="before_work_last"></p>
                    <div class="card-block">
                        <h6 class="text-left" style="font-size: 18px">Total Invoice </h6>
                        <h4 class="text-left" style="font-size: 23px"><span>
                                {{ number_format($total_invoice_count, 0) }} </span>
                        </h4>
                    </div>
                </div>
            </div>
        </div> 
    </div>

@endsection
@push('js')
    <script>
        $(document).ready(function() {
            $('#filterSelect').change(function() {
                $('#filterForm').submit();
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            // Handle filter link clicks
            $('#filterNav .nav-link').click(function(e) {
                e.preventDefault(); // Prevent default anchor behavior

                // Remove 'active' class from all links
                $('#filterNav .nav-link').removeClass('active');

                // Add 'active' class to the clicked link
                $(this).addClass('active');

                // Get the selected filter from data-filter attribute
                let selectedFilter = $(this).data('filter');
                console.log('Selected Filter:', selectedFilter);

            // Update the filter name dynamically in the UI
            $('.filterName').text(selectedFilter.charAt(0).toUpperCase() + selectedFilter.slice(1));

                // Perform an AJAX request to apply the filter
                $.ajax({
                    url: "{{ route('your.filter.route') }}", // Replace with your route
                    type: "GET",
                    data: {
                        filter: selectedFilter
                    },
                    success: function(response) {
                        // Handle the response (update the UI dynamically if needed)
                        // console.log('Filter applied:', response);
                        $('#saleAmount').text('৳ ' + response.sale.toLocaleString());
                        $('#purchaseAmount').text('৳ ' + response.purchase.toLocaleString());
                        $('#expenseAmount').text('৳ ' + response.expense.toLocaleString());
                        $('#profitAmount').text('৳ ' + response.profit.toLocaleString());
                        },
                    error: function(xhr) {
                        console.log('Error:', xhr);
                    }
                });
            });
        });
    </script>
@endpush