@extends('client.layouts.app')
@section('title', 'اضافة مصروف او ايراد')
@section('content')
    <!-- BEGIN: Content-->
    <div class="app-content content ">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper container-xxl p-0">
            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <h2 class="content-header-title float-start mb-0">إضافة مصروف او ايراد</h2>
                            <div class="breadcrumb-wrapper">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="{{ route('client.home') }}">لوحة التحكم</a>
                                    </li>
                                    <li class="breadcrumb-item"><a href="{{ route('client.expenses.index') }}">المصاريف و
                                            الإيردات</a>
                                    </li>
                                    <li class="breadcrumb-item active">إضافة
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-header-right text-md-end col-md-3 col-12 d-md-block d-none">
                    <div class="mb-1 breadcrumb-right">
                        <div class="dropdown">
                            @can('عرض المصروفات')
                                <a href="{{ route('client.expenses.index') }}">
                                    <button class="btn-icon btn btn-primary" type="button" data-bs-toggle="tooltip" data-bs-title="{{__("app.buttons.list-expenses")}}"><i data-feather='eye'> </i></button>
                                </a>
                            @endcan

                        </div>
                    </div>
                </div>
            </div>
            <div class="content-body">
                <!-- Basic Horizontal form layout section start -->
                <!-- Basic multiple Column Form section start -->
                <section id="multiple-column-form">
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">البيانات الاساسية</h4>

                                    <h4><button class="btn-icon btn btn-danger waves-effect waves-float waves-light"
                                            type="button" id="changeType">دفع بنكي</button></h4>

                                </div>
                                <div class="card-body">
                                    <form class="form" id="addForm" action="#">
                                        <input type="hidden" name="company_id" value="{{ $company_id }}">

                                        @csrf
                                        <div class="row">

                                          <div class="col-md-12">
                                            <div class="mb-1">
                                                <b class="form-label">الفرع</b>
                                                <select class="form-control select2" name="branch_id">
                                                    @foreach ($branches as $branch)
                                                        <option value="{{ $branch->id }}">{{ $branch->branch_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                            <div class="col-md-4 col-12">
                                                <div class="mb-1">
                                                    <b class="form-label"> نوع القيد </b></label>
                                                    <select name="type" class="form-control">
                                                        <option value="">اختر نوع القيد </option>
                                                        <option value="مصروف">مصروف</option>
                                                        <option value="إيراد">إيراد</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="col-md-4 col-12">
                                                <div class="mb-1">
                                                    <b class="form-label"> القيد </b></label>
                                                    <select name="fixed_expense" class="form-control">
                                                        <option value="">اختر القيد الثابت</option>
                                                        @foreach ($fixed_expenses as $fixed_expense)
                                                            <option value="{{ $fixed_expense->id }}">
                                                                {{ $fixed_expense->fixed_expense }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="col-md-4 col-12">
                                                <div class="mb-1">
                                                    <b class="form-label"> تفاصيل المصروف او ايراد </b>
                                                    <input class="form-control" name="expense_details" type="text"
                                                        placeholder="اسم المصروف او ايراد ">
                                                </div>
                                            </div>


                                            <div class="col-md-4 col-12">
                                                <div class="mb-1">
                                                    <b class="form-label"> المبلغ </b>
                                                    <input class="form-control" name="amount" type="text"
                                                        placeholder="قيمة المصروف او ايراد">
                                                </div>
                                            </div>

                                            <div class="col-md-4 col-12">
                                                <div class="mb-1">
                                                    <b class="form-label"> صورة المصروف او ايراد</b>
                                                    <input accept=".jpg,.png,.jpeg" type="file"
                                                        oninput="pic.src=window.URL.createObjectURL(this.files[0])"
                                                        id="file" name="expense_pic" class="form-control">
                                                    <label for="" class="d-block"> معاينة الصورة </label>
                                                    <img id="pic" style="width: 100px; height:100px;" />
                                                </div>
                                            </div>

                                            <div class="col-md-4 col-12" id="safe">
                                                <div class="mb-1">
                                                    <b class="form-label"> خزنة الدفع </b>
                                                    <select name="safe_id" id="safe_id" class="form-control">
                                                        <option value="">اختر خزنة الدفع</option>
                                                        @foreach ($safes as $safe)
                                                            <option value="{{ $safe->id }}">{{ $safe->safe_name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="col-md-4 col-12" id="bank" style="display:none;">
                                                <div class="mb-1">
                                                    <b class="form-label"> بنك الدفع </b>
                                                    <select name="bank_id" id="bank_id" class="form-control">
                                                        <option value="">اختر بنك الدفع</option>
                                                        @foreach ($banks as $bank)
                                                            <option value="{{ $bank->id }}">{{ $bank->bank_name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="col-md-4 col-12">
                                                <div class="mb-1">
                                                    <b class="form-label"> التاريخ </b>
                                                    <input class="form-control" name="created_at" type="date"
                                                        value="{{ date('Y-m-d') }}">
                                                </div>
                                            </div>

                                            <div class="col-md-4 col-12">
                                                <div class="mb-1">
                                                    <b class="form-label"> ملاحظات </b>
                                                    <textarea class="form-control" name="notes" placeholder="ملاحظات"></textarea>
                                                </div>
                                            </div>

                                            <div class="col-12" align="center">
                                                <br>
                                                <button type="submit" class="btn btn-success me-1">إضافة</button>
                                                <button type="button" class="btn btn-outline-danger"
                                                    onclick="window.history.back()">رجوع</button>
                                            </div>
                                        </div>

                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- Basic Floating Label Form section end -->

            </div>
        </div>
    </div>
    <!-- END: Content-->
@endsection

@section('script')

    <script>
        $('#changeType').on('click', function() {
            var type = $(this).text();
            if (type == 'دفع بنكي') {
                $(this).text('دفع نقدي');
                $('#bank').show();
                $('#safe').hide();
                $('#safe_id').val('');
                $(this).attr('class', 'btn-icon btn btn-primary waves-effect waves-float waves-light');


            } else {
                $(this).text('دفع بنكي');
                $('#bank').hide();
                $('#safe').show();
                $('#bank_id').val('');
                $(this).attr('class', 'btn-icon btn btn-danger waves-effect waves-float waves-light');
            }
        });

        var selectForm = $('#addForm');

        if (selectForm) {
            selectForm.validate({

                rules: {

                    'fixed_expense': {
                        required: true,
                    },
                    'expense_details': {
                        required: true,
                    },
                    'amount': {
                        required: true,
                    },
                    'safe_id': {
                        required: true
                    },
                    'bank_id': {
                        required: true
                    },
                    'branch_id': {
                        required: true
                    }

                }
            });
        }

        $("#addForm").on('submit', (function(e) {

            e.preventDefault();

            $.ajax({

                url: "{{ route('client.expenses.store') }}",

                type: "POST",

                data: new FormData(this),

                dataType: 'json',

                contentType: false,

                cache: false,

                processData: false,

                beforeSend: function() {
                    var ifConnected = window.navigator.onLine;
                    if (!ifConnected) {
                        toastr.info("يتم الآن إعادة الإتصال", "لا يوجد إتصال بالإنترنت", {
                            positionClass: "toast-top-right",
                            tapToDismiss: !1,
                            timeOut: 2e3,
                            rtl: $("html").attr("data-textdirection")
                        });
                    }
                },

                success: function(response) {

                    if (response.status) {

                        toastr.success("", response.message, {
                            positionClass: "toast-top-right",
                            tapToDismiss: !1,
                            timeOut: 2e3,
                            rtl: $("html").attr("data-textdirection")
                        });
                        document.getElementById("addForm").reset();

                    } else {

                        toastr.error("", response.message, {
                            positionClass: "toast-top-right",
                            tapToDismiss: !1,
                            timeOut: 2e3,
                            rtl: $("html").attr("data-textdirection")
                        });
                    }

                },
                error: function(response) {
                    $.each(response.responseJSON.errors, function(key, item) {
                        toastr.error("", item, {
                            positionClass: "toast-top-right",
                            tapToDismiss: !1,
                            timeOut: 2e3,
                            rtl: $("html").attr("data-textdirection")
                        });

                    });
                },

            });

        }));
    </script>
@endsection