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

@section('subhead')
<title>Atarud MIS - Bill Payments</title>
<link href="{{ asset('dist/css/dataTables.min.css') }}" rel="stylesheet">
@endsection
<link rel="stylesheet" href="{{ asset('dist/persianDatepicker/css/persianDatepicker-default.css') }}" />
@section('subcontent')


<div class="flex items-center mt-8">
    <h2 class="intro-y text-lg font-medium mr-auto">Bill Payments</h2>
</div>



<div class="container">
    <div class="row">
        <div class="flex-1 mt-6 xl:mt-0">
            <form action="{{route('bill.payment.store')}}" method="post" enctype="multipart/form-data">
                @csrf
                @method('post')
                <div class="box font-medium text-base border-b border-slate-200/60 dark:border-darkmode-400 p-6 ">
                    Bill Details
                </div>
                <div class="sm:grid grid-cols-4 gap-2 box p-8">

                    <div class="input-group">
                        <select name="bill_id" class="form-control" value="{{ old('bill_id') }}">
                            <option value="">Select Bill</option>
                                @foreach ($bills as $row)
                                <option value="{{ $row->id }}">
                                    {{ $row->description }}
                                </option>
                                @endforeach
                        </select>
                    </div>
                    <div class="input-group">
                        <input type="text" placeholder="YYYY-0M-0D" class="form-control pdpF2" name="payment_date" />
                    </div>
                </div>
                <div class="box font-medium text-base border-b border-slate-200/60 dark:border-darkmode-400 p-8 mt-4 ">
                    Payments
                    <p id="add-btn" class="btn btn-primary w-24 ml-auto float-right">
                        <i data-lucide="plus-circle" class="w-4 h-4 mr-1"></i> Add
                    </p>
                </div>
                <div class="overflow-x-auto box p-8">

                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Amount</th>
                                <th>Year</th>
                                <th>Month</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody id="dynamicAddRemove">
                            <tr>
                                <td> <input type="text" class="form-control" placeholder="Enter Amount"
                                        name="moreFields[0][amount]" /></td>
                                <td> <select class="form-control" name="moreFields[0][bill_year]">
                                    @for($i = 1400; $i < 1450; $i++)
                                        <option value={{ $i }}>{{ $i }}</option>
                                    @endfor
                                </select></td>
                                <td> <select class="form-control" name="moreFields[0][bill_month]">
                                    <option value="1">حمل</option>
                                    <option value="2">ثور</option>
                                    <option value="3">جوزا</option>
                                    <option value="4">سرطان</option>
                                    <option value="5">اسد</option>
                                    <option value="6">سنبله</option>
                                    <option value="7">میزان</option>
                                    <option value="8">عقرب</option>
                                    <option value="9">قوس</option>
                                    <option value="10">جدی</option>
                                    <option value="11">دلو</option>
                                    <option value="12">حوت</option>
                                </select></td>
                                {{-- <td> <input type="text" placeholder="YYYY-0M-0D" class="form-control pdpF2" name="moreFields[0][start_date]" /></td> --}}
                                {{-- <td> <input type="text" placeholder="YYYY-0M-0D" class="form-control pdpF2" name="moreFields[0][end_date]" /></td> --}}
                                <td> <input type="text" class="form-control" placeholder="Enter Description"
                                        name="moreFields[0][description]" /></td>
                            </tr>
                        </tbody>

                    </table>
                    <button type="submit" class="btn btn-primary mt-5" style="float: right;">Save</button>
            </form>

        </div>

    </div>
</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>

<script>
    var year = '';
    for(var x = 1400; x < 1450; x++){
        year += `<option>${x}</option>`;
    }
    var month =`<option value="1">حمل</option>
                <option value="2">ثور</option>
                <option value="3">جوزا</option>
                <option value="4">سرطان</option>
                <option value="5">اسد</option>
                <option value="6">سنبله</option>
                <option value="7">میزان</option>
                <option value="8">عقرب</option>
                <option value="9">قوس</option>
                <option value="10">جدی</option>
                <option value="11">دلو</option>
                <option value="12">حوت</option>`;
    $(document).ready(function() {


    //Billing Payments Dynamic Form Filed Add
          var i = 1;
                $("#add-btn").click(function(){
                $("#dynamicAddRemove").append('<tr>'+
                    '<td> <input type="text" class="form-control" placeholder="Enter Amount" name="moreFields['+i+'][amount]"/></td>'+
                    '<td> <select class="form-control" name="moreFields['+i+'][bill_year]">'+year+'</select></td>'+
                    '<td> <select class="form-control" name="moreFields['+i+'][bill_month]">'+month+'</select></td>'+
                    '<td> <input type="text" class="form-control" placeholder="Enter Description" name="moreFields['+i+'][description]"/></td>'+
                    '<td><button title="Remove Fields" class="remove-tr btn btn-sm btn-danger mr-1 mb-2">Remove</button></td>'+
                    '</tr>'
                    );
                    ++i;
                });

                $(document).on('click', '.remove-tr', function(){
                    $(this).parents('tr').remove();
                });
            //End of Billing Payments Dynamic Form Filed Add
  });
</script>
@endsection