@extends('layout.app')
@section('title')
    {{ __('انشاء فاتورة') }}
@stop

@section('css')
    {{-- <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"> --}}
    <link href="{{ asset('app-assets/hijri-date/css/bootstrap-datetimepicker.min.css') }}" rel="stylesheet" />

@endsection

@section('content')

    <div class="content-wrapper">
        <div class="content-body">
            <!-- users edit start -->
            <section class="app-user-edit">

                <!-- users edit account form start -->
                <form method="POST" action="{{ route('bills.store') }}">
                    @csrf
                    <div class="card">
                        <div class="card-header mb-2">
                            <h4 class="card-title">{{ __('انشاء فاتورة') }}</h4>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                {{-- user name --}}
                                <div class="col-lg-6 col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <label for="bill_num" class="form-label">{{ __('رقم الفاتورة') }}</label>
                                        <input type="text" class="form-control" id="bill_num" name="bill_num"
                                            value="{{ old('bill_num') }}" required autofocus>
                                    </div>
                                </div>
                                {{-- end user name --}}

                                {{-- user email --}}
                                <div class="col-lg-6 col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <label for="bill_association_id" class="form-label">{{ __('اسم الجهة') }}</label>
                                        <button type="button" class="text-success"
                                            style="padding: 0px 4px; margin: 6px 10px; border:none; background-color: white;"
                                            data-toggle="modal" data-target="#modals-create">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round" class="feather-plus-square">
                                                <rect x="3" y="3" width="18" height="18" rx="2"
                                                    ry="2"></rect>
                                                <line x1="12" y1="8" x2="12" y2="16"></line>
                                                <line x1="8" y1="12" x2="16" y2="12"></line>
                                            </svg>
                                        </button>
                                        <select class="select2 form-control" name="bill_association_id"
                                            id="bill_association_id">
                                            @foreach (App\Models\BillAssociation::where('school_id', Auth()->user()->school_id)->get() as $item)
                                                <option @if (old('bill_association_id') == $item->id) selected @endif
                                                    value="{{ $item->id }}">{{ $item->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                {{-- end user email --}}

                                {{-- user email --}}
                                <div class="col-lg-6 col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <label for="budget_id" class="form-label">{{ __('الميزانية') }}</label>
                                        <select class="select2 form-control" onchange="getLine()" name="budget_id"
                                            id="budget_id">
                                            <option disabled selected value="">{{ __('اختار الميزانية') }}</option>
                                            @foreach (App\Models\Budget::where('school_id', Auth()->user()->school_id)->get() as $item)
                                                <option @if (old('budget') == $item->id) selected @endif
                                                    value="{{ $item->id }}">{{ $item->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                {{-- end user email --}}

                                {{-- user email --}}
                                <div class="col-lg-6 col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <label for="line_id" class="form-label">{{ __('البند') }}</label>
                                        <select class="select2 form-control" onchange="getCategory()" name="line_id"
                                            id="line_id">
                                            <option selected disabled value="">عليك اختيار الميزانية اولا</option>
                                        </select>
                                    </div>
                                </div>
                                {{-- end user email --}}

                                {{-- user email --}}
                                <div class="col-lg-6 col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <label for="date" class="form-label">{{ __('تاريخ الفاتورة') }}</label>
                                        <input type="date" class="form-control" id="date" name="date"
                                            value="{{ old('date') }}" required>
                                    </div>
                                </div>
                                {{-- end user email --}}

                                {{-- user email --}}
                                <div class="col-lg-6 col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <label for="discount" class="form-label">{{ __('الخصم') }}</label>
                                        <input type="text" class="form-control" id="discount" onkeyup   ="totelCalc()"
                                            name="discount" value="{{ old('discount') }}">
                                    </div>
                                </div>
                                {{-- end user email --}}

                                {{-- user email --}}
                                <div class="col-lg-12 col-md-12 col-sm-12 mt-2">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" value="1" id="tax"
                                            onchange="totelCalc()" name="tax"
                                            @if (old('tax') == '1') checked @endif />
                                        <label class="custom-control-label"
                                            for="tax">{{ __('شامل قيمة الضريبة') }}</label>
                                    </div>
                                </div>
                                {{-- end user email --}}
                                <table class="invoice-table table table-borderless table-nowrap mb-0 mt-4">
                                    <thead class="align-middle">
                                        <tr class="table-active">
                                            <th scope="col" style="width: 50px;">#</th>
                                            <th scope="col" style="width: 200px;">
                                                {{ __('الصنف') }}
                                            </th>
                                            <th scope="col" style="width: 120px;">{{ __('الكمية') }}</th>
                                            <th scope="col" style="width: 120px;">{{ __('سعر الوحدة') }}</th>
                                            <th scope="col" style="width: 120px;">{{ __('الاجمالي') }}</th>
                                            <th scope="col" style="width: 120px;"></th>
                                        </tr>
                                    </thead>
                                    <tbody id="newlink">
                                        @if (old('category') && count(old('category')) != 0)
                                            @foreach (old('category') as $key => $item)
                                                <tr id="{{ $key + 1 }}" class="product">
                                                    <th scope="row" class="product-id">{{ $key + 1 }}</th>
                                                    <td>
                                                        <select name="category[]" id="category-{{ $key + 1 }}"
                                                            class="form-control category-line">
                                                            <option selected disabled value="">عليك اختيار البند اولا
                                                            </option>
                                                        </select>
                                                    </td>
                                                    <td>
                                                        <input type="number" class="form-control"
                                                            value="{{ old('quentity')[$key] }}"
                                                            onkeyup="calc({{ $key + 1 }})"
                                                            id="quentity-{{ $key + 1 }}" name="quentity[]"
                                                            placeholder="0" required />
                                                    </td>
                                                    <td>
                                                        <input type="number" class="form-control"
                                                            id="price-{{ $key + 1 }}"
                                                            onkeyup="calc({{ $key + 1 }})" name="price[]"
                                                            value="{{ old('price')[$key] }}" placeholder="0" required>
                                                    </td>
                                                    <td>
                                                        <input type="text" class="form-control product-line-price"
                                                            id="total-{{ $key + 1 }}" name="total[]"
                                                            value="{{ old('total')[$key] }}" readonly />
                                                    </td>
                                                    <td class="product-removal">
                                                        <a href="javascript:void(0)"
                                                            class="btn btn-success">{{ __('حذف') }}</a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @else
                                            <tr id="1" class="product">
                                                <th scope="row" class="product-id">1</th>
                                                <td>
                                                    <select name="category[]" id="category-1"
                                                        class="form-control category-line">
                                                        <option selected disabled value="">عليك اختيار البند اولا
                                                        </option>
                                                    </select>
                                                </td>
                                                <td>
                                                    <input type="number" class="form-control" onkeyup="calc(1)"
                                                        id="quentity-1" name="quentity[]" placeholder="0" required />
                                                </td>
                                                <td>
                                                    <input type="number" class="form-control" id="price-1"
                                                        onkeyup="calc(1)" name="price[]" placeholder="0" required>
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control product-line-price"
                                                        id="total-1" name="total[]" readonly />
                                                </td>
                                                <td class="product-removal">
                                                    <a href="javascript:void(0)"
                                                        class="btn btn-success">{{ __('حذف') }}</a>
                                                </td>
                                            </tr>
                                        @endif
                                    </tbody>
                                    <tbody>
                                        <tr id="newForm" style="display: none;">
                                            <td class="d-none" colspan="5">
                                                <p>{{ __('اضافة جديد +') }}</p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="8">
                                                <a href="javascript:new_link()" id="add-item"
                                                    class="btn btn-soft-secondary fw-medium"><i
                                                        class="ri-add-fill me-1 align-bottom"></i>
                                                    {{ __('اضافة جديد +') }}</a>
                                            </td>
                                        </tr>
                                        <tr class="border-top border-top-dashed mt-2">
                                            <td colspan="3"></td>
                                            <td colspan="5" class="p-0">
                                                <table
                                                    class="table table-borderless table-sm table-nowrap align-middle mb-0">
                                                    <tbody>
                                                        <tr>
                                                            <th scope="row">{{ __('السعر النهائي') }}</th>
                                                            <td style="width:300px;">
                                                                <input type="number"
                                                                    class="form-control bg-light border-0" id="totel"
                                                                    name="total_price" placeholder="0.00" readonly />
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <th scope="row">
                                                                {{ __('السعر النهائي شامل الضريبة والخصم') }}</th>
                                                            <td style="width:300px;">
                                                                <input type="number"
                                                                    class="form-control bg-light border-0"
                                                                    id="totel_with_tax" name="totel_price_with_tax"
                                                                    placeholder="0.00" readonly />
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                <!--end table-->
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

                                <div class="col-lg-12 col-md-12 col-sm-12">
                                    <button type="submit" class="btn btn-primary">{{ __('Submit') }}</button>
                                    <button type="reset" class="btn btn-light">{{ __('Cencel') }}</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </form>
            </section>
            <!-- users edit ends -->


            <div class="modal fade" id="modals-create">
                <div class="modal-dialog">
                    <form class="create-new-nature modal-content pt-0" action="{{ route('bill-associations.store') }}"
                        method="POST">
                        @csrf
                        <div class="modal-header mb-1">
                            <h5 class="modal-title" id="exampleModalLabel">اضافة جهة جديد</h5>
                        </div>
                        <div class="modal-body flex-grow-1">
                            <div class="form-group">
                                <label for="username">{{ __('اسم الجهة') }}</label>
                                <input type="text" class="form-control" name="name" id="name"
                                    value="{{ old('name') }}" required>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary mr-1 data-submit">حفظ</button>
                            <button type="reset" class="btn btn-outline-secondary" data-dismiss="modal">الغاء
                            </button>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
@endsection

@section('js')

    <!--Invoice create init js-->
    <script>
        var count = 1;

        function new_link() {
            count++;
            var e = document.createElement("tr"),
                t = (e.id = count, e.className = "product", '<tr><th scope="row" class="product-id">' + count +
                    '</th><td><select name="category[]" id="category-' + count +
                    '" class="form-control category-line"><option selected disabled value="">عليك اختيار البند اولا</option></select></td><td><input type="number" class="form-control" onkeyup="calc(' +
                    count + ')" id="quentity-' + count +
                    '" name="quentity[]"  placeholder="0" required /></td><td><input type="number" class="form-control" id="price-' +
                    count + '" onkeyup="calc(' + count +
                    ')" name="price[]" placeholder="0" required ></td><td><input type="text" class="form-control product-line-price" id="total-' +
                    count +
                    '" name="total[]" readonly /></td><td class="product-removal"><a class="btn btn-success">{{ __('حذف') }}</a></td></tr>'
                ),
                t = (e.innerHTML = document.getElementById("newForm").innerHTML + t, document.getElementById("newlink")
                    .appendChild(e), document.querySelectorAll("[data-trigger]"));
            Array.from(t).forEach(function(e) {
                new Choices(e, {
                    placeholderValue: "This is a placeholder set in the config",
                    searchPlaceholderValue: "This is a search placeholder"
                })
            }), remove(), resetRow(), getCategoryNew(count)
        }

        function remove() {
            Array.from(document.querySelectorAll(".product-removal a")).forEach(function(e) {
                e.addEventListener("click", function(e) {
                    removeItem(e), resetRow(), totelCalc()
                })
            })
        }

        function removeItem(e) {
            e.target.closest("tr").remove()
        }

        function resetRow() {
            Array.from(document.getElementById("newlink").querySelectorAll("tr")).forEach(function(e, t) {
                t += 1;
                e.querySelector(".product-id").innerHTML = t
            })
        }

        function totelCalc() {
            var totelPrice = document.getElementById("totel"),
                totelWithTaxPrice = document.getElementById("totel_with_tax"),
                tax = document.getElementById("tax"),
                discount = document.getElementById("discount"),
                totelValue = 0;
            Array.from(document.getElementsByClassName("product")).forEach(function(e) {
                Array.from(e.getElementsByClassName("product-line-price")).forEach(function(e) {
                    e.value && (totelValue += parseFloat(e.value))
                })
            })

            if (discount.value < 0) discount.value = 0;
            if (discount.value > 100) discount.value = 100;

            totelPrice.value = Number(totelValue.toFixed(2));

            var totelTax = 0,
                totelDiscount = 0;

            if (discount.value) {
                // totelDiscount = (discount.value * totelPrice.value)/100;
                totelDiscount = discount.value;
            }

            var totelWithDiscount = totelPrice.value - totelDiscount;

            if (tax.checked == true) {
                totelTax = (15 * totelPrice.value) / 100;
            }

            var totelValuewithtax = totelWithDiscount + totelTax;

            totelWithTaxPrice.value = Number(totelValuewithtax.toFixed(2));
        }

        function calc(id) {
            var quentity = document.getElementById("quentity-" + id),
                price = document.getElementById("price-" + id),
                totel = document.getElementById("total-" + id);


            var totelValue = quentity.value * price.value;

            totel.value = Number(totelValue.toFixed(2));

            totelCalc();

        }

        function getCategoryNew(row) {
            // Department id
            var id = $('#line_id').val();
            // AJAX request
            $.ajax({
                url: '/c-panel/getCategory/ajax/' + id,
                type: 'get',
                data: "json",
                success: function(data) {

                    var option = '';
                    option += '<option value="">يجب اختيار الصنف</option>';
                    $.each(data, function(key, value) {
                        option += '<option value="' + value.id + '">' + value.name + '</option>';
                    });

                    document.getElementById('category-' + row).innerHTML = option;
                }
            });
        }

        function getCategory() {
            // Department id
            var id = $('#line_id').val();
            // AJAX request
            $.ajax({
                url: '/c-panel/getCategory/ajax/' + id,
                type: 'get',
                data: "json",
                success: function(data) {
                    Array.from(document.getElementsByClassName("product")).forEach(function(e) {
                        Array.from(e.getElementsByClassName("category-line")).forEach(function(e) {
                            var option = '';
                            option += '<option value="">يجب اختيار الصنف</option>';
                            $.each(data, function(key, value) {
                                option += '<option value="' + value.id + '">' + value
                                    .name + '</option>';
                            });

                            e.innerHTML = option;
                        })
                    })
                }
            });
        }

        function getLine() {
            // Department id
            var id = $('#budget_id').val();

            // AJAX request
            $.ajax({
                url: '/c-panel/getLine/ajax/' + id,
                type: 'get',
                data: "json",
                success: function(data) {
                    $('#line_id').empty();
                    $('#line_id').append('<option value="">يجب اختيار البند</option>')
                    $.each(data, function(key, value) {
                        // console.log(value.name)
                        $('#line_id').append('<option value="' + value.id + '">' + value.name +
                            '</option>')
                    });

                }
            });
        }
    </script>
@endsection