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

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

        .control-label {
            margin-top: 45px;
        }
    </style>
@endsection
<link rel="stylesheet" href="{{ asset('dist/persianDatepicker/css/persianDatepicker-default.css') }}" />
@section('subcontent')
    <div class="intro-y flex items-center mt-8">
        <h2 class="text-lg font-medium mr-auto">Add Receipt</h2>
    </div>
    <div class="grid grid-cols-8 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">Create Receipt</h2>

                </div>
                <div id="basic-textual-notification" class="p-5">
                    <div class="preview">
                        <div class="row">
                            <div class="col-md-6">
                                <form action="{{ route('receipt.store') }}" method="post">
                                    @csrf
                                    <div class="form-group">
                                        <label for="field-2" class="control-label">Employee Type</label>
                                        <div class="col-sm-9">
                                            <select name="employee_type" class="form-control" onchange="emp_type(this.value)" data-validate="required" id="class_id"
                                                data-message-required=" value_required ">
                                                <option value="none">None</option>
                                                <option value="teacher">Teacher</option>
                                                <option value="employee">Employee</option>
                                            </select>
                                        </div>
                                    </div>


                                    <div class="form-group" id="tcr">
                                        <label for="field-2" class="col-sm-3 control-label">Teacher</label>
                                            <div class="col-sm-6">
                                                <select name="teacher_id" class="form-control">
                                                    <option value="">Select Teacher</option>
                                                    @foreach ($teachers as $teacher)
                                                        <option value="{{$teacher->id}}">{{ $teacher->name . ' | ' . $teacher->fname}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                    </div>
                                    <div class="form-group" id="emp">
                                        <label for="field-2" class="col-sm-3 control-label">Employee</label>
                                            <div class="col-sm-6">
                                                <select name="employee_id" class="form-control">
                                                    <option value="">Select Employee</option>
                                                    @foreach ($employees as $emp)
                                                        <option value="{{$emp->id}}">{{$emp->emp_fname . ' ' . $emp->emp_lname . ' | ' . $emp->emp_father_name}}</option>
                                                    @endforeach
                                                </select>
                                            </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)
                                                <option value="{{ $row->id }}">
                                                    {{ $row->name }}
                                                </option>
                                            @endforeach;

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

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

                                            @foreach ($credits as $row)
                                                <option value="{{ $row->id }}">
                                                    {{ $row->name }}
                                                </option>
                                            @endforeach;

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

                                <div class="form-group" id="name">
                                    <label class="control-label"> Name </label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" placeholder="Enter Name" name="name"
                                            id="name" />
                                    </div>
                                </div>
                                <div class="form-group" id="fathername">
                                    <label class="control-label"> Fathername </label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" placeholder="Enter Fathername" name="father_name"
                                            id="fathername" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label"> Amount </label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" placeholder="Enter Amount" name="amount" id="amount" />
                                    </div>
                                </div>

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

                                <div class="form-group">
                                    <label class="control-label">Title</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" placeholder="Enter Description" name="title"
                                            id="description" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <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 class="control-label"> Date </label>
                                    <div class="col-sm-9">
                                        <input type="text" placeholder="YYYY-0M-0D" class="form-control pdpF2" onchange="get_monthly_fee();" id="start_date"  name="timestamp" />
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-3 control-label"></label>
                                    <div class="col-sm-9"> <br>
                                        <input type="submit" class="btn btn-primary" value="Save Receipt" />
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

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


    </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>
<script type="text/javascript">
    jQuery(document).ready(function($)
        {
            emp_type('none');
        });

        function emp_type(type){
            if(type == 'employee'){
                $('#emp').show();
                $('#tcr').hide();
                $('#name').hide();
                $('#fathername').hide();
                $('#pay_type').show();

            }else if(type == 'teacher'){
                $('#emp').hide();
                $('#name').hide();
                $('#fathername').hide();
                $('#tcr').show();
                $('#pay_type').show();

            }else{
                $('#emp').hide();
                $('#tcr').hide();
                $('#name').show();
                $('#fathername').show();
            }
        }
    </script>
@endsection