@extends('../layout/' . $layout)

@section('subhead')
    <title>Atarud MIS - Add Voucher</title>
    <link href="{{ asset('dist/css/dataTables.min.css') }}" rel="stylesheet">
    <style>
        .form-group {
            margin-top: 10px;
        }

        .control-label {
            margin-top: 45px;
        }
    </style>
<link rel="stylesheet" href="{{ asset('dist/persianDatepicker/css/persianDatepicker-default.css') }}" />

@endsection

@section('subcontent')
    <div class="intro-y flex items-center mt-8">
        <h2 class="text-lg font-medium mr-auto">Add Voucher</h2>
    </div>
    <div class="grid grid-cols-12 gap-6 mt-5">
        <div class="intro-y col-span-12 lg:col-span-6">
            <!-- BEGIN: Basic Notification -->
            <div class="intro-y box">
                <div
                    class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
                    <h2 class="font-medium text-base mr-auto">Voucher Informations</h2>

                </div>
                <div id="basic-textual-notification" class="p-5">
                    <div class="preview">
                        <div class="row">
                            <div class="col-md-6">
                                <form action="{{ route('voucher.store') }}" method="post">
                                    @csrf
                                    <div class="">
                                        <label class="control-label"> Title </label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" placeholder="Enter Title" name="title"
                                                id="title" />
                                        </div>
                                    </div>

                                    <div class="">
                                        <label class="control-label"> Description </label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" placeholder="Enter Description" name="description"
                                                id="description" />
                                        </div>
                                    </div>

                                <div class="form-group">
                                    <label for="field-2" class="control-label">Debit Account</label>
                                    <div class="col-sm-9">
                                        <select name="account_id" class="form-control" data-validate="required" id="class_id"
                                            data-message-required=" value_required ">
                                            <option value="">Select</option>

                                            @foreach ($accounts as $row)
                                                @if($row->account_type != 'income')
                                                <option value="{{ $row->id }}">
                                                    {{ $row->name }}
                                                </option>
                                                @endif
                                            @endforeach;

                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="field-2" class="control-label">Credit Account</label>
                                    <div class="col-sm-9">
                                        <select name="paid_from_account_id" class="form-control" data-validate="required" id="class_id"
                                            data-message-required=" value_required ">
                                            <option value="">Select</option>

                                            @foreach ($accounts as $row)
                                                @if($row->account_type == 'income' || $row->account_type == 'current_assets')
                                                <option value="{{ $row->id }}">
                                                    {{ $row->name }}
                                                </option>
                                                @endif
                                            @endforeach;

                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label"> Date </label>
                                    <div class="col-sm-9">
                                        <input type="text" placeholder="YYYY-0M-0D" class="form-control pdpF2" name="date" id="date" />
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label">Recieved By </label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="v_recieved_by" id="date" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label">Reciever Father Name </label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="father_name"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label"> Paid By </label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="v_paid_by" id="date" />
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label">Approved By </label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="v_approved_by" id="date" />
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>

                </div>
            </div>
            <!-- END: Basic Notification -->
        </div>
        <!-- END: of first box -->

        <div class="intro-y col-span-12 lg:col-span-6">

            <div class="intro-y box">
                <div
                    class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
                    <h2 class="font-medium text-base mr-auto">Payments Informations</h2>

                </div>
                <div id="notification-with-avatar" class="p-5">
                    <div class="preview">
                        <div class="">
                            <!-- BEGIN: Notification Content -->
                            <div class="form-group">
                                <label class=" control-label">Total</label>
                                <div class="">
                                    <input type="text" class="form-control" name="amount" id="admission_fee"
                                         value="0" placeholder="Enter Total Amount');?>" />
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label">Payment</label>
                                <div class="">
                                    <input type="text" class="form-control" name="amount_paid" id="exam_fee"
                                        value="0" placeholder="Enter Total Amount');?>" />
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label">Status</label>
                                <div class="">
                                    <select name="status" class="form-control" required>
                                        <option value="paid">Paid</option>
                                        <option value="unpaid">Unpaid</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label">Method</label>
                                <div class="">
                                    <select name="method" class="form-control" required>
                                        <option value="1">Cash</option>
                                        <option value="2">Check</option>
                                        <option value="3">Card</option>
                                    </select>
                                </div>
                            </div>



                            <div class="col-md-6">

                                <div class="form-group">
                                    <div class="col-sm-5">
                                        <button type="submit" class="btn btn-info">Add Voucher</button>
                                    </div>
                                </div>
                            </div>
                        </form>

                        </div>
                    </div>

                </div>
            </div>
            <!-- END: Notification With Avatar -->


        </div>
    </div>
@endsection
@section('script')
<script src="{{ asset('dist/js/jquery.js') }}"></script>
<script src="{{ asset('dist/persianDatepicker/js/persianDatepicker.js') }}"></script>
<script>
    $(function () {

        $(".pdpF2").persianDatepicker({
            months: ["حمل", "ثور", "جوزا", "سرطان", "اسد", "سنبله", "میزان", "عقرب", "قوس", "جدی", "دلو", "حوت"],
            dowTitle: ["شنبه", "یکشنبه", "دوشنبه", "سه شنبه", "چهارشنبه", "پنج شنبه", "جمعه"],
            shortDowTitle: ["ش", "ی", "د", "س", "چ", "پ", "ج"],
            showGregorianDate: !1,
            persianNumbers: !0,
            formatDate: "YYYY/MM/DD",
            selectedBefore: !1,
            selectedDate: null,
            startDate: null,
            endDate: null,
            prevArrow: '\u25c4',
            nextArrow: '\u25ba',
            theme: 'default',
            alwaysShow: !1,
            selectableYears: null,
            selectableMonths: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            cellWidth: 25, // by px
            cellHeight: 20, // by px
            fontSize: 13, // by px
            isRTL: !1,
            calendarPosition: {
                x: 0,
                y: 0,
            },
            onShow: function () {},
            onHide: function () {},
            onSelect: function () {},
            onRender: function () {}
    });


    });
</script>

@endsection