@extends('panel.layouts.main')
@section('content')

    <div class="post d-flex flex-column-fluid" id="kt_post">
        <div id="kt_content_container" class="container">
            <div class="card">
                <div class="card-header border-0 pt-6">
<!--                -->                    <div class="card-toolbar">
                        <div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">
                            <a href="/panel/factor/find" class="btn btn-light-primary me-3 mb-10">لیست فاکتور ها</a>
                            @if(empty($factor))
                                @php
                                    $lf = \App\Models\factors::orderBy('id', 'DESC')->first()
                                @endphp
                            <div style="padding: calc(0.75rem + 1px) calc(1.5rem + 1px);font-size: 14px!important;">کد فاکتور: <strong>{{ str_pad((!empty($lf) ? $lf->id : "0") + 1, 5, "0", STR_PAD_LEFT) }}#</strong></div>
                                @else
                                <div style="padding: calc(0.75rem + 1px) calc(1.5rem + 1px);font-size: 14px!important;">کد فاکتور: <strong>{{ str_pad($factor->id, 5, "0", STR_PAD_LEFT) }}#</strong></div>
                            @endif
                        </div>
                        <div class="d-flex justify-content-end align-items-center d-none"
                             data-kt-customer-table-toolbar="selected">
                            <div class="fw-bolder me-5">
                                <span class="me-2" data-kt-customer-table-select="selected_count"></span>انتخاب شده
                            </div>
                            <button type="button" class="btn btn-outline-danger"
                                    data-kt-customer-table-select="delete_selected">حذف انتخاب شده
                            </button>
                        </div>
                    </div>
                </div>

                <div class="card-body pt-0">
                    <form   action="" method="post">


                        @if(!empty($errors->all()))
                            <div class="alert alert-dismissible bg-danger d-flex flex-column flex-sm-row p-5 mb-10">
                                <!--begin::Icon-->
                                <span class="svg-icon svg-icon-2hx svg-icon-light me-4 mb-5 mb-sm-0">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                            <path opacity="0.3" d="M2 4V16C2 16.6 2.4 17 3 17H13L16.6 20.6C17.1 21.1 18 20.8 18 20V17H21C21.6 17 22 16.6 22 16V4C22 3.4 21.6 3 21 3H3C2.4 3 2 3.4 2 4Z" fill="black"></path>
                                            <path d="M18 9H6C5.4 9 5 8.6 5 8C5 7.4 5.4 7 6 7H18C18.6 7 19 7.4 19 8C19 8.6 18.6 9 18 9ZM16 12C16 11.4 15.6 11 15 11H6C5.4 11 5 11.4 5 12C5 12.6 5.4 13 6 13H15C15.6 13 16 12.6 16 12Z" fill="black"></path>
                                        </svg></span>

                                <div class="d-flex flex-column text-light pe-0 pe-sm-10">
                                    <!--begin::Title-->
                                    <h4 class="mb-2 light">اطلاعات وارد شده اشتباه میباشد:</h4>
                                    <ul class="mt-4">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                                <!--end::Wrapper-->

                                <!--begin::Close-->
                                <button type="button" class="position-absolute position-sm-relative m-2 m-sm-0 top-0 end-0 btn btn-icon ms-sm-auto" data-bs-dismiss="alert">
                <span class="svg-icon svg-icon-2x svg-icon-light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                                <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="black"></rect>
                                                <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="black"></rect>
                                            </svg>.</span>
                                </button>
                                <!--end::Close-->

                            </div>
                        @endif

                        @csrf

                        <div>
                            <div class="row mb-7">
                                <div class="col col-md-9">
                                    <label class="required fs-6 fw-bold mb-2">اطلاعات مشتری</label>
                                    <div class="input-group input-group-solid mb-5 ajax-ative">
                                        <input type="text" class="form-control" style="text-align: left;width:70px;flex: none" placeholder="کد" value="{{ $cus->id ?? ""}}" name="customer"  id="customer-code-field" oninput="customerCodeFind(this);">
                                        <span class="input-group-text">#</span>
                                        <input type="text" class="form-control" style="width: 60%"  value="{{ $cus->name ?? "" }}" placeholder="نام مشتری" id="customer-name-field" oninput="customerNameFind(this);">
                                    </div>
                                    <div class="ajax-result" id="ajax-customer">
                                        <ul style="display: none;">
                                        </ul>
                                    </div>
                                </div>

                                <div class="col col-md-3">
                                    <label class="fs-6 fw-bold mb-2"> </label>
                                    <input class="form-control form-control-solid datePicker" value="{{ $factor->date ?? "" }}" name="date"/>
                                </div>

                                <div class="table-responsive" style="overflow: visible">
                                    <table class="table table-striped gy-7 gs-7">
                                        <tbody id="boardTable">
                                        </tbody>
                                    </table>

                                </div>
                                <div class="col col-md-8 ">
                                    @if(!empty($factor))
                                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_1">
                                        ثبت اطلاعات پرداخت
                                    </button>

                                        <table class="table table-striped gy-7 gs-7">
                                            <tr>
                                                <th>ردیف</th>
                                                <th>نوع دریافتی</th>
                                                <th>مبلغ (ریال)</th>
                                                <th>تاریخ دریافت</th>
                                                <th>شماره چک</th>
                                                <th>تاریخ سر رسید چک</th>
                                                <th>نام بانک</th>
                                                <th></th>

                                            </tr>
                                        @foreach(\App\Models\payments::where("factor_id",$factor->id)->get() as $i => $f)

                                        <tr>
                                            <td>{{ $i + 1 }}</td>
                                            <td>{{ $f->type == 0 ? "نقدی" : "چک" }}</td>
                                            <td>{{ number_format($f->price) }} ریال </td>
                                            <td>{{ $f->receive_date ?? "-" }}  </td>
                                            <td>{{ $f->check_number ?? "-" }}  </td>
                                            <td>{{ $f->due_date ?? "-" }}  </td>
                                            <td>{{ $f->bank ?? "-" }}  </td>
                                            <td>
                                                <a class="btn btn-outline-danger" href="/payment/delete/{{$f->id}}"><i class="fa fa-eraser"></i></a>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </table>
                                        <br>

                                        @endif
                                </div>
                                <div class="col col-md-4 ">
                                    <div class="row">
                                        <div style="font-size: 16px;padding: 10px">جمع فاکتور: <span id="total-price">0</span> ریال </div>

                                        <br>
                                        درصد تخفیف :
                                        <div class="input-group ">
                                            <input type="number" step="0.01" id="discount" oninput="discountInput(this)" class="form-control" style="text-align: left;width:150px;flex: none" placeholder="درصد">
                                            <span class="input-group-text">%</span>
                                            <input type="text" id="discountPrice" value="{{ $factor->discount_price ?? "" }}" name="discount_price" oninput="discountPriceInput(this)" class="form-control" style="width: 40%"  placeholder="تخفیف اعمال شده" >
                                        </div>
                                        <br>
                                        <br>
                                        <div style="font-size: 16px;padding: 10px">مشمول مالیات: <span id="dis-tax-price">0</span> ریال </div>

                                        <br>
                                        <br>
                                        <div class="form-check form-switch form-check-custom form-check-solid" style="display: none">
                                            <input class="form-check-input" type="checkbox" {{ isset($factor) && $factor->tax_price !== 0 ? "checked":"" }} id="taxBox" onchange="updatePrice()"/>
                                            <label class="form-check-label" for="taxBox">
                                                مالیات
                                            </label>
                                        </div>

                                        <div style="font-size: 16px;padding: 10px;display: none">مبلغ مالیات اعمال شده: <span id="tax">0</span> ریال </div>
                                        <input type="hidden" name="tax_price" id="tax_price" >
                                        <br>
                                        <div style="font-size: 16px;padding: 10px">مبلغ نهایی فاکتور: <span id="total-final-price">0</span> ریال </div>
                                        <input type="hidden" name="total_price" id="total_price" >
                                        @if(empty($factor))
                                        <div class="form-check form-switch form-check-custom form-check-solid">
                                            <input class="form-check-input" type="checkbox" checked id="taxBox" onchange="updatePrice()"/>
                                            <label class="form-check-label" for="taxBox">
                                                مالیات
                                            </label>
                                        </div>
                                            @endif
                                    </div>

                                </div>


                            </div>

                            <div style="float: left">
                                <a href="/panel/factor/find/" class="btn btn-white me-3">لغو
                                </a>
                                @if(!empty($factor))
                                    <a href="/panel/factor/pdf/{{ $factor->id }}" class="btn btn-white me-3">چاپ</a>
                                @endif
                                <button type="submit" id="kt_modal_add_customer_submit" class="btn btn-primary">
                                    <span class="indicator-label">ثبت</span>
                                    <span class="indicator-progress">لطفا صبر کنید...
                                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                    </span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

            </div>

        </div>
    </div>
    @if(!empty($factor))

    <div class="modal fade" tabindex="-1" id="kt_modal_1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">اطلاعات پرداخت</h5>

                    <!--begin::Close-->
                    <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                        <span class="svg-icon svg-icon-2x"></span>
                    </div>
                    <!--end::Close-->
                </div>
                <form id="payment-ajax" action="">
                    @csrf
                    <input type="hidden" name="factorId" value="{{ $factor->id }}">
                    <div class="modal-body row ">
                        <div class="col col-md-6 mt-5">
                            <select id="select" name="paymentType" onchange="selectPayment(this.value)"  class='form-control'>
                                <option value='0'>نقدی</option>
                                <option value='1'>چک</option>
                            </select>
                        </div>
                        <br>
                        <div class="col col-md-6 mt-5">
                            <label class="fs-6 fw-bold mb-2">مبلغ (ریال)</label>
                            <input class="form-control form-control" id="paymentPrice" name="paymentPrice">

                        </div>
                        <div class="col col-md-6 mt-5">
                            <label class="fs-6 fw-bold mb-2 ">تاریخ دریافت</label>
                            <input class="form-control form-control datePicker" id="paymentDate" name="paymentDate">
                        </div>
                        <div class="col col-md-6 mt-5">
                            <label class="fs-6 fw-bold mb-2 ">شماره چک</label>
                            <input class="form-control form-control" disabled id="paymentNumber" name="paymentNumber">
                        </div>
                        <div class="col col-md-6 mt-5">
                            <label class="fs-6 fw-bold mb-2 ">تاریخ سر رسید چک</label>
                            <input class="form-control form-control datePicker" disabled id="paymentDue" name="paymentDue">
                        </div>
                        <div class="col col-md-6 mt-5">
                            <label class="fs-6 fw-bold mb-2 ">نام بانک</label>
                            <input class="form-control form-control" disabled id="paymentBank" name="paymentBank">
                        </div>


                    </div>

                    <div class="modal-footer">

                        <button type="button" id="close_modal_payment" class="btn btn-light" data-bs-dismiss="modal">انصراف</button>
                        <input type="submit" onclick="location.reload(); "  class="btn btn-primary" value="ثبت">
                    </div>
                </form>

            </div>

        </div>
    </div>
    @endif

    <div class="modal fade" tabindex="-1" id="kt_modal_timeRange">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">بازه تاریخ</h3>

                    <!--begin::Close-->
                    <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                        <span class="svg-icon svg-icon-1"></span>
                    </div>
                    <!--end::Close-->
                </div>

                <div class="modal-body">

                    <div id="time-range-content">

                    </div>
                    <button type="button" class="btn btn-success" onclick="modalAddTime()"><i class="las la-arrow-down fs-2"></i> اضافه کردن تاریخ</button>
                    <br>
                    <br>
                    <table class="table table-striped gy-7 gs-7" id="table-date-content">
                        <tbody>



                        </tbody>
                    </table>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">بستن</button>
                    <button type="button" class="btn btn-primary" id="submitModal" onclick="submitModal()">ثبت</button>
                </div>
            </div>
        </div>
    </div>

@endsection
@section("head")
    <link rel="stylesheet" href="/assets/css/persian-datepicker.min.css"/>
    <style>

    </style>
@endsection
@section("script")
    <script src="/assets/js/persian-date.min.js" type="text/javascript"></script>
    <script src="/assets/js/persian-datepicker.min.js" type="text/javascript"></script>
    <script>
        function addCommas(nStr)
        {
            nStr += '';
            x = nStr.split('.');
            x1 = x[0];
            x2 = x.length > 1 ? '.' + x[1] : '';
            var rgx = /(\d+)(\d{3})/;
            while (rgx.test(x1)) {
                x1 = x1.replace(rgx, '$1' + ',' + '$2');
            }
            return x1 + x2;
        }
        function selectPayment(value){
            if (value == 1){

                $("#paymentDue").removeAttr("disabled");
                $("#paymentBank").removeAttr("disabled");
                $("#paymentNumber").removeAttr("disabled");
            }else{
                $("#paymentDue").prop("disabled",true);
                $("#paymentBank").prop("disabled",true);
                $("#paymentNumber").prop("disabled",true);
            }
        }

        function customerNameFind(t) {
            $("#ajax-customer ul").empty();
            $.get("/panel/customer/find/ajax/?name=" + t.value, function(data, status){
                $("#ajax-customer ul").empty();
                $("#ajax-customer ul").show();
                data.forEach(function (item) {
                    $("#ajax-customer ul").append("<li onclick='customerClick(" + item.id + ");' style='width: 100%'><div style='width: 64px;text-align: left'>" + item.id + "</div><div style='width: 5%;text-align: center'>#</div><div>" +  item.name   + "</div></li>")
                });
            });

        }
        function boardNameFind(t,code){
            $("#ajax-board-"+code+ " ul").empty();
            $.get("/panel/board/find/ajax/?name=" + t.value, function(data, status){
                $("#ajax-board-"+code+ " ul").empty();
                $("#ajax-board-"+code+ " ul").show();
                data.forEach(function (item) {
                    $("#ajax-board-"+code+ "  ul").append("<li onclick='boardClick(" + item.id + ","+code+");' style='width: 100%'><div style='width: 64px;text-align: left'>" + item.id + "</div><div style='width: 5%;text-align: center'>#</div><div>" +  item.address   + "</div></li>")

                });
            });
        }
        function boardClick(id,code) {
            $("#ajax-board-"+code+ "  ul").hide();
            $.get("/panel/board/find/ajax/?code=" + id, function(data){
                $("#board-address-field-"+code).val(data.address);
                boardSelectType(code).val(data.type).change();
                $("#board-code-field-"+code).val(data.id);
            });
            boardCodeFindByCode(id,code);
            chackDub(id);
        }
        function customerCodeFind(t) {
            $("#ajax-customer ul").empty();
            $.get("/panel/customer/find/ajax/?code=" + t.value, function(data){
                if(data[0] === undefined){
                    $("#customer-name-field").val("*** کد مشتری نامعتر");

                }else{
                    $("#customer-name-field").val(data[0].name);
                    $("#ajax-customer ul").empty();
                }

            });

        }
        function customerClick(id) {
            $("#ajax-customer ul").hide();
            $.get("/panel/customer/find/ajax/?code=" + id, function(data){
                $("#customer-code-field").val(data[0].id);

                $("#customer-name-field").val(data[0].name);
            });

        }
        function boardItem(id){
            return $("#board-td-" + id)
        }
        function boardItemRemove(id){
            boardItem(id).remove();
        }
        boardItemCount = 0
        function addBoardItem(){
            boardItemCount++;
            $("#boardTable").append(
                "<tr id='board-td-" +  boardItemCount +"'>" +
                    "<td>" +
                        "<div class='input-group input-group mb-5'>" +
                        "<input type='text' class='form-control' placeholder='کد' name='boardCode[]' onchange='chackDub("+boardItemCount+")'  id='board-code-field-" + boardItemCount + "' oninput='boardCodeFindByCode(this.value," + boardItemCount + ")' style='flex:none;width: 65px;!important;text-align: center '>" +
                        "<span class='input-group-text'>#</span>" +
                        "<select name='board_select_type[]' id='board-select-type-" + boardItemCount  + "'  class='form-control' style='flex:none;width: 107px;!important;text-align: center' >" +
                            "<option value='' >همه</option>"+
                        @foreach(\App\Models\board_types::all() as $b)
                            "<option value='{{$b->id}}'>{{ $b->name }}</option>" +
                        @endforeach
                        "</select>" +
                        "<input type='text' id='board-address-field-"  + boardItemCount + "' class='form-control' placeholder='آدرس تابلو' oninput='boardNameFind(this,"+boardItemCount+");' id='board-code-field'>" +
                        '<div class="ajax-result" style="bottom: 0px;" id="ajax-board-'+boardItemCount+'"> <ul style="display: none;"> </ul></div>'+
                    "</div>"+
                    "</td>" +
                    "<td style='width:450px'>" +
                    "<div>" +
                        "<div class='input-group input-group mb-5' style='width:100%'>" +
                            "<input type='text' class='form-control'  name='board_day_price[]' id='board-price-" + boardItemCount+ "' placeholder='قیمت یک روز تابلو' oninput='boardPrice(" + boardItemCount + ",1)' style='text-align:left'>" +
                            "<span class='input-group-text'> × </span>" +
                            "<input type='number' class='form-control' name='board_day[]' value ='1' id='board-day-" + boardItemCount+ "' placeholder='روز' oninput='boardPrice(" + boardItemCount + ",2)' style='width:70px;flex:none;'>" +
                            "<span class='input-group-text'> = </span>" +
                            "<input type='text' class='form-control board-total-price' id='board-total-price-" + boardItemCount+ "' placeholder='قیمت کل'  oninput='boardPrice(" + boardItemCount + ",3)' >" +
                        "</div>"+
                    "</div>"+
                    "</td>" +
                    // "<td width='0' id='board-time-range-"+boardItemCount+"'>" +
                    // "</td>" +

                    "<td style='direction: ltr'>"+
                        "<button type='button' class='btn btn-icon btn-outline-danger' style='margin-right:5px' onclick='boardItemRemove(" + boardItemCount + ")'><i class='las la-trash fs-2'></i></button>"+
                        "<button type='button' class='btn btn-icon btn-success' style='margin-right:5px' onclick='addBoardItem()'><i class='las la-arrow-down fs-2'></i></button>"+
                        "<button type='button' class='btn btn-icon btn-primary ' onclick='addTimeRange(" + boardItemCount + ")'><i class='las la-calendar fs-2'></i></button>"+

                "</td>" +
                "</tr>")
        }
        function sleep(milliseconds) {
            const date = Date.now();
            let currentDate = null;
            do {
                currentDate = Date.now();
            } while (currentDate - date < milliseconds);
        }

        function boardInputCode(id){
            return $("#board-code-field-" + id)
        }
        function boardInputAddress(id){
            return $("#board-address-field-" + id)
        }
        function boardSelectType(id){
            return $("#board-select-type-" + id)
        }
        function boardInputPrice(id){
            return $("#board-price-" + id)
        }
        function boardInputTotalPrice(id){
            return $("#board-total-price-" + id)
        }
        function boardInputDay(id){
            return $("#board-day-" + id)
        }
        function boardCodeFindByCode(t,row){

            $.get("/panel/board/find/ajax/?code=" + t, function(data){
                if(data === undefined){
                    boardInputAddress(row).val("*** کد تابلو نامعتر");
                    boardSelectType(row).val("").change();
                    boardTimeRangeClear(row);
                }else{
                    if(data.address == undefined){
                        boardInputAddress(row).val(data.name);
                        boardSelectType(row).val(9).change();
                        boardInputPrice(row).val(data.price);
                        boardPrice(row,1);
                        boardTimeRangeClear(row);
                        boardTimeRangeAddItem(row,data.id);
                    }else{
                        boardInputAddress(row).val(data.address);
                        boardSelectType(row).val(data.type).change();
                        boardInputPrice(row).val(data.price);
                        boardPrice(row,1);
                        boardTimeRangeClear(row);
                        boardTimeRangeAddItem(row,data.id);
                    }

                }


            });

        }
        function boardPrice(row,flag){
            // console.log(addCommas(boardInputTotalPrice(row).val()))
            if(flag === 1){
                boardInputTotalPrice(row).val(Math.floor(boardInputPrice(row).val().replaceAll(",","") * boardInputDay(row).val()))
            }
            if(flag === 2){
                boardInputTotalPrice(row).val(Math.floor(boardInputPrice(row).val().replaceAll(",","") * boardInputDay(row).val()))
                boardInputPrice(row).val(Math.floor(boardInputTotalPrice(row).val().replaceAll(",","") / boardInputDay(row).val()))
            }
            if(flag === 3){
                boardInputPrice(row).val(Math.floor(boardInputTotalPrice(row).val().replaceAll(",","") / boardInputDay(row).val()))
            }
            boardInputPrice(row).val(addCommas(boardInputPrice(row).val().replaceAll(",","")));
            boardInputTotalPrice(row).val(addCommas(boardInputTotalPrice(row).val().replaceAll(",","")));
            updatePrice()

        }
        totalPrice = 0;
        function updatePrice(){
            totalPrice = 0;
            tax = $("#taxBox:checked").val() === "on";

            $(".board-total-price").get().forEach(function(entry) {
                totalPrice += parseInt(entry.value.replaceAll(",",""))
            });
            $("#total-price").html(addCommas(totalPrice))
            $("#dis-tax-price").html(addCommas(totalPrice - $("#discountPrice").val().replaceAll(",","")))

            taxPrice = 0
            if(tax){
                taxPrice = (totalPrice -$("#discountPrice").val().replaceAll(",","")) * 0.09
            }
            $("#tax").html(addCommas(taxPrice))
            $("#total-final-price").html(addCommas(totalPrice - $("#discountPrice").val().replaceAll(",","") + taxPrice))
            $("#total_price").val(addCommas(totalPrice - $("#discountPrice").val().replaceAll(",","") + taxPrice))
            $("#tax_price").val(taxPrice)
        }
        function discountInput(t){
            dis = t.value

            discountI = (dis / 100) * totalPrice
            $("#discountPrice").val(addCommas(discountI.toFixed(0)) )
            updatePrice()
        }
        function discountPriceInput(t){
            $(t).val(addCommas(t.value.replaceAll(",","")))
            dis = t.value.replaceAll(",","")
            discountI = (dis / 100) / totalPrice * 10000
            $("#discount").val(discountI.toFixed(2))
            updatePrice()
        }
        function boardTimeRange(row){
            return $("#board-time-range-" + row)
        }
        function boardTimeRangeClear(row){
            $("#board-time-range-" + row + " div").remove();
        }
        var timeRangeInputAutoAdd = [];

        function dataPickerAdd(timeRangeId,boardId,row){
            dataa = [];
            $.ajax({
                url : "/panel/board/reserve?boardId=" + boardId,
                type : "get",
                async: false,
                success : function(res) {
                    dataa = res;
                },
                error: function() {
                    connectionError();
                }
            });

            $('#board-time-range-from-' + timeRangeId).persianDatepicker({
                autoClose: true,
                format: 'YYYY/MM/DD',
                checkDate: function(unix){
                    var d = new persianDate(unix);
                    d.formatPersian = false;

                    flag = 0;
                    dataa.forEach(function (item) {
                        if(item[0] === d.format("L")){

                            flag = 1;
                        }
                    });
                    return flag !== 1;

                },
                onSelect: function(dateText) {
                    timeRangeChange(timeRangeId,row,boardId)
                },
                onShow: function (){
                    dataa.forEach(function (item) {
                        console.log(item[0].replace("/", ",").replace("/", ",").replace(/(,)(0)/g, ","))
                        $("td[value='"+item[0].replace("/", ",").replace("/", ",").replace(/(,)(0)/g, ",")+"'] span").text(item[1])
                    });

                }
            });
            $('#board-time-range-to-' + timeRangeId).persianDatepicker({
                autoClose: true,

                format: 'YYYY/MM/DD',
                checkDate: function(unix){
                    var d = new persianDate(unix);
                    d.formatPersian = false;
                    flag = 0;
                    dataa.forEach(function (item) {
                        if(item[0] === d.format("L")){
                            $("td[data-unix='"+unix+"'] span").text(item[1])
                            flag = 1;
                        }
                    });

                    return flag !== 1;
                },
                onSelect: function(dateText) {
                    timeRangeChange(timeRangeId,row,boardId)
                },
                altFieldFormatter: function(unixDate){
                    return unixDate;

            }

            });
            $('#board-time-range-to-' + timeRangeId).val("")
            $('#board-time-range-from-' + timeRangeId).val("")
        }
        var persianNumbers = [/۰/g, /۱/g, /۲/g, /۳/g, /۴/g, /۵/g, /۶/g, /۷/g, /۸/g, /۹/g],
            arabicNumbers  = [/٠/g, /١/g, /٢/g, /٣/g, /٤/g, /٥/g, /٦/g, /٧/g, /٨/g, /٩/g];
        function fixNumbers(str){
            if(typeof str === 'string'){
                for(var i=0; i<10; i++){
                    str = str.replace(persianNumbers[i], i).replace(arabicNumbers[i], i);
                }
            }
            return str;
        }
        days = [];
        function timeRangeChange(timeRangeId,row,boardId){

            if ( $('#board-time-range-to-' + timeRangeId).val() !== "" && $('#board-time-range-from-' + timeRangeId).val() !== ""){
                $.ajax({
                    url : "/panel/board/day/ajax?from=" + fixNumbers($('#board-time-range-from-' + timeRangeId).val()) + "&to=" + fixNumbers($('#board-time-range-to-' + timeRangeId).val()) + "&boardId=" + boardId,
                    type : "get",
                    async: false,
                    success : function(res) {

                        $("#board-time-range-days-" + timeRangeId).val(res.days)
                    },
                    error: function() {
                        connectionError();
                    }
                });
                // boardInputDay(row).val(timeRangeDays(row));
            }
            // if(!(timeRangeInputAutoAdd.includes(timeRangeId)) && ( $('#board-time-range-to-' + timeRangeId).val() !== "" && $('#board-time-range-from-' + timeRangeId).val() !== "")){
            //     timeRangeInputAutoAdd.push(timeRangeId);
            //     boardTimeRangeAddItem(row,boardId)
            //
            // }
        }
        function timeRangeDays(id) {
            days = 0
           $("#board-time-range-" + id + " .time-range-days").each(function (i, obj) {
               if (obj.value !== ""){
                   days = parseInt(days) +  parseInt(obj.value);
               }

            });
            return days;
        }


        timerange = 0;


        async function boardTimeRangeAddItem(row,boardId){
            timerange++;

            boardTimeRange(row).append(
                "<div class='input-group input-group mb-5' id='board-time-range-item-" + timerange + "'>" +
                    "<input type='hidden' class='time-range-days' id='board-time-range-days-" + timerange + "'>" +
                    "<input type='text' class='form-control'  name='board_from[" + boardId + "][]' id='board-time-range-from-" + timerange + "' style='flex:none;width: 100px;'>" +
                    "<span class='input-group-text'>تا</span>" +
                    "<input type='text' class='form-control' name='board_to[" + boardId + "][]' id='board-time-range-to-" + timerange + "' style='flex:none;width: 100px;' >" +
                    "<button type='button' class='btn btn-icon btn-outline-danger' onclick='boardTimeRangeRemoveItem(" + timerange + ")'><i class='las la-minus fs-2'></i></button>" +
                "</div>");
            dataPickerAdd(timerange,boardId,row);
        }

        function boardTimeRangeRemoveItem(id){
            $("#board-time-range-item-" + id).remove();
        }
        $( "#payment-ajax " ).submit(function(e) {
            e.preventDefault();

            $.ajax({
                type: "post",
                url: "/panel/payment/ajax",
                data: $( this ).serialize(),
                success: function(data)
                {
                    console.log(data)
                    $( "#payment-ajax input[type=text]" ).val("");
                    $("#close_modal_payment").click()
                }
            });

        });


        $(document).ready(function() {
            dataRangeInput = [];

            @if(!empty($row))
            @foreach($row as $r)
            @if(isset($dates))
                @foreach(\App\Models\pishFactorDates::where("factor_row_id",$r->id)->get() as $date)
                dataRangeInput.push([{{ $r->board_id }},"{{ \App\Models\factors::fa(Verta::instance($date->start)->format("Y/m/d"))}}","{{ \App\Models\factors::fa(Verta::instance($date->end)->format("Y/m/d")) }}"])
                @endforeach
            @else
                @foreach(\App\Models\factorDates::where("factor_row_id",$r->id)->get() as $date)
                dataRangeInput.push([{{ $r->board_id }},"{{ \App\Models\factors::fa(Verta::instance($date->start)->format("Y/m/d"))}}","{{ \App\Models\factors::fa(Verta::instance($date->end)->format("Y/m/d")) }}"])
                @endforeach
            @endif
            boardItemCount++;

            $("#boardTable").append(
                "<tr id='board-td-" +  boardItemCount +"'>" +
                "<td>" +
                "<div class='input-group input-group mb-5'>" +
                "<input type='text' class='form-control' placeholder='کد' name='boardCode[]' onchange='chackDub("+boardItemCount+")' value='{{ $r->board_id }}'  id='board-code-field-" + boardItemCount + "' oninput='boardCodeFindByCode(this.value," + boardItemCount + ")' style='flex:none;width: 65px;!important;text-align: center '>" +
                "<span class='input-group-text'>#</span>" +
                "<select name='board_select_type[]' id='board-select-type-" + boardItemCount  + "'  class='form-control' style='flex:none;width: 107px;!important;text-align: center' >" +
                "<option value='' >همه</option>"+
                @foreach(\App\Models\board_types::all() as $b)
                    "<option {{ \App\Models\boards::find($r->board_id)->type ?? 0 === $b->id ? "selected" : "" }} value='{{$b->id}}'>{{ $b->name }}</option>" +
                @endforeach
                    "</select>" +
                "<input type='text' id='board-address-field-"  + boardItemCount + "' class='form-control' placeholder='آدرس تابلو' value='{{ \App\Models\boards::find($r->board_id)->address  ?? ""}}' oninput='boardNameFind(this,"+boardItemCount+");'   id='board-code-field'>" +
                '<div class="ajax-result" style="bottom: 0px;" id="ajax-board-'+boardItemCount+'"> <ul style="display: none;"> </ul></div>'+
                "</div>"+
                "</td>"+
                "<td>"+
                "<div>" +
                "<div class='input-group input-group mb-5' style='width:450px'>" +
                "<input type='text' class='form-control'  name='board_day_price[]' value='{{$r->price}}' id='board-price-" + boardItemCount+ "' placeholder='قیمت یک روز تابلو' oninput='boardPrice(" + boardItemCount + ",1)' style='text-align:left'>" +
                "<span class='input-group-text'> × </span>" +
                "<input type='number' class='form-control' name='board_day[]'  value ='{{$r->count}}' id='board-day-" + boardItemCount+ "' placeholder='روز' oninput='boardPrice(" + boardItemCount + ",2)' style='width:70px;flex:none;'>" +
                "<span class='input-group-text'> = </span>" +
                "<input type='text' class='form-control board-total-price' id='board-total-price-" + boardItemCount+ "' placeholder='قیمت کل'  oninput='boardPrice(" + boardItemCount + ",3)' >" +
                "</div>"+
                "</div>"+
                "</td>" +

                "<td style='direction: ltr'>"+
                "<button type='button' class='btn btn-icon btn-outline-danger' style='margin-right:5px' onclick='boardItemRemove(" + boardItemCount + ")'><i class='las la-trash fs-2'></i></button>"+
                "<button type='button' class='btn btn-icon btn-success' style='margin-right:5px' onclick='addBoardItem()'><i class='las la-arrow-down fs-2'></i></button>"+
                "<button type='button' class='btn btn-icon btn-primary ' onclick='addTimeRange(" + boardItemCount + ")'><i class='las la-calendar fs-2'></i></button>"+

                "</td>" +
                "</tr>")
                // boardCodeFindByCode(document.getElementById("board-code-field-" + boardItemCount),boardItemCount)
            boardPrice(boardItemCount,1)


                @endforeach
                @else
                    addBoardItem();
                @endif


            $('.datePicker').persianDatepicker({
                autoClose: true,
                format: 'YYYY/MM/DD',
                    initialValue: true,
            });
            updatePrice();

            function ig(e){
                $(".indicator-label").show();
                $(".indicator-progress").hide();
                e.preventDefault();
            }




            $("form").submit(function(e){
                $("#boardTable tr").each(function( index ) {
                    price = $("#boardTable tr input[placeholder='قیمت یک روز تابلو']")[index].value.replaceAll(",","")
                    tprice = $("#boardTable tr input[placeholder='قیمت کل']")[index].value.replaceAll(",","")
                    if(price < 0 || price === "NaN" || tprice < 0 ||tprice == "NaN" || tprice == "" || price=="" ) {
                        Swal.fire({
                            text: "فیلد قیمت را درست وارد کنید",
                            icon: "error",
                        });
                        ig(e)
                    }

                    aS = $("#boardTable tr input[placeholder='آدرس تابلو']")[index].value
                    if(aS === "" || aS === "None") {
                        Swal.fire({
                            text: "کد تابلو نامعتبر است.",
                            icon: "error",
                        });
                        ig(e)
                    }



                });
                $("#boardTable tr").each(function( index ) {

                    if($("input[name='date']").val() === "" ) {
                        Swal.fire({
                            text: "تاریخ نمی تواند خالی باشد",
                            icon: "error",
                        });
                        ig(e)
                    }

                });

                if($("#customer-code-field").val() === "" || $("#customer-name-field").val() ==="*** کد مشتری نامعتر") {
                    Swal.fire({
                        text: "کد مشتری نامعتبر است",
                        icon: "error",
                    });
                    ig(e)
                }



            });

            // $("document").on('input', 'input:text', function() {
            //
            //     if($("#customer-code-field").val() === ""){
            //         // $('form').submit(false);
            //         $("#kt_modal_add_customer_submit").prop( "disabled", true );
            //     }else{
            //         // $('form').submit(true);
            //         $("#kt_modal_add_customer_submit").prop( "disabled", false );
            //     }
            //
            // });


        });

        function contains(a, obj) {
            var i = a.length;
            while (i--) {
                if (a[i] === obj) {
                    return true;
                }
            }
            return false;
        }
        function chackDub(b){
            var flag = [];
            $("input[name='boardCode[]']").map(function(){
                if (contains(flag,$(this).val()) ){
                    Swal.fire({
                        text: "کد " + $(this).val() + " تابلو تکراری",
                        icon: "error",
                    });
                    boardItemRemove(b);
                }
                flag.push($(this).val());
            }).get();

        }
        date = [];
        function addTimeRange(boardItemCount){
            timerange=0;
            BoardId = $("#board-code-field-" + boardItemCount).val()
            BoardId = parseInt(BoardId)
            if(date[BoardId] === ""){

            }
            $("#time-range-content").html("");



            dataRangeInput.forEach(function (item) {
                if (item[0] === BoardId){
                    $("#time-range-content").append(
                        "<div class='input-group input-group mb-5 ' id='board-time-range-item-"+timerange+"'>" +
                        "<input type='hidden' class='time-range-days ' id='board-time-range-days-" + timerange + "'>" +
                        "<input type='text' class='form-control modal-time time-start-modal board-time-range-" + timerange + "' value='"+item[1]+"'  name='' id='board-time-range-from-" + timerange + "' style='flex:none;width: 100px;'>" +
                        "<span class='input-group-text'>تا</span>" +
                        "<input type='text' class='form-control modal-time time-end-modal board-time-range-" + timerange + "' name='' value='"+item[2]+"' id='board-time-range-to-" + timerange + "' style='flex:none;width: 100px;' >" +
                        "<button type='button' class='btn btn-icon btn-outline-danger' onclick='boardTimeRangeRemoveItem(" + timerange + ")'><i class='las la-minus fs-2'></i></button>" +
                        "</div>");
                    $(".board-time-range-" + timerange ).persianDatepicker({
                        initialValue: true,
                        initialValueType: 'persian',
                        autoClose: true,
                        format: 'YYYY/MM/DD',
                        checkDate: function(unix){
                            var d = new persianDate(unix);
                            var now = new persianDate();
                            if  (d >= now){
                                return true;
                            }


                        },

                    });
                    timerange++;
                }
            });



            $("#submitModal").removeAttr("onclick");
            $("#submitModal")[0].setAttribute("onclick","submitModal("+BoardId+","+boardItemCount+")");
            $("#table-date-content tbody").html("<tr><th>از تاریخ</th><th>الی</th><th>شماره قرارداد</th><th>نام مشتری</th></tr>");
            $.get("/panel/board/reserve?boardId=" + BoardId, function(data){

                data.forEach(function (item) {
                    $("#table-date-content").append("<tr>" +
                        "<td>"+item.start+"</td>" +
                        "<td>"+item.end+"</td>" +
                        "<td>"+item.factor_id+"</td>" +
                        "<td>"+item.name+"</td>" +
                        "</tr>");
                });
            });


            // http://127.0.0.1:8000/panel/board/reserve?boardId=1010

            $('#kt_modal_timeRange').modal('show');

        }
        timerange=0;

        function modalAddTime(){


            $("#time-range-content").append(
                "<div class='input-group input-group mb-5' id='board-time-range-item-" + timerange + "'>" +
                "<input type='hidden' class='time-range-days' id='board-time-range-days-" + timerange + "'>" +
                "<input type='text' class='form-control modal-time time-start-modal board-time-range-" + timerange + "'  name='' id='board-time-range-from-" + timerange + "' style='flex:none;width: 100px;'>" +
                "<span class='input-group-text'>تا</span>" +
                "<input type='text' class='form-control modal-time time-end-modal board-time-range-" + timerange + "' name='' id='board-time-range-to-" + timerange + "' style='flex:none;width: 100px;' >" +
                "<button type='button' class='btn btn-icon btn-outline-danger' onclick='boardTimeRangeRemoveItem(" + timerange + ")'><i class='las la-minus fs-2'></i></button>" +
                "</div>");
            $(".board-time-range-" + timerange).persianDatepicker({
                initialValue: true,
                initialValueType: 'persian',
                autoClose: true,
                format: 'YYYY/MM/DD',
                checkDate: function(unix){
                    var d = new persianDate(unix);
                    var now = new persianDate();
                    if  (d >= now){
                        return true;
                    }


                },

            });
            timerange++;
        }
        dataRangeInput =[];
        day = 0;
        function submitModal(board_id,bid){


            day = 0;
            $(".time-start-modal").each(function (i,item){


                $.ajax({
                    url : "/panel/board/day/ajax?from=" + fixNumbers(item.value) + "&to=" + fixNumbers($(".time-end-modal")[i].value) + "&boardId=" + board_id,
                    type : "get",
                    async: false,
                    success : function(res) {
                        if(res.errors !== null){
                            Swal.fire({
                                text: "بعضی از تاریخ ها رزرو برای فاکتور های دیگر میباشند." ,
                                icon: "error",
                            });
                        }
                        day +=res.days;
                    },
                    error: function() {
                        connectionError();
                    }
                });
            });


            $("#board-day-" + bid).val(day);
            boardPrice(bid,2);

            $(".modal-time").each(function (i,item){
                // console.log(item.value);



                $(".modal-time").each(function (j,item2) {

                    if (item.value === item2.value && i !==j){

                        Swal.fire({
                            text: "تاریخ تابلو تکراری است",
                            icon: "error",
                        });
                        return 0;
                    }
                });

            });
            dataRangeInput.forEach(function (item, index, object) {

                if (item[0] === board_id){
                    object.splice(index, 3);
                }
            })
            $(".time-start-modal").each(function (i,item){
                dataRangeInput.push([board_id,item.value,$(".time-end-modal")[i].value]);
            })

            $('#kt_modal_timeRange').modal('hide');
        }
        $("form").on("submit", function(){
            $("<input />").attr("type", "hidden")
                .attr("name", "timeRange")
                .attr("value", JSON.stringify(dataRangeInput))
                .appendTo(this);

        })
        $(document).on('keypress',function(e) {
            if(e.which == 13) {
                Swal.fire({
                    text: "آیا مطمن هستید؟",
                    icon: "warning",
                    showCloseButton: true,
                    showCancelButton: true,
                    confirmButtonText: 'تایید',
                    cancelButtonText: 'لغو',

                }).then((result) => {

                    if (result.isConfirmed) {
                        $("form").submit();
                    }
                });
            }
        });
    </script>

@endsection