budget.blade

@extends('layouts.app')

@section('content')

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title mt-2">
                    Budget (Tahun ini dan tahun depan)
                </h3>
                <div class="float-right d-none d-sm-block">
                    <div class="form-inline ml-0 ml-md-3">
                        <div class="form-group mx-3">
                            <label class="font-weight-normal">Short by:</label>
                            <select class="form-control" id="ccBudgetBy" style="border: none; cursor: pointer;">
                                @if (count($cost_center) > 0)
                                <option value="all" selected>All CC</option>
                                @foreach ($cost_center as $cc)
                                <option value="{{ $cc->id }}">{{ $cc->cc }}</option>
                                @endforeach
                                @else
                                <option value="" selected>No Data</option>
                                @endif
                            </select>
                        </div>
                        <div class="form-group mx-3">
                            <label class="font-weight-normal">For Year:</label>
                            <select class="form-control" id="ccBudgetYear" style="border: none; cursor: pointer;"
                                title="year">
                                <option value="{{ date('Y') }}" selected>{{ date('Y') }}</option>
                                <option value="{{ date('Y') + 1 }}">{{ date('Y') + 1 }}</option>
                            </select>
                        </div>
                        @can('app-dev')
                        <button type="button" class="btn btn-sm btn-primary mx-3" data-toggle="modal"
                            data-target="#addBudgetModal">
                            + Add / Revise Budget
                        </button>
                        @endcan
                    </div>
                </div>
            </div>
            <div class="card-body">
                @if(session()->has('error'))
                <div class="alert alert-danger" role="alert">
                    {{ session('error') }}
                </div>
                @endif
                @if(session()->has('success'))
                <div class="alert alert-primary" role="alert">
                    {{ session('success') }}
                </div>
                @endif
                <div class="row">
                    <div class="col-md-4 col-sm-12">
                        <div class="info-box">
                            <span class="info-box-icon bg-info"><i class="fa-solid fa-rupiah-sign"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Budget</span>
                                <span class="info-box-number" id="dtTotBudget">Rp. {{ $tot_budget }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-12">
                        <div class="info-box">
                            <span class="info-box-icon bg-info"><i class="fa-solid fa-cart-shopping"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Forecast</span>
                                <span class="info-box-number" id="dtTotForecast">Rp. {{ $tot_forecast }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-12">
                        <div class="info-box">
                            <span class="info-box-icon bg-info"><i class="fa-solid fa-scale-balanced"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Balance</span>
                                <span class="info-box-number" id="dtBalance">Rp. {{ $balance }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="table-responssive overflow-auto">
                    <table class="table table-sm budget-datatable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Year</th>
                                <th>CC</th>
                                <th>Theme</th>
                                <th>Category</th>
                                <th>Exp. No.</th>
                                <th>PIC</th>
                                <th>Amount</th>
                                <th>Actual</th>
                                <th>Forecast</th>
                                <th>Balance</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
</div>
@include('expenses.partials.add-budget-modal')
@push('scripts')
<script>
    let dtTotBudget = ''
    let dtTotForecast = ''
    let dtBalance = ''

    let budgetTable = $('.budget-datatable').DataTable({
        processing: true,
        serverSide: true,
        pageLength: 25,
        ajax: {
            url: "{{ route('exp.budget.index') }}",
            type: 'GET',
            data: function(d) {
                d.year = $('#ccBudgetYear').val()
                d.ccBy = $('#ccBudgetBy').val()
            },
        },
        columns: [
            { data: "DT_RowIndex", name: "DT_RowIndex", className: "dt-body-center" },
            { data: "year", name: "year" },
            { data: "cc_id", name: "cc_id" },
            { data: "theme", name: "theme" },
            { data: "category_id", name: "category_id" },
            { data: "exp_no", name: "exp_no" },
            { data: "pic", name: "pic" },
            { data: "amount", name: "amount", className: "text-right" },
            { data: "tot_actual", name: "tot_actual", className: "text-right" },
            { data: "tot_forecast", name: "tot_forecast", className: "text-right" },
            { data: "balance", name: "balance", className: "text-right" },
            { data: "action", name: "action", searchable: false, orderable: false, className: "text-center" },
        ],
    })

    /** Balance budget saat datatable berubah */
    budgetTable.on('draw.dt', function(){
        dtData = budgetTable.ajax.json().data[0]

        // console.log(dtData);

        if (dtData) {
            dtTotBudget = dtData.DT_RowData.dt_tot_budget
            dtTotForecast = dtData.DT_RowData.dt_tot_forecast
            dtBalance = dtData.DT_RowData.dt_balance
        } else {
            dtTotBudget = '-'
            dtTotForecast = '-'
            dtBalance = '-'
        }

        $('#dtTotBudget').text('Rp. ' + dtTotBudget)
        $('#dtTotForecast').text('Rp. ' + dtTotForecast)
        $('#dtBalance').text('Rp. ' + dtBalance)
    })
    $('#ccBudgetYear').on('change', function(){
        budgetTable.ajax.reload()
    })

    $('#ccBudgetBy').on('change', function(){
        budgetTable.ajax.reload()
    })
</script>

@endpush
@endsection