@extends('layout.master')
@section('content')

<section class="content pb-5">
                <div class="container-fluid">
                  <div class="row pt-4">
                    <div class="col-md-6 col-12">
                        <div class="title-section">
                          <p>Debit / Credit Note</p>
                        </div>
                      </div>
                    </div>

                    <div class="row mt-2">
                      <div class="col-md-10">

                        <form id="save_buyer_details" method="post" autocomplete="off">
                          @csrf

                        <div class="zone-box">
                          <div class="row">
                            <div class="col-md-4 col-12">
                              <div class="form-group custom-form-group">
                                <label class="form-label" for="customer">Type</label>
                                <select class="form-control" name="invoice_type" id="invoice_type">
                                  <option value="">Account Type</option>
                                  <option value="debit">Debit</option>
                                  <option value="credit">Credit</option>
                                </select>
                              </div>
                            </div>
                            <div class="col-md-4 col-12">
                              <div class="form-group custom-form-group">
                                <label class="form-label" for="customer">Reference Number</label>
                                <input class="form-control" placeholder="" type="text" name="refference_number" id="refference_number">
                              </div>
                            </div>
                            <div class="col-md-4 col-12">
                              <div class="form-group custom-form-group">
                                <label class="form-label" for="customer">Amount</label>
                                <input class="form-control" placeholder="" type="text" name="invoice_amount" id="invoice_amount">
                              </div>
                            </div>

                            <div class="col-md-4 col-12">
                              <div class="form-group custom-form-group">
                                <label class="form-label" for="customer">Invoice Number</label>
                                <select class="form-control" name="invoice_number" id="invoice_number">
                                  <option value="">Please select</option>
                                  <!-- <option value="debit">Debit</option>
                                  <option value="credit">Credit</option> -->
                                </select>
                                <!-- <input class="form-control" placeholder="" type="text" name="invoice_number" id="invoice_number"> -->
                              </div>
                            </div>

                            <div class="col-md-4 col-12">
                              <div class="form-group custom-form-group">
                                <label class="form-label" for="customer">Reason</label>
                                <textarea class="form-control" rows="3" name="reason" id="reason"></textarea>
                              </div>
                            </div>
                            
                            <div class="col-md-12 col-12">
                                <div class="text-right">
                                  <button type="submit" class="btn btn-danger">Generate</button>
                                </div>
                            </div>
                          </div>
                        </div>

                        </form>

                      </div>

                      <div class="col-md-12 col-12 mt-4">
                        <div class="table-responsive">
                          <table class="table table-striped debitnote-table" id="financial-debit-credit-datatable">
                            <thead>
                              <tr>
                                <th scope="col">Date</th>
                                <th scope="col">Invoice No.</th>
                                <th scope="col">Customer Name</th>
                                <th scope="col">Amount</th>
                                <th scope="col">Reason</th>
                                <th scope="col">Status</th>
                                <th scope="col">View</th>
                              </tr>
                            </thead>
                            <tbody>
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>

                  </div>


                  <!-- modal  -->

                  <div class="modal fade" id="debitnote" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                      <div class="modal-content">
                        <div class="modal-body debit-credit-note">
                          <div class="row">
                            <div class="col-md-12">
                              <div class="text-center mb-0 mb-sm-4">
                                <h4 id="invoiceType">DEBIT NOTE</h4>
                              </div>
                            </div>

                            <div class="col-md-8 col-12">
                              <div class="d-flex align-items-end mb-0">
                                <h5 id="invoiceNumberText">DEBIT NOTE NO.</h5>
                                <div class="menifest-input debit-input ml-2">
                                  <input class="form-control" placeholder="" type="text" value="" id="refference_number_id" disabled>
                                </div>
                              </div>
                           <!--    <div class="d-flex align-items-end">
                                <h5>YOUR INVOICE NO.</h5>
                                <div class="menifest-input debit-input  ml-2">
                                  <input class="form-control" placeholder="" type="text" value="">
                                </div>
                              </div> -->
                            </div>

                            <div class="col-md-4 mt-2 col-12">
                              <p>EOLAC INDIA PRIVATE LIMITED<br />
                               JMD MEGAPOLIS, SECTOR-48,<br />
                                GURGAON, HARYANA</p>
                            </div>

                            <div class="col-md-12 mt-0 mt-sm-4">
                              <p class="mb-0" id="first_name_id">M/S ANAND & SONS <br /></p>
                            </div>

                            <div class="col-md-12 mt-1 mt-sm-3">
                              <table class="table table-bordered mb-0">
                                <tbody>
                                  <tr>
                                    <td rowspan="3" id="invoice_reason_id">Return of 15 kg. Sugar received damaged in transit @ Rs 35 per kg.</td>
                                    <td>Rs.</td>
                                  </tr>
                                  <tr>
                                    <td id="invoice_total_id">525.00</td>
                                  </tr>
                                </tbody>
                              </table>
                            </div>
                            <div class="col-md-6 col-6">
                              <p class="text-center">E.&.O.E</p>
                            </div>
                            <div class="col-md-6 col-6">
                              <p class="text-center">for Roy & Co.</p>
                            </div>
                          </div>

                          <div class="row justify-content-center mt-0 mt-sm-3">
                              <div class="col-md-10">
                                <div class="row justify-content-between">
                                  <div class="col-md-4 col-6">
                                    <div class="d-flex align-items-end">
                                      <h5>Date:</h5>
                                      <div class="menifest-input ml-2">
                                        <input class="form-control" placeholder="" type="text" value="" id="invoiceDateId" disabled>
                                      </div>
                                    </div>
                                  </div>
      
                                  <div class="col-md-3 col-6">
                                    <div class="">
                                      <div class="menifest-input text-center">
                                        <input class="form-control" placeholder="" type="text" value="">
                                        <h5>(Signature)</h5>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                          </div>
                          
                        </div>
                      
                      </div>
                    </div>
                  </div>



            </section>

<style type="text/css">
  .button-dissable {
    pointer-events: none;
  }
  .debit-credit-note h4{font-size: 16px; font-weight: 700; text-decoration:underline; }
  .debit-credit-note h5{font-size: 13px; font-weight: 600;}
  .debit-credit-note p{font-size: 13px; font-weight: 600}
  .debit-credit-note .form-control{background:  #ffffff !important;}
</style>

<script src="{{asset('assets/plugins/datatables/jquery.dataTables.js')}}"></script>
<script src="{{asset('assets/plugins/datatables-bs4/js/dataTables.bootstrap4.js')}}"></script>

<script>

    function docketWiseInvoiceGeneration(invoceId,invoiceType,invoiceTotalAmount,invoiceReason,invoiceDate,invoiceNumber,customerName) {

      let invoiceNumberText = invoiceType.toUpperCase() + ' NOTE NO.';
      $('#invoiceNumberText').html(invoiceNumberText);
      $('#invoiceType').html(invoiceType.toUpperCase() + 'NOTE');
      $('#refference_number_id').val(invoiceNumber);
      $('#invoice_reason_id').html(invoiceReason);
      $('#invoice_total_id').html(invoiceTotalAmount);
      $('#first_name_id').html(customerName);
      $('#invoiceDateId').val(invoiceDate);

    }

    $("#save_buyer_details").validate({
        // myField: { lettersonly: true }
        

        rules: {
            //Buyers Validations
            invoice_type: "required",
            invoice_amount: {
                required: true,
                number: true,
            },
            refference_number: {
                required: true,
                number: true,
            },
            invoice_number: {
                required: true,
                number: true,
            },
            reason: {
                required: true,
                maxlength: 1000,
            },
        },
        messages: {
            invoice_type: "Please enter Invoice Type",
            invoice_amount: {
                required: 'Invoice amount is required.',
                number : 'Invoice amount must be a number.'
            },
            refference_number: {
                required: 'Reference Number is required.',
                number : 'Reference Number must be a number.'
            },
            invoice_number: {
                required: 'Invoice Number is required.',
                number : 'Invoice Number must be a number.'
            },
            reason: {
                required: 'Reason is required.',
                number : 'Reason must be less then 1000.'
            },
        }

    });

    let orderId = '';

    $("#financial-debit-credit-datatable").DataTable({
        "language": {
            "zeroRecords": "No record(s) found."
        },
        processing: true,
        serverSide: true,
        lengthChange: true,
        order: [0,'asc'],
        searchable:true,
        bStateSave: false,

        // console.log('hi');
        ajax: {
            url: "{{url('datatable-finacial')}}",
            data: function (d) {
                d.order_id = $('#order_id').val();
                d.mobile = $('#mobile').val();
                d.years = $('#years').val();
                d.order_order_number = $('#order_order_number').val();
            }
        },

        columns: [

            { data: 'date', name: 'date', sortable: false, searchable: false},

            { data: 'reference_number', name: 'reference_number', searchable: true, orderable:false ,defaultContent: 'NA'},
            { data: 'customer_id', name: 'customer_id', searchable: true, orderable:false ,defaultContent: 'NA'},

            { data: 'total_amount', name: 'total_amount', searchable: true, orderable: false, defaultContent: 'NA'}, 

            { data: 'reason', name: 'reason', searchable: true, orderable: false, defaultContent: 'NA'},

            { data: 'status', name: 'status', searchable: true, orderable: false, defaultContent: 'NA'}, 

            { data: 'action', name: 'action'},

        ]
    });

    var mySelect = $('#years');
    var currentYear = 2024;
    var prevYear = 2023;
    for (var i = 0; i < 30; i++) {
        prevYear = prevYear - 1;
        currentYear = currentYear - 1;
        mySelect.append(
            $('<option value=""></option>').val(prevYear + "-" + currentYear).html(prevYear + "-" + currentYear)
        );
    }

    $('#order_id').keypress(function() {

        order_id = this.value;
        console.log('orderInputTable',order_id);
        $("#ordersTable").DataTable().draw(true);

    });

    $('#mobile').keypress(function() {

        order_id = this.value;
        console.log('orderInputTable',mobile);
        $("#ordersTable").DataTable().draw(true);

    });
    $('#years').on('click',function() {

        order_id = this.value;
        console.log('orderInputTable',years);
        $("#ordersTable").DataTable().draw(true);

    });
    $('#order_order_number').keypress(function() {

        order_id = this.value;
        console.log('orderInputTable',order_order_number);
        $("#ordersTable").DataTable().draw(true);

    });


    $('#initiate_return_order').on('click',function()
    { 
        var id=[];
        if(this.checked)
        {

            $('.initiate_return_checkbox').each(function(){
                this.checked = true;
                id.push($(this).val());
            });
            $("#initiate_multi_id").val(id);
            if($(this).is(":checked"))
            {
                if (id.length>=1) {
                  $('#intiate_return_button').removeClass('button-dissable');
                }
            }
            else
            {
                if(id.length==0) {
                  $('#intiate_return_button').addClass('button-dissable');
                }
            }
        }
        else
        {
            $('.initiate_return_checkbox').each(function(){
                this.checked = false; 
                if(id.length==0) {
                   $('#intiate_return_button').addClass('button-dissable');
                }
            }); 
        } 
    });

    // Single checkbox
    $(document).on('click','.initiate_return_checkbox',function()
    {
        var id=[];

        $('.initiate_return_checkbox:checked').each(function(){  
            id.push($(this).val());
        }); 
        $("input[name = initiate_id]").val(id);
        $("#initiate_multi_id").val(id);

        if($(this).is(":checked"))
        {
            // console.log(id);
            if (id.length>=1) {

               $('#intiate_return_button').removeClass('button-dissable');

            }
        }
        else
        {
            if(id.length==0) {

                $("#initiate_return_order"). prop("checked", false);
                $('#intiate_return_button').addClass('button-dissable');
                
            }

        }

       if($('.initiate_return_checkbox:checked').length == $('.initiate_return_checkbox').length) { 
            $('#initiate_return_order').prop("checked", true);
        } else {
            $('#initiate_return_order').prop("checked", false);
        }

    });
 
</script>
@endsection