@extends('layouts.application')

@section('content')
    <div class="contentbar">
        <!-- Start row -->
        <div class="row">
            <!-- Start col -->
            <div class="col-lg-12">
                <div class="card m-b-30 p-3">
                    <form action="{{ url('invoices/store') }}" class="input" method="POST">
                        @csrf
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-6">
                                <div class="form-group">
                                    <strong>Company:</strong>
                                    <select name="company_id" id="company_id" class="form-control selectpicker"
                                            data-live-search="true">
                                        <option selected disabled>აირჩიეთ</option>
                                        @foreach($companies as $company)
                                            <option value="{{ $company->id }}"
                                                    @if($company->id == $id) selected @endif>{{ $company->company_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-6">
                                <div class="form-group">
                                    <strong>Customer:</strong>
                                    <input type="text" name="customer" class="form-control input-rounded"
                                           placeholder="Customer"
                                           required>

                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-6">
                                <div class="form-group">
                                    <strong>Subject:</strong>
                                    <input type="text" name="subject" class="form-control input-rounded"
                                           placeholder="Subject"
                                           required>

                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-6">
                                <div class="form-group">
                                    <strong>Reference No:</strong>
                                    <input type="text"
                                           value="{{ date('Y').'-'.str_pad($referenceNo+1,3,'0',STR_PAD_LEFT) }}"
                                           readonly class="form-control input-rounded" placeholder="Reference No"
                                           required>

                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-6">
                                <div class="form-group">
                                    <strong>Related:</strong>
                                    <input type="text" name="related" class="form-control input-rounded"
                                           placeholder="Related"
                                           required>

                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-6">
                                <div class="form-group">
                                    <strong>Date:</strong>
                                    <div class="input-group date" id="datetimepicker11" data-target-input="nearest">
                                        <input type="text" name="date" id="date"
                                               class="form-control datetimepicker-input input-rounded"
                                               data-target="#datetimepicker11"/>
                                        <div class="input-group-append" data-target="#datetimepicker11"
                                             data-toggle="datetimepicker">
                                            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="dEdu1" class="m-b-20">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="f15 text-info"><strong>Item <span id="gan">1</span></strong>
                                    </div>
                                </div>
                                <div class="col-md-6" align="right">
                                    <a href="javascript:void(0)" class="text-success Banner AddEdu" id="1"
                                       style="display: inline;"><i class="fa fa-plus-square-o fa-lg"></i> დამატება</a>
                                    &nbsp;
                                    <a href="javascript:void(0)" class="text-danger Banner DelEdu" id="1"
                                       style="display: inline;"><i class="fa fa-trash-o fa-lg"></i> წაშლა</a>

                                </div>
                            </div>
                            <div class="card card-outline-info" style="padding:10px;">
                                <div class="row ">

                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label for="edu3_1">Product Category</label>
                                            <select name="product_category[]" id="product_category_1" class="form-control"
                                                    onchange="getProduct($(this).attr('id').substr(id.length - 1))">
                                                <option selected disabled>აირჩიეთ</option>
                                                @foreach($productCategories as $category)
                                                    <option value="{{ $category->id }}">{{ $category->title }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label for="edu3_1">Product Details</label>
                                            <select name="product_detail[]" id="product_detail_1" class="form-control"
                                                    onchange="calculateTotalPrice($(this).attr('id').substr(id.length - 1))">
                                                <option selected disabled>აირჩიეთ</option>

                                            </select>
                                        </div>
                                    </div>
                                    {{--                                    <div class="col-md-2">--}}
                                    {{--                                        <div class="form-group">--}}
                                    {{--                                            <label for="edu3_1">Product Model</label>--}}
                                    {{--                                            <input type="text" class="form-control mInput" id="product_model_1"--}}
                                    {{--                                                   name="product_model[]"--}}
                                    {{--                                                   placeholder="Product Model">--}}
                                    {{--                                        </div>--}}
                                    {{--                                    </div>--}}
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label for="piece_1">Piece</label>
                                            <input type="text" class="form-control mInput" id="piece_1"
                                                   oninput="calculateTotalPrice($(this).attr('id').substr(id.length - 1))"
                                                   name="piece[]"
                                                   placeholder="Piece" required="" value="1">
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label for="percent_1">Percent (%)</label>
                                            <input type="text" class="form-control mInput percent" id="percent_1"
                                                   value="0"
                                                   oninput="calculateTotalPrice($(this).attr('id').substr(id.length - 1))"
                                                   name="percent[]"
                                                   placeholder="Percent" required="">
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label for="unit_price_1">Unit Price</label>
                                            <input type="text" class="form-control mInput"
                                                   oninput="calculateTotalPrice($(this).attr('id').substr(id.length - 1))"
                                                   id="unit_price_1"
                                                   name="unit_price[]"
                                                   placeholder="Unit Price" required="">
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label for="total_price_1">Total Price</label>
                                            <input type="text" class="form-control mInput" readonly id="total_price_1"
                                                   name="total_price[]"
                                                   placeholder="Total Price" required="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4 col-6">
                            <div class="custom-control custom-checkbox mb-3">
                                <input type="checkbox" class="custom-control-input" id="vat" name="vat">
                                <label class="custom-control-label" for="vat">18.00% დღგ</label>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <button type="submit" class="btn btn-primary">დამატება</button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
    <!-- End col -->
    <!-- Start col -->
    <!-- End col -->
    </div>
    <!-- End row -->
    </div>
    <script>
        $('#datetimepicker11').datetimepicker({
            format: 'DD.MM.YYYY',
        });
        $(document).on('click', '.AddEdu', function () {
            let nid = $(this).attr('id');
            let content = $('#dEdu' + nid).html();
            let newId = parseInt(nid) + 1;
            let newdiv = $("<div id='dEdu" + newId + "' class='m-b-20'>");
            newdiv.html(content);
            newdiv.find(".AddEdu").attr("id", newId);
            newdiv.find(".DelEdu").attr("id", newId);

            newdiv.find("#product_category_" + nid).attr("id", "product_category_" + newId);
            newdiv.find("#product_category_" + nid).attr("for", "product_category_" + newId);
            newdiv.find("#product_detail_" + nid).attr("id", "product_detail_" + newId);
            newdiv.find("#product_detail_" + nid).attr("for", "product_detail_" + newId);
            newdiv.find("#piece_" + nid).attr("id", "piece_" + newId);
            newdiv.find("#piece_" + nid).attr("for", "piece_" + newId);
            newdiv.find("#percent_" + nid).attr("id", "percent_" + newId);
            newdiv.find("#percent_" + nid).attr("for", "percent_" + newId);
            newdiv.find("#unit_price_" + nid).attr("id", "unit_price_" + newId);
            newdiv.find("#unit_price_" + nid).attr("for", "unit_price_" + newId);
            newdiv.find("#total_price_" + nid).attr("id", "total_price_" + newId);
            newdiv.find("#total_price_" + nid).attr("for", "total_price_" + newId);

            newdiv.find("#gan").html(newId);
            newdiv.find("input").val("");

            $('.AddEdu').hide();
            $('.DelEdu').hide();
            $('#dEdu' + nid).after(newdiv);
            $('#percent_' + newId).val($('#percent_1').val())
        });

        function calculateTotalPrice(id) {
            let val = parseFloat($(`#product_detail_${id}`).val())
            let piece = parseFloat($(`#piece_${id}`).val())
            $.ajax({
                url: "{{ url('/invoices/get_product') }}/" + val,
                type: "GET",
                dataType: "JSON",
                success: function (data) {
                    $(`#unit_price_${id}`).val(data.price.toFixed(2))

                    let percent = (data.price * $(`#percent_${id}`).val()) / 100;
                    let sum = (data.price + percent) * piece;
                    if (!isNaN(sum)) {
                        $(`#total_price_${id}`).val(sum.toFixed(2))
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('Error get data from ajax');
                }
            });
        }

        function getProduct(id) {
            let select = $(`#product_category_${id}`).val();
            $(`#unit_price_${id}`).val('')
            $(`#total_price_${id}`).val('')
            $.ajax({
                type: 'POST',
                url: "{{ url('/invoices/get_category_product') }}",
                data: {
                    _token: "{{@csrf_token()}}",
                    'select': select
                },
                success: function (data) {
                    console.log(data)
                    let html, models;
                    html += '<option selected disabled>აირჩიეთ</option>'
                    for (let i = 0; i < data.length; i++) {
                        models = data[i];
                        html += '<option value="' + models.id + '">' + models.title + '</option>'
                    }
                    $(`#product_detail_${id}`).html(html);

                }
            }).fail(function () {
                console.log('something wrong at = route|profile.fetch');
            });
        }

        // function calculateTotalPrice(id) {
        //     let val = parseFloat($(`#unit_price_${id}`).val())
        //     let piece = parseInt($(`#piece_${id}`).val())
        //     let substrId = id.substr(id.length - 1);
        //     let percent = val * $(`#percent_${substrId}`).val() / 100;
        //     let sum = (val + percent) * piece;
        //     if (!isNaN(sum)) {
        //         $(`#total_price_${substrId}`).val(sum.toFixed(2))
        //     }
        // }

        $('#percent_1').on('input', function () {
            $('.percent').val($(this).val());
            // $('div').html(text);
        });

        $(document).on('click', '.DelEdu', function () {
            var did = $(this).attr('id');
            if (did > 1) {
                $('#dEdu' + did).remove();
                $('.AddEdu').last().show();
                $('.DelEdu').last().show();
            } else {
                Swal.fire('შეცდომა!', 'წაშლა შეუძლებელია!', 'warning');
            }
        });
    </script>
@endsection