@extends('layouts.master')

@section('page_title','Add Order')
@section('title','Add Order')
@section('main_item','Orders')
@section('sub_item','Add Orders')

@section('content')

<div class="col-12">


    <div class="card">
        <div class="card-body">
            {{-- <h4 class="header-title mt-0">Add Purchases</h4> --}}
            <div class="row">
                <div class="col-md-4" style="display: none">
                    <div class="form-group">
                        <label for="customer">Customer</label>
                        <select class="form-control select2" id="supplier" name="">
                            <option value="">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">
                    <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="{{$waybill}}">
                    </div>
                </div>
            </div>
        </div>
        <!--end card-body-->
    </div>
    <!--end card-->
</div>
<div class="col-md-12">
        <div class="card">
            <div class="card-body">
                    <div class="custom-control custom-switch float-right">
                            <input type="checkbox" class="custom-control-input" id="customSwitch1">
                            <label class="custom-control-label" for="customSwitch1">Save New</label>
                        </div>
                <h4 class="mt-0 header-title">Customer Details</h4>
                <p class="text-muted mb-3"></p>
            <form class="form-parsley" method="POST" action="{{route('customers.store')}}" id="cus_form">
                @csrf
                <input type="text" class="form-control" placeholder="type" id="type" name="type" value="customer" readonly hidden>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="name">Name</label>
                                <input type="text" class="form-control" placeholder="Name" id="name" name="name" required="">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="businesss_name">Business Name</label>
                                <input type="text" class="form-control" placeholder="Business Name" id="business_name" name="business_name">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="email">Email</label>
                                <input type="text" class="form-control" placeholder="Email" id="email" name="email" data-parsley-type="email">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="primary_mobile">Primary Mobile</label>
                                <input type="tel" class="form-control" placeholder="Primary Mobile" id="primary_mobile" name="mobile" required="" data-parsley-type="digits">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="secondary_mobile">Secondary Mobile</label>
                                <input type="tel" class="form-control" placeholder="Secondary Mobile" id="secondary_mobile" name="mobile_2" data-parsley-type="digits">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="landline">Landline</label>
                                <input type="text" class="form-control" placeholder="Landline" id="landline" name="landline" data-parsley-type="digits">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="landmark">Landmark</label>
                                <input type="text" class="form-control" placeholder="Landmark" id="landmark" name="landmark" required="">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="city">City</label>
                                <input type="text" class="form-control" placeholder="City" id="city" name="city" required="">
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="district">District</label>
                                <select class="form-control select2" id="district" name="district_id" required>
                                    <option value="">Select</option>
                                    @foreach ($districts as $district)
                                <option value="{{$district->id}}">{{$district->district_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                    </div>

                    <div class="row" style="display: none" id="cus_save">
                        <div class="col-sm-12 text-right">
                            <button type="submit" class="btn btn-primary px-5 py-2">Save</button>
                        </div>
                    </div>
                </form>
            </div>
            <!--end card-body-->
        </div>
    </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('orders.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">Add Payment</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">
                    <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">
                    <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"));
        $('#customSwitch1').prop('checked', false);
        $('#cus_form input').attr('readonly', true);
        // Unchecks it
    })

    $('#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();
        // var url = '{{url("orders/customer/check/")}}';
        // axios.get(url+cus_id)
        //     .then(function (response) {
        //         // console.log(response.data)

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

        //     })
        //     .catch(function (error) {

        //         console.log(error);
        //     })

            $.ajax({
                url: '{{url("orders/customer/check/")}}',
                data:{id:cus_id},
                success: function(response){
                    // console.log(response.data['id'])
                    $('#cus_form input').attr('readonly', true);
                     $(response.html).appendTo($("#order_return"));
                     $("[name='name']").val(response.data['name'])
                     $("[name='busines_name']").val(response.data['business_name'])
                     $("[name='email']").val(response.data['email'])
                     $("[name='mobile']").val(response.data['mobile'])
                     $("[name='mobile_2']").val(response.data['mobile_2'])
                     $("[name='landline']").val(response.data['landline'])
                     $("[name='landmark']").val(response.data['landmark'])
                     $("[name='city']").val(response.data['city'])
                     $("[name='district_id']").val(response.data['district_id'])
                     $("[name='district_id']").trigger('change')
                }});

    })

    $(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)

    }

    $('#customSwitch1').click(function() {
         $("#cus_save").toggle(this.checked);
         if (this.checked) {
            $('#cus_form input').attr('readonly', false);
            $('#cus_form').trigger('reset')

         } else {

            $('#cus_form input').attr('readonly', true);
         }
    });

    $('#cus_form').submit(function(event) {
        event.preventDefault();
       var serializedData = $(this).serialize()
            $.ajax({
                url: "{{route('customers.store')}}",
                method: "post",
                data: serializedData,
                success: function (res) {
                    // console.log(res.option);
                $("#cus_save").toggle();
                $('#customSwitch1').prop('checked', false);
                $('#cus_form input').attr('readonly', true);

                // Unchecks it
                $('#supplier').html(res.option);
                $('#supplier').val(res.value);
                $('#supplier').trigger('change');

                }
         });
    })

</script>

@endsection