@extends('layouts.master')
@section('title')
    Dashboard
@endsection
@section('css')
    <style>
        #list-syncs li {
            list-style: none;
            padding: 10px;
            border-bottom: 1px solid #f1f1f1;
        }
    </style>
@endsection
@section('content')
    @can('view dashboard')
        <div class="row">
            <div class="col">
                <div class="h-100">
                    <div class="row mb-3 pb-1">
                        <div class="col-12">
                            <div class="d-flex align-items-lg-center flex-lg-row flex-column">
                                <div class="flex-grow-1">
                                    <h4 class="fs-16 mb-1">{{ $greeting }}, {{ Auth::user()->name }}!</h4>
                                    <p class="text-muted mb-0">Here's what's happening with your business
                                        today.</p>
                                </div>
                            </div><!-- end card header -->
                        </div>
                        <!--end col-->
                    </div>
                    <!--end row-->

                    @can('view cash balance')
                        <div class="row">
                            <div class="col-xl-3 col-md-6">
                                <!-- card -->
                                <div class="card card-animate">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-grow-1 overflow-hidden">
                                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                    Cash Balance</p>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-end justify-content-between mt-4">
                                            <div>
                                                <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                                    <span class="counter-value"
                                                        data-target="{{ $cashBalance['cashInHand'] }}">0</span>
                                                </h4>
                                            </div>
                                            <div class="avatar-sm flex-shrink-0">
                                                <span class="avatar-title bg-soft-primary rounded fs-3">
                                                    <i class="las la-money-bill text-primary"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </div><!-- end col -->
                            <div class="col-xl-3 col-md-6">
                                <!-- card -->
                                <div class="card card-animate">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-grow-1 overflow-hidden">
                                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                    Bank Balance</p>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-end justify-content-between mt-4">
                                            <div>
                                                <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                                    <span class="counter-value"
                                                        data-target="{{ $cashBalance['bankBalance'] }}">0</span>
                                                </h4>
                                            </div>
                                            <div class="avatar-sm flex-shrink-0">
                                                <span class="avatar-title bg-soft-primary rounded fs-3">
                                                    <i class="las la-money-bill text-primary"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </div><!-- end col -->
                        </div>
                    @endcan

                    <div class="row">
                        <!-- dashboard init -->
                        <div class="col-xl-3 col-md-6">
                            <!-- card -->
                            <a href="/admin/sales">
                                <div class="card card-animate">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-grow-1 overflow-hidden">
                                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                    Total Sales / Amount</p>
                                            </div>
                                            {{-- <div class="flex-shrink-0">
                                <h5 class="text-success fs-14 mb-0">
                                    <i class="ri-arrow-right-up-line fs-13 align-middle"></i>
                                    +16.24 %
                                </h5>
                            </div> --}}
                                        </div>
                                        <div class="d-flex align-items-end justify-content-between mt-4">
                                            <div>
                                                <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                                    <span class="counter-value" data-target="{{ $totalSalesCount }}">0</span> /
                                                    <span class="counter-value" data-target="{{ $totalSalesAmt }}">0</span>
                                                </h4>
                                            </div>
                                            <div class="avatar-sm flex-shrink-0">
                                                <span class="avatar-title bg-soft-primary rounded fs-3">
                                                    <i class="las la-shopping-cart text-primary"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </a>
                        </div><!-- end col -->

                        <div class="col-xl-3 col-md-6">
                            <!-- card -->
                            <a href="/admin/sales-return">
                                <div class="card card-animate">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-grow-1 overflow-hidden">
                                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                    Total Sales Return / Amount</p>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-end justify-content-between mt-4">
                                            <div>
                                                <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                                    <span class="counter-value"
                                                        data-target="{{ $totalSalesReturnCount }}">0</span> /
                                                    <span class="counter-value"
                                                        data-target="{{ $totalSalesReturnAmt }}">0</span>
                                                </h4>
                                            </div>
                                            <div class="avatar-sm flex-shrink-0">
                                                <span class="avatar-title bg-soft-primary rounded fs-3">
                                                    <i class="las la-shopping-cart text-primary"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </a>
                        </div><!-- end col -->

                        <div class="col-xl-3 col-md-6">
                            <!-- card -->
                            <a href="/admin/purchase">
                                <div class="card card-animate">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-grow-1 overflow-hidden">
                                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                    Total Purchase / Amount</p>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-end justify-content-between mt-4">
                                            <div>
                                                <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                                    <span class="counter-value" data-target="{{ $totalPurchaseCount }}">0</span>
                                                    /
                                                    <span class="counter-value" data-target="{{ $totalPurchaseAmt }}">0</span>
                                                </h4>
                                            </div>
                                            <div class="avatar-sm flex-shrink-0">
                                                <span class="avatar-title bg-soft-primary rounded fs-3">
                                                    <i class="las la-shopping-cart text-primary"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </a>
                        </div><!-- end col -->

                        <div class="col-xl-3 col-md-6">
                            <!-- card -->
                            <a href="/admin/purchase-return">
                                <div class="card card-animate">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-grow-1 overflow-hidden">
                                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                    Total Purchase Return / Amount</p>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-end justify-content-between mt-4">
                                            <div>
                                                <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                                    <span class="counter-value"
                                                        data-target="{{ $totalPurchaseReturnCount }}">0</span> /
                                                    <span class="counter-value"
                                                        data-target="{{ $totalPurchaseReturnAmt }}">0</span>
                                                </h4>
                                            </div>
                                            <div class="avatar-sm flex-shrink-0">
                                                <span class="avatar-title bg-soft-primary rounded fs-3">
                                                    <i class="las la-shopping-cart text-primary"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </a>
                        </div><!-- end col -->
                    </div> <!-- end row-->
                    <div class="row">
                        <div class="col-xl-3 col-md-6">
                            <!-- card -->
                            <a href="/admin/receipt">
                                <div class="card card-animate">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-grow-1 overflow-hidden">
                                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                    Total Receipt / Amount</p>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-end justify-content-between mt-4">
                                            <div>
                                                <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                                    <span class="counter-value"
                                                        data-target="{{ $totalReceiptCount }}">0</span>
                                                    /
                                                    <span class="counter-value" data-target="{{ $totalReceiptAmt }}">0</span>
                                                </h4>
                                            </div>
                                            <div class="avatar-sm flex-shrink-0">
                                                <span class="avatar-title bg-soft-primary rounded fs-3">
                                                    <i class="las la-shopping-cart text-primary"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </a>
                        </div><!-- end col -->

                        <div class="col-xl-3 col-md-6">
                            <!-- card -->
                            <a href="/admin/payment">
                                <div class="card card-animate">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-grow-1 overflow-hidden">
                                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                    Total Payment / Amount</p>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-end justify-content-between mt-4">
                                            <div>
                                                <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                                    <span class="counter-value"
                                                        data-target="{{ $totalPaymentCount }}">0</span> /
                                                    <span class="counter-value" data-target="{{ $totalPaymentAmt }}">0</span>
                                                </h4>
                                            </div>
                                            <div class="avatar-sm flex-shrink-0">
                                                <span class="avatar-title bg-soft-primary rounded fs-3">
                                                    <i class="las la-shopping-cart text-primary"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </a>
                        </div><!-- end col -->

                        <div class="col-xl-3 col-md-6">
                            <!-- card -->
                            <a href="/admin/contra">
                                <div class="card card-animate">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-grow-1 overflow-hidden">
                                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                    Total Contra / Amount</p>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-end justify-content-between mt-4">
                                            <div>
                                                <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                                    <span class="counter-value"
                                                        data-target="{{ $totalContraCount }}">0</span> /
                                                    <span class="counter-value" data-target="{{ $totalContraAmt }}">0</span>
                                                </h4>
                                            </div>
                                            <div class="avatar-sm flex-shrink-0">
                                                <span class="avatar-title bg-soft-primary rounded fs-3">
                                                    <i class="las la-shopping-cart text-primary"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </a>
                        </div><!-- end col -->

                        <div class="col-xl-3 col-md-6">
                            <!-- card -->
                            <a href="/admin/journal">
                                <div class="card card-animate">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-grow-1 overflow-hidden">
                                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                    Total Journal / Amount</p>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-end justify-content-between mt-4">
                                            <div>
                                                <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                                    <span class="counter-value"
                                                        data-target="{{ $totalJournalCount }}">0</span> /
                                                    <span class="counter-value" data-target="{{ $totalJournalAmt }}">0</span>
                                                </h4>
                                            </div>
                                            <div class="avatar-sm flex-shrink-0">
                                                <span class="avatar-title bg-soft-primary rounded fs-3">
                                                    <i class="las la-shopping-cart text-primary"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </a>
                        </div><!-- end col -->
                    </div>
                    <div class="row">
                        <div class="col-xl-3 col-md-6">
                            <!-- card -->
                            <a href="/admin/expense">
                                <div class="card card-animate">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-grow-1 overflow-hidden">
                                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                    Total Expense / Amount</p>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-end justify-content-between mt-4">
                                            <div>
                                                <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                                    <span class="counter-value"
                                                        data-target="{{ $totalExpenseCount }}">0</span> /
                                                    <span class="counter-value" data-target="{{ $totalExpenseAmt }}">0</span>
                                                </h4>
                                            </div>
                                            <div class="avatar-sm flex-shrink-0">
                                                <span class="avatar-title bg-soft-primary rounded fs-3">
                                                    <i class="las la-shopping-cart text-primary"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </a>
                        </div><!-- end col -->

                        <div class="col-xl-3 col-md-6">
                            <!-- card -->
                            <a href="/admin/stock-ledger?type=warning">
                                <div class="card card-animate">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-grow-1 overflow-hidden">
                                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                    Stock Warning Level</p>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-end justify-content-between mt-4">
                                            <div>
                                                <h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value"
                                                        data-target="{{ $warning }}">0</span>
                                                </h4>
                                            </div>
                                            <div class="avatar-sm flex-shrink-0">
                                                <span class="avatar-title bg-soft-warning rounded fs-3">
                                                    <i class="bx bx-border-all text-warning"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </a>
                        </div><!-- end col -->

                        <div class="col-xl-3 col-md-6">
                            <!-- card -->
                            <a href="/admin/stock-ledger?type=critical">
                                <div class="card card-animate">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-grow-1 overflow-hidden">
                                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                    Stock Critical Level</p>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-end justify-content-between mt-4">
                                            <div>
                                                <h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value"
                                                        data-target="{{ $critical }}">0</span></h4>
                                            </div>
                                            <div class="avatar-sm flex-shrink-0">
                                                <span class="avatar-title bg-soft-danger rounded fs-3">
                                                    <i class="bx bx-border-all text-danger"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </a>
                        </div><!-- end col -->
                    </div> <!-- end row-->

                </div> <!-- end .h-100-->

            </div> <!-- end col -->
        </div>
        @if ($currentFinancial->mybuss == 1 && $currentFinancial->software_type == 'mybuss')
            <div class="row">
                <div class="col-xl-4 col-md-4">
                    <div class="card">
                        <div class="card-header align-items-center d-flex">
                            <h4 class="card-title mb-0 flex-grow-1">Mybuss Sync Check</h4>
                        </div><!-- end card header -->
                        <div class="card-body">
                            <p class="text-muted">Click the button to check your mybuss syncs are correct &nbsp;<button
                                    class="btn btn-sm btn-primary" id="checkSync"> Check</button></p>
                            <div class="live-preview">
                                <ul class="list-group" id="list-syncs">
                                </ul>
                            </div>
                        </div><!-- end card-body -->
                    </div>
                </div>
                <div class="col-xl-4 col-md-4">
                    <div class="card">
                        <div class="card-header align-items-center d-flex">
                            <h4 class="card-title mb-0 flex-grow-1">Rectify Cancelled Vouchers</h4>
                        </div><!-- end card header -->
                        <div class="card-body">
                            <p class="text-muted">Click the button to check your Rectify syncs &nbsp;<button
                                    class="btn btn-sm btn-primary" id="rectifySync"> Check</button></p>
                            <div class="live-preview" id="rectify-result">

                            </div>
                        </div><!-- end card-body -->
                    </div>
                </div>
                <div class="col-xl-4 col-md-4">
                    <div class="card">
                        <div class="card-header align-items-center d-flex">
                            <h4 class="card-title mb-0 flex-grow-1">Check amount mismatch</h4>
                        </div><!-- end card header -->
                        <div class="card-body">
                            <p class="text-muted">Click the button to check amount mismatch &nbsp;<button
                                    class="btn btn-sm btn-primary" id="rectifyAmount"> Check</button></p>
                            <div class="live-preview" id="rectify-amount-result">

                            </div>
                        </div><!-- end card-body -->
                    </div>
                </div>
                <div class="col-xl-4 col-md-4">
                    <div class="card">
                        <div class="card-header align-items-center d-flex">
                            <h4 class="card-title mb-0 flex-grow-1">Repair amount mismatch</h4>
                        </div><!-- end card header -->
                        <div class="card-body">
                            <p class="text-muted">Click the button to repair amount mismatch &nbsp;<button
                                    class="btn btn-sm btn-primary" id="rectifyMissMatch"> Repair</button></p>
                            <div class="live-preview" id="rectify-missmatch-result">

                            </div>
                        </div><!-- end card-body -->
                    </div>
                </div>
            </div>
        @else
            <div class="row">
                <div class="col-xl-4 col-md-4">
                    <div class="card">
                        <div class="card-header align-items-center d-flex">
                            <h4 class="card-title mb-0 flex-grow-1">Check amount mismatch</h4>
                        </div><!-- end card header -->
                        <div class="card-body">
                            <p class="text-muted">Click the button to check amount mismatch &nbsp;<button
                                    class="btn btn-sm btn-primary" id="rectifyAmount"> Check</button></p>
                            <div class="live-preview" id="rectify-amount-result">

                            </div>
                        </div><!-- end card-body -->
                    </div>
                </div>
            </div>
        @endif
    @else
        <div class="row">
            <div class="col">
                <div class="h-100">
                    <div class="row mb-3 pb-1">
                        <div class="col-12">
                            <div class="d-flex align-items-lg-center flex-lg-row flex-column">
                                <div class="flex-grow-1">
                                    <h4 class="fs-16 mb-1">{{ $greeting }}, {{ Auth::user()->name }}!</h4>
                                    <p class="text-muted mb-0">Here's what's happening with your business
                                        today.</p>
                                </div>
                            </div><!-- end card header -->
                        </div>
                        <!--end col-->
                    </div>
                </div>
            </div>
        </div>
    @endcan
@endsection
@section('script')
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('#checkSync').click(function() {
                $('#list-syncs').empty();
                var placeholder =
                    `<li><span class="placeholder col-6"></span></li>
                        <li><span class="placeholder col-6"></span></li>
                        <li><span class="placeholder col-6"></span></li>
                        <li><span class="placeholder col-6"></span></li>`;
                $('#list-syncs').append(placeholder);
                $.ajax({
                    url: '/admin/sync_counts',
                    type: 'GET',
                    success: function(data) {
                        if (data.status) {
                            $('#list-syncs').empty();
                            $.each(data.data, function(key, value) {
                                var key = key.replace(/_/g, ' ');
                                key = key.charAt(0).toUpperCase() + key.slice(1);
                                var badge = '';
                                if (value > 0) {
                                    badge = `<span class="badge bg-danger">SYNC</span>`;
                                } else {
                                    badge = `<span class="badge bg-success">OK</span>`;
                                }
                                var li = `<li class="list-group-item d-flex justify-content-between align-items-center">
                                        ${key} ${badge}
                                    </li>`;
                                $('#list-syncs').append(li);
                            });
                        } else {
                            alert(data.message);
                        }
                    }
                });
            });

            $('#rectifySync').click(function(e) {
                e.preventDefault();
                $('#rectify-result').empty();
                var placeholder =
                    `<div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>`;
                $('#rectify-result').append(placeholder);
                $.ajax({
                    url: '/admin/rectify-cancelled',
                    type: 'GET',
                    success: function(data) {
                        if (data.status) {
                            $('#rectify-result').empty();
                            var p =
                                `<p class="text-success">Rectified Vouchers : ${data.data['rectified']}</p>`;
                            $('#rectify-result').append(p);
                        } else {
                            alert(data.message);
                        }
                    }
                });
            });

            $('#rectifyAmount').click(function(e) {
                e.preventDefault();
                $('#rectify-amount-result').empty();
                var placeholder =
                    `<div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>`;
                $('#rectify-amount-result').append(placeholder);
                $.ajax({
                    url: '/admin/rectify-amount',
                    type: 'GET',
                    success: function(data) {
                        if (data.status) {
                            $('#rectify-amount-result').empty();
                            var p =
                                '<table class="table table-bordered"><tr><th>Date</th><th>Voucher Number</th><th>Voucher Type</th><th>Amount</th></tr>';

                            $.each(data.data, function(key, value) {
                                p += `<tr>
                                        <td>${value.voucher_date}</td>
                                        <td>${value.voucher_number}</td>
                                        <td> ${value.voucher_type.name}</td>
                                        <td> ${value.diff_amount}</td>
                                    </tr>`;
                            });
                            p += '</table>';
                            $('#rectify-amount-result').append(p);
                        } else {
                            alert(data.message);
                        }
                    }
                });
            });

            $('#rectifyMissMatch').click(function(e) {
                e.preventDefault();
                var placeholder =
                    `<div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>`;
                $('#rectify-missmatch-result').append(placeholder);
                $.ajax({
                    url: '/admin/rectify-mismatch',
                    type: 'GET',
                    success: function(data) {
                        if (data.status) {
                            alert(data.message);
                            $('#rectify-missmatch-result').empty();
                        } else {
                            alert(data.message);
                            $('#rectify-missmatch-result').empty();
                        }
                    }
                });
            });
        });
    </script>
@endsection