@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')
    <div class="row">
        <div class="col-xl-4">
            <div class="card">
                <div class="card-header pb-0">
                    <h4 class="card-title mg-b-0" id="form-title"> إضافة نوع حساب </h4>
                </div>
                <div class="card-body">
                    <form id="typeForm">
                        <input type="hidden" name="id" id="type_id">
                        <div class="form-group">
                            <label class="form-label"> اسم النوع </label>
                            <input type="text" class="form-control" name="name" id="type_name" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label"> النوع الأب (اختياري) </label>
                            <select class="form-control select2" name="parent_id" id="type_parent">
                                <option value="">— بدون (نوع رئيسي) —</option>
                                @foreach ($parentTypes as $type)
                                    <option value="{{ $type->id }}">{{ $type->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary" id="submitBtn"> إضافة </button>
                        <button type="button" class="btn btn-secondary d-none" id="cancelEdit" onclick="resetForm()"> إلغاء
                        </button>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-xl-8">
            <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="typesTable">
                            <thead>
                                <tr>
                                    <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 = $('#typesTable').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: "{{ route('admin.account-types.index') }}",
                columns: [{
                        data: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'name'
                    },
                    {
                        data: 'parent_name'
                    },
                    {
                        data: 'action',
                        orderable: false,
                        searchable: false
                    },
                ],
            });

            $('#typeForm').on('submit', function(e) {
                e.preventDefault();
                let formData = new FormData(this);
                let id = $('#type_id').val();
                let url = id ? "{{ route('admin.account-types.update') }}" :
                    "{{ route('admin.account-types.store') }}";
                adawe(url, formData, function() {
                    table.ajax.reload();
                    resetForm();
                });
            });

            $(document).on('click', '.edit-type', function() {
                $('#type_id').val($(this).data('id'));
                $('#type_name').val($(this).data('name'));
                $('#type_parent').val($(this).data('parent')).trigger('change');
                $('#form-title').text('تعديل نوع حساب');
                $('#submitBtn').text('تعديل');
                $('#cancelEdit').removeClass('d-none');
            });

            $(document).on('click', '.delete-type', function() {
                let id = $(this).data('id');
                if (confirm('هل أنت متأكد من حذف هذا النوع؟')) {
                    let formData = new FormData();
                    formData.append('id', id);
                    adawe("{{ route('admin.account-types.destroy') }}", formData, function() {
                        table.ajax.reload();
                    });
                }
            });
        });

        function resetForm() {
            $('#typeForm')[0].reset();
            $('#type_id').val('');
            $('#type_parent').val('').trigger('change');
            $('#form-title').text('إضافة نوع حساب');
            $('#submitBtn').text('إضافة');
            $('#cancelEdit').addClass('d-none');
        }
    </script>
@endsection