@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 class="d-flex my-xl-auto right-content">
            @if (can_admin('accounts_create'))
                <a href="{{ route('admin.accounts.create') }}" class="btn btn-primary">
                    {!! svg('lucide-plus', ['width' => 16, 'height' => 16])->toHtml() !!} إنشاء حساب جديد
                </a>
            @endif
        </div>
    </div>
@endsection
@section('content')
    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header pb-0">
                    <div class="d-flex justify-content-between">
                        <h4 class="card-title mg-b-0"> الحسابات </h4>
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="includeClosed">
                            <label class="form-check-label" for="includeClosed"> إظهار الحسابات المقفولة </label>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table text-md-nowrap" id="accountsTable">
                            <thead>
                                <tr>
                                    <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() {
            table = $('#accountsTable').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.accounts.index') }}",
                    data: function(d) {
                        d.include_closed = $('#includeClosed').is(':checked') ? 1 : 0;
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'name'
                    },
                    {
                        data: 'account_number',
                        defaultContent: '—'
                    },
                    {
                        data: 'type_name'
                    },
                    {
                        data: 'currency_name'
                    },
                    {
                        data: 'balance'
                    },
                    {
                        data: 'status'
                    },
                    {
                        data: 'action',
                        orderable: false,
                        searchable: false
                    },
                ],
            });

            $('#includeClosed').on('change', function() {
                table.ajax.reload();
            });

            $(document).on('click', '.close-account', function() {
                let id = $(this).data('id');
                if (confirm('هل أنت متأكد من إقفال هذا الحساب؟')) {
                    let formData = new FormData();
                    adawe("{{ url('admin/accounts') }}/" + id + "/close", formData, function() {
                        table.ajax.reload();
                    });
                }
            });

            $(document).on('click', '.activate-account', function() {
                let id = $(this).data('id');
                let formData = new FormData();
                adawe("{{ url('admin/accounts') }}/" + id + "/activate", formData, function() {
                    table.ajax.reload();
                });
            });
        });
    </script>
@endsection