@extends('layouts.basic')

@section('styles')
    <style>

    </style>
@endsection
@section('content')
    <div class="container-fluid">
        <div class="page-title">
            <div class="row">
                <div class="col-6">
                    <h3>Collection</h3>
                </div>
                <div class="col-6">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}"><i data-feather="home"></i></a></li>
                        <li class="breadcrumb-item"><a href="{{ route('collection.index') }}">Collection</a></li>
                        <li class="breadcrumb-item active">Add-Collection</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <section class="content content-card">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card content-padding">
                        <div class="card-body">
                            <div class="row align-items-center table-top-div">
                                <div class="col-lg-6">
                                   <div>
                                      <h6 class="table-headings">Add Collection </h6>
                                   </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="add-button">
                                    <a type="submit" class="btn btn-dark" href="{{ route('collection.index') }}"><i class="fa fa-arrow-left"></i>&nbsp;Back</a>
                                        <!-- <a class="btn btn-dark" href="" data-bs-original-title="" title=""><i class="fa fa-arrow-left"></i>&nbsp; Back </a> -->
                                    </div>
                                </div>
                             </div>
                             <br>
                            <form id="colection-form">
                                <div class="row">
                                    <div class="col">
                                        <label for="customer_id">Customer Name:<span style="color:red"> * </span></label>
                                        <select class="form-select" id="customer_id" name="customer_id" style="color:black;">
                                            <option></option>
                                            @foreach ($customers as $customer )
                                            @php
                                                $gst_number_array = implode(" ",$customer->gst_number);
                                            @endphp
                                                <option value="{{ $gst_number_array }}">{{ $customer->customer_name }}</option>
                                            @endforeach
                                        </select>
                                        <span id="customer_error"></span>

                                    </div>
                                    <div class="col">
                                        <label for="invoice_number">Invoice-number: <span style="color:red"> * </span></label>
                                        <select class="form-select" id="invoice_number" name="invoice_number">
                                            <option value="">Please enter invoice number</option>
                                        </select>
                                        <span id="invoice_error"></span>
                                        {{-- <input type="text" name="invoice_id" id="invoice_id" hidden value="1 "> --}}
                                    </div>
                                    <div class="col">
                                        <label for="total_amount" class="col-form-label">Total amount:</label>
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" id="basic-addon2">₹</span>
                                            </div>
                                            <input type="text" class="form-control" name="total_amount" id="total_amount"
                                                style="color:rgb(226, 19, 19);" readonly>
                                        </div>

                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-4">
                                        <label for="balance_amount" class="col-form-label">Balance amount:</label>
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" id="basic-addon1">₹</span>
                                            </div>
                                            <input type="text" class="form-control" name="balance_amount"
                                                id="balance_amount" style="color:blue;" readonly>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <label for="due_date" class="col-form-label">Due date:</label>
                                            <input type="date" class="form-control" name="due_date" id="due_date"
                                            style="color:blue;" readonly>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <label for="due_amount" class="col-form-label">Due amount:</label>
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" id="basic-addon3">₹</span>
                                            </div>
                                            <input type="text" class="form-control" name="due_amount" id="due_amount"
                                                style="color:rgb(226, 19, 19);" readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <label for="paid_date" class="col-form-label">Paid on:*</label>
                                            <input type="date" class="form-control" name="paid_date" id="paid_date">
                                        </div>
                                    </div>
                                    <div class="col-sm-4">

                                        <label for="payable_due_amount" class="col-form-label">Enter due amount:</label>
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" id="basic-addon3">₹</span>
                                            </div>
                                            <input type="text" class="form-control" name="payable_due_amount"
                                                id="payable_due_amount" style="color:#339900;">
                                        </div>
                                        <span id="greater_amount" style="color:red"></span>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <label for="payment_method" class="col-form-label">Payment method:<span style="color:red"> * </span></label>
                                            <select name="payment_method" id="payment_method" class="form-select">
                                                <option selected="selected" value="">Please Select</option>
                                                @foreach ( $payment_mode as $mode )
                                                <option value="{{ $mode->id }}">{{ $mode->name }}</option>
                                                @endforeach
                                               
                                            </select>
                                            <span id="payment_error"></span>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="form-group">
                                            <label for="remark" class="col-form-label">Remarks:<span style="color:red"> * </span></label>
                                            <textarea name="remarks" id="remarks" class="form-control" rows="4"></textarea>
                                            <span id="remarks_error"></span>
                                        </div>
                                    </div>
                                </div>
                                <br>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="button-group-1">

                                            <button type="reset" id="click" class="btn filter-clear">Clear</button>
                                            <button type="submit" id="submit" class="btn btn-primary">Submit Payment</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('script')
    <script type="text/javascript">
        $(document).ready(function() {

            function formreset() {
                $('#customer_id').select2('reset');
                $('#invoice_number').select2('reset');
            //  $("#customer_id").val("").trigger('change');
            //  $("#invoice_number").val("").trigger('change');
                $('#click').trigger('click');
            }

        });


        // payment store function start

        $(document).ready(function() {
            $('#colection-form').submit(function(e) {
                e.preventDefault();
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                var formData = $(this).serialize();

                $.ajax({
                    url: '{{ route('collection.store') }}',
                    type: 'POST',
                    data: formData,
                    success: function(response) {

                        $('#customer_id').val(null).trigger('change');
                        $("#invoice_number").empty().trigger('change')
                        $('#click').trigger('click');

                        iziToast.success({
                            title: 'Success',
                            message: response.message,
                            position: 'bottomRight'
                        });
                        setTimeout(function() {
                        window.location.href = '{{ route('collection.index')}}';
                        }, 2000);

                    },
                    error: function(xhr, status, error) {

                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                        var errors = xhr.responseJSON.errors;
                        // console.log(errors)

                        displayError('#customer_error', errors.customer_id);
                        displayError('#invoice_error', errors.invoice_number);
                        displayError('#payment_error', errors.payment_method);
                        displayError('#remarks_error', errors.remarks);
                        displayError('#greater_amount', errors.balance_amount);
                    }


                        // var errorMessage = '';

                        // // Concatenate error messages into a single string
                        // for (var field in errors) {
                        //     if (errors.hasOwnProperty(field)) {
                        //         errorMessage += errors[field][0] + '<br>';
                        //     }
                        // }
                        // // Show error Toastr notification
                        // iziToast.error({
                        //     title: 'error',
                        //     message: errorMessage,
                        //     position: 'bottomRight'
                        // });
                    }



                });
            });
        });

        function displayError(elementId, errorMessage) {
                    var errorElement = $(elementId);
                    errorElement.text(errorMessage ? errorMessage[0] : '').css('color', 'red');

                    setTimeout(function() {
                        errorElement.text('');
                    }, 5000);
        }



        // payment store function end.

        $(document).ready(function() {
            $('#customer_id').select2({ 
                placeholder: "Please enter customer name",
                // minimumInputLength: 1
            });
            $('#invoice_number').select2({
                placeholder: "Please enter invoice number",
                // minimumInputLength: 1
            });




            $('#customer_id').on('change', function() {

                var selectedOption = $(this).val();

                // Make an AJAX request to fetch the new values based on the selected option
                $.ajax({
                    url: '{{ route('fetch-invoice-details') }}', // Replace with your actual URL for fetching values
                    method: 'GET',
                    data: {
                        option: selectedOption
                    },
                    success: function(response) {
                        // Clear the existing options in select2
                        $('#invoice_number').empty();
                        // Append the new options to invoice_number
                        response.forEach(function(option) {
                            var newOption = new Option(option.invoice_id, option.id,
                                false, false);
                            // console.log(newOption);
                            $('#invoice_number').append(newOption);
                        });
                        // Trigger the change event on invoice_number to update its display
                        $('#invoice_number').trigger('change');
                    },
                    error: function(xhr, status, error) {
                        // Handle the error case
                        console.error(error);
                    }
                });
            });




            $('#invoice_number').on('change', function() {
                var selectedOption1 = $(this).val();
                // Make an AJAX request to fetch the new values based on the selected option
                $.ajax({
                    url: '{{ URL('/invoice-payments') }}', // Replace with your actual URL for fetching values
                    method: 'GET',
                    data: {
                        option: selectedOption1
                    },
                    success: function(response) {
                        console.log(response)
                        // $('#total_amount').val(response[0].gross_total.replace(" Dr", ""));
                        // $('#total_amount').val(response[0].gross_total.replace(/[^0-9.]/g, ''));
                        $('#total_amount').val(response[0].gross_total.replace(/[^0-9.]/g, ''));
                        if (response[0].balance_due != null) {
                            // $('#balance_amount').val(response[0].balance_due.replace(" Dr",
                            // ""));
                            // $('#due_amount').val(response[0].balance_due.replace(" Dr", ""));
                            $('#balance_amount, #due_amount').val(response[0].balance_due.replace(/[^0-9.]/g, ''));

                        } else {
                            $('#balance_amount, #due_amount').val(response[0].gross_total.replace(/[^0-9.]/g, ''));
                            // $('#balance_amount').val(response[0].gross_total.replace(" Dr",
                            // ""));
                            // $('#due_amount').val(response[0].gross_total.replace(" Dr", ""));
                        }

                        document.getElementById('paid_date').value = moment().format(
                            'YYYY-MM-DD');
                        document.getElementById('due_date').value = moment().format(
                            'YYYY-MM-DD');

                        // console.log(response)

                    },
                    error: function(xhr, status, error) {
                        // Handle the error case
                        console.error(error);
                    }
                });
            });
        });


        $('#click').click(function(){

            // $('#customer_id').select2('reset');
            //     $('#invoice_number').select2('reset');
               $("#customer_id").val("").trigger('change');
               $("#invoice_number").val("").trigger('change');

            // var customer_clear = $('#customer_id').text('').select2({data: [{id: '', text: ''}]});
            // $('#customer_id').select2({
            //     placeholder: "Please enter customer name",
            //     minimumInputLength: 1
            // });
            // var invoice_clear = $('#invoice_number').text('').select2({data: [{id: '', text: ''}]});;
            // $('#invoice_number').select2({
            //     placeholder: "Please enter invoice number",
            //     minimumInputLength: 1
            // });
        });


        $('#payable_due_amount').keyup(function(){
      var inputValue = $(this).val();
      if (inputValue.includes('-')) {
      var sanitizedValue = inputValue.replace(/-/g, '');
      $(this).val(sanitizedValue);
      }

});


    </script>
@endsection