@extends('layouts.master')

@section('page_title','Add Warranty')
@section('title','Add Warranty')
@section('main_item','Warranty')
@section('sub_item','Add Warranty')

@section('content')

<div class="col-12">
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="supplier">Customer</label>
                        <select class="form-control select2" id="supplier" name="">
                            <option>Select Customer</option>
                            @foreach ($customers as $customer)
                            <option value="{{$customer->id}}">{{$customer->name}} </option>
                            @endforeach
                        </select>
                    </div>
                    <div id="order_return"></div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="date-format">Order Date</label>
                        <input type="text" class="form-control mdate" placeholder="" id="mdate" name="" required>
                    </div>
                </div>
                <div class="col-md-4" hidden>
                    <div class="form-group">
                        <label for="ref_number">Waybill Number</label>
                        <input type="text" class="form-control" placeholder="Reference Number" id="ref_number" name=""
                    readonly value="">
                    </div>
                </div>
            </div>
        </div>
        <!--end card-body-->
    </div>
    <!--end card-->
</div>
<div class="col-12">
    <div class="card">
        <div class="card-body">
            <div class="row justify-content-center">
                <div class="col-md-6 ">
                    <div class="form-group">
                        <div class="input-group">

                            <select class="custom-select select2" id="grn-product-list">
                                <option selected="">Choose Product</option>
                                @foreach ($stocks as $stock)
                                @if ($stock->qty > 0)

                                <option id="{{$stock->id}}" value="{{$stock->id}}">
                                    <strong>
                                        {{$stock->product->sku}}
                                    </strong>
                                    | {{$stock->product->product_name}}
                                    | Price : {{number_format($stock->unit_price,2)}}
                                    | Avb. Qty : {{number_format($stock->qty,1)}} {{$stock->product->unit->short_name}}

                                </option>
                                @endif
                                @endforeach
                            </select>

                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-primary" id="add-to-table" type="button">Add to table</button>
                </div>
            </div>
            <form action="{{route('warranty.store')}}" method="POST">
                @csrf
                <div class="table-responsive dash-social">
                    <table id="datatable" class="table table-striped">
                        <thead class="thead-dark">
                            <tr>
                                <th>Product Name</th>
                                <th>Attribute</th>
                                <th>Order Quantity</th>
                                <th>Selling Price</th>
                                <th>Line Total</th>

                                <th>Action</th>

                            </tr>
                            <!--end tr-->
                        </thead>

                        <tbody id="t-body">

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

        <input type="text" class="form-control" placeholder="Reference Number" id="ref_number_copy" name="waybill_id" value="{{$waybill}}" readonly>
            <input type="text" class="form-control" placeholder="" id="mdate_copy" name="sale_date" required readonly>
            <input type="text" class="form-control" placeholder="" id="supplier_copy" name="contact_id" required
                readonly>
        </div>
        <!--end card-body-->
    </div>
    <!--end card-->
</div>

<div class="col-12">
    <div class="card">
        <div class="card-body">
            <h4 class="header-title mt-0">Warranty Value</h4>
            <div class="row">

                <div class="col-md-3">
                    <div class="form-group">
                        <label for="sub_total">Sub Total</label>
                        <input type="text" class="form-control" placeholder="" id="sub_total" name="invoice_total"
                            required="">
                    </div>
                </div>

                <div class="col-md-3" hidden>
                    <div class="form-group">
                        <label for="discount">Discount</label>
                        <input type="text" class="form-control" placeholder="" id="discount" name="invoice_discount"
                            required="" value="0.00">
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label for="net_total">Net Total</label>
                        <input type="text" class="form-control" placeholder="" id="net_total" name="invoice_subtotal"
                            required>
                    </div>
                </div>
                <div class="col-md-3" hidden>
                    <div class="form-group">
                        <label for="p_amount">Paid Amount</label>
                        <input type="text" class="form-control" placeholder="" id="p_amount" name="p_amount" required>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12 text-right">
                    <button type="submit" class="btn btn-primary px-5 py-2">Save</button>
                </div>
                </form>
            </div>
        </div>
        <!--end card-body-->
    </div>
    <!--end card-->

</div>
@endsection

@section('scripts')

<script>
    $(document).ready(function () {
        $('#mdate').val(moment(new Date()).format("YYYY-MM-DD"));
        $('#mdate_copy').val(moment(new Date()).format("YYYY-MM-DD"));
    })

    $('#add-to-table').click(function () {
        var selected = $('#grn-product-list').find(':selected').val();
        var rowCount = $('#datatable tbody tr').length;
        axios.get('/orders/product/add/' + selected + '/' + rowCount)
            .then(function (response) {

                $(response.data).appendTo($("#datatable tbody"));
                calucalte()
            })
            .catch(function (error) {

                console.log(error);
            })
    })

    $(document).on('change', '#ref_number, #supplier, #mdate', function () {
        $("#ref_number_copy").val($("#ref_number").val());
        $("#mdate_copy").val($("#mdate").val());
        $("#supplier_copy").val($("#supplier").find(':selected').val());
    })

    //check bad customer or not
    $(document).on('change', '#supplier', function () {
        $('#order_return').empty();
        let cus_id = $("#supplier").find(':selected').val();
        axios.get('/orders/customer/check/' + cus_id )
            .then(function (response) {
                // console.log(response.data)

                $(response.data).appendTo($("#order_return"));

            })
            .catch(function (error) {

                console.log(error);
            })
    })

    $(document).on('change', '.qty, .s_price', function () {
        let qty = $(this).closest("tr").find(".qty").val();
        let p_price = $(this).closest("tr").find(".s_price").val();
        let line_total = parseFloat(qty) * parseFloat(p_price);
        $(this).closest("tr").find(".line_total").html(line_total);

        calucalte();

    })

    $(document).on('click', '.remove_row', function () {

        $(this).closest("tr").remove();
        calucalte();

    })

    function calucalte() {
        let total = 0.00;
        $('#datatable tbody tr').each(function () {
            total += parseFloat($(this).find(".line_total").html());

        });

        $('#sub_total').val(total)
        $('#net_total').val(total)
        $('#p_amount').val(total)

    }

    $(document).on('change', '#discount', function(){

        let total = $("#sub_total").val();
        let discount = $("#discount").val();

        let sub = total-discount;

        $("#net_total").val(sub);
        $("#p_amount").val(sub)    ;
    })

</script>

@endsection