@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">/ دفتر حساب: {{ $account->name }}</span>
            </div>
        </div>
        <div class="d-flex my-xl-auto right-content">
            @if (!$account->is_closed)
                @if (can_admin('accounts_deposit'))
                    <a href="{{ route('admin.accounts.deposit', $account->id) }}" class="btn btn-success ml-2">
                        {!! svg('lucide-arrow-down-circle', ['width' => 16, 'height' => 16])->toHtml() !!} إيداع
                    </a>
                @endif
                @if (can_admin('accounts_withdraw'))
                    <a href="{{ route('admin.accounts.withdrawal', $account->id) }}" class="btn btn-warning ml-2">
                        {!! svg('lucide-arrow-up-circle', ['width' => 16, 'height' => 16])->toHtml() !!} سحب
                    </a>
                @endif
                @if (can_admin('accounts_transfer'))
                    <a href="{{ route('admin.accounts.transfer', $account->id) }}" class="btn btn-secondary ml-2">
                        {!! svg('lucide-arrow-left-right', ['width' => 16, 'height' => 16])->toHtml() !!} تحويل
                    </a>
                @endif
            @endif
        </div>
    </div>
@endsection
@section('content')
    {{-- Account Summary --}}
    <div class="row mb-3">
        <div class="col-md-3">
            <div class="card bg-primary-transparent">
                <div class="card-body text-center">
                    <h6 class="mb-1"> الرصيد الحالي </h6>
                    <h3 class="mb-0 font-weight-bold">{{ number_format((float) $balance, 4) }}</h3>
                    <small>{{ $account->currency?->name }} ({{ $account->currency?->symbol }})</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <h6 class="mb-1"> نوع الحساب </h6>
                    <h5 class="mb-0">{{ $account->accountType?->name ?? '—' }}</h5>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <h6 class="mb-1"> رقم الحساب </h6>
                    <h5 class="mb-0">{{ $account->account_number ?? '—' }}</h5>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <h6 class="mb-1"> الحالة </h6>
                    @if ($account->is_closed)
                        <span class="badge badge-danger badge-lg">مقفول</span>
                    @else
                        <span class="badge badge-success badge-lg">نشط</span>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Date Filter --}}
    <div class="row mb-3">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <label class="form-label"> من تاريخ </label>
                            <input type="date" class="form-control" id="fromDate">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label"> إلى تاريخ </label>
                            <input type="date" class="form-control" id="toDate">
                        </div>
                        <div class="col-md-4 d-flex align-items-end">
                            <button class="btn btn-primary" id="filterBtn"> تصفية </button>
                            <button class="btn btn-outline-secondary mr-2" id="resetFilter"> إعادة تعيين </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Transactions 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="transactionsTable">
                            <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() {
            table = $('#transactionsTable').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.accounts.show', $account->id) }}",
                    data: function(d) {
                        d.from_date = $('#fromDate').val();
                        d.to_date = $('#toDate').val();
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'date'
                    },
                    {
                        data: 'sub_type_label'
                    },
                    {
                        data: 'debit'
                    },
                    {
                        data: 'credit'
                    },
                    {
                        data: 'note',
                        defaultContent: '—'
                    },
                    {
                        data: 'creator_name'
                    },
                    {
                        data: 'image_url',
                        render: function(data) {
                            if (data) {
                                return '<a href="' + data +
                                    '" target="_blank" class="btn btn-sm btn-outline-info">{!! svg('lucide-image', ['width' => 16, 'height' => 16])->toHtml() !!}</a>';
                            }
                            return '—';
                        },
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'action',
                        orderable: false,
                        searchable: false
                    },
                ],
            });

            $('#filterBtn').on('click', function() {
                table.ajax.reload();
            });

            $('#resetFilter').on('click', function() {
                $('#fromDate').val('');
                $('#toDate').val('');
                table.ajax.reload();
            });

            $(document).on('click', '.delete-transaction', function() {
                let id = $(this).data('id');
                if (confirm(
                        'هل أنت متأكد من حذف هذه الحركة؟ (سيتم حذف الحركة المقابلة أيضاً في حالة التحويل)'
                        )) {
                    let formData = new FormData();
                    adawe("{{ url('admin/accounts/transaction') }}/" + id + "/delete", formData,
                function() {
                        table.ajax.reload();
                    });
                }
            });
        });
    </script>
@endsection