@extends('admin.layouts.master')
@section('css')
    @include('admin.helper.tablecss')
@endsection
@section('page-header')
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto"> إدارة الحسابات </h4>
                <span class="text-muted mt-1 tx-13 mr-2 mb-0">/ تقرير التدفقات النقدية</span>
            </div>
        </div>
    </div>
@endsection
@section('content')
    {{-- Filters --}}
    <div class="row mb-3">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">
                    <div class="main-content-label mg-b-5"> تصفية البيانات </div>
                    <div class="row row-sm">
                        <div class="col-lg-3 mt-2">
                            <label class="mt-0"> الحساب </label>
                            <select class="form-control select2" id="filterAccount">
                                <option value="">— كل الحسابات —</option>
                                @foreach ($accounts as $id => $name)
                                    <option value="{{ $id }}">{{ $name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-3 mt-2">
                            <label class="mt-0"> من تاريخ </label>
                            <input type="date" class="form-control" id="fromDate">
                        </div>
                        <div class="col-lg-3 mt-2">
                            <label class="mt-0"> إلى تاريخ </label>
                            <input type="date" class="form-control" id="toDate">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Table --}}
    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header pb-0">
                    <h4 class="card-title mg-b-0"> التدفقات النقدية </h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table text-md-nowrap" id="cashFlowTable">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th> التاريخ </th>
                                    <th> الحساب </th>
                                    <th> العملة </th>
                                    <th> نوع العملية </th>
                                    <th> مدين </th>
                                    <th> دائن </th>
                                    <th> الملاحظة </th>
                                    <th> بواسطة </th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.tablescripts')
    @include('vue')
    <script>
        var table;
        $(function() {
            $('.select2').select2();

            table = $('#cashFlowTable').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.accounts.cash-flow') }}",
                    data: function(d) {
                        d.account_id = $('#filterAccount').val();
                        d.from_date = $('#fromDate').val();
                        d.to_date = $('#toDate').val();
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'date'
                    },
                    {
                        data: 'account_name'
                    },
                    {
                        data: 'currency_name'
                    },
                    {
                        data: 'sub_type_label'
                    },
                    {
                        data: 'debit'
                    },
                    {
                        data: 'credit'
                    },
                    {
                        data: 'note',
                        defaultContent: '—'
                    },
                    {
                        data: 'creator_name'
                    },
                ],
            });

            $('#filterAccount, #fromDate, #toDate').on('change', function() {
                table.draw();
            });
        });
    </script>
@endsection