@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>Colection</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') }}">Colection</a></li>
                        <li class="breadcrumb-item active">Colection-edit</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row align-items-center table-top-div">
                                <div class="col-lg-6">
                                   <div>
                                      <h6 class="table-headings">Collection Edit</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-update-form">
                                <div class="row">
                                    {{-- <input type="text" name="collection_id" id="collection_id" hidden value="{{ $collection->id }}"> --}}
                                    <div class="col">
                                        <label for="customer_id">Customer Name:</label>
                                        <select class="form-select" id="customer_id" disabled>
                                            <option>Please enter customer name</option>
                                                <option value="{{ $invoice->consignee_buyer }}" selected>{{ $invoice->consignee_buyer }}</option>
                                        </select>
                                        <input type="text" name="customerID" id="customerID" hidden value="{{ $collection->customer_id }}">
                                    </div>
                                    <div class="col">
                                        <label for="invoice_number">Invoice-number:</label>
                                        <select class="form-select" id="invoice_number" name="invoice_number" disabled>
                                            <option>Please enter invoice number</option>
                                            <option value="{{ $invoice->consignee_buyer }}" selected>{{ $invoice->Voucher_no }}</option>
                                        </select>
                                        <input type="text" name="invoice_id" id="invoice_id" hidden value="{{ $invoice->id }}">
                                    </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);" value="{{ $collection->total_amount }}" 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:#ffcc00;" value="{{ $collection->payable_amount + $collection->balance_amount }}" readonly>
                                          </div>

                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            @php($dateString = $collection->paid_on)
                                            @php($formattedDate = date('Y-m-d', strtotime($dateString)))
                                            <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:#ff9966;" value="{{ $formattedDate }}" 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);" value="{{ $collection->payable_amount + $collection->balance_amount }}" 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" value="{{ $formattedDate }}">
                                        </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;" value="{{ $collection->payable_amount }}" >
                                          </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <label for="payment_method" class="col-form-label">Payment method:</label>
                                            <select name="payment_method" class="form-select">
                                                <option selected="selected" value="">Please Select</option>
                                                {{-- @dd($collection->payment_method) --}}
                                                @foreach ( $payment_mode as $mode )
                                                <option value="{{ $mode->id }}" {{ $collection->payment_mode_id === $mode->id ? 'selected' : '' }}>
                                                    {{ $mode->name }}
                                                </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="form-group">
                                            <label for="remark" class="col-form-label">Payment Notes:</label>
                                            <textarea name="payment_note" id="remark" class="form-control" rows="4" value="{{ $collection->payment_note }}">{{ $collection->payment_note }}</textarea>
                                        </div>
                                    </div>
                                </div>
                                <br>
                                <div class="row">
                                    <div class="text-center">
                                        <div class="form-group">

                                            {{-- <a href="{{ route('collection.index') }}" class="btn btn-dark">Back</a> --}}
                                            <button type="submit" class="btn btn-info">Submit Payment</button>
                                        </div>
                                    </div>
                                </div>
                                <br>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('script')
    <script type="text/javascript">

      $(document).ready(function() {

        function  formreset(){
            $("#customer_id").empty().trigger('change')
            $("#invoice_number").empty().trigger('change')
            $('#click').trigger('click');
        }

      });


        // payment store function start

        $(document).ready(function() {
            $('#colection-update-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.update',$collection->id) }}',
                    type: 'PUT',
                    data: formData,
                    success: function(response) {
                        // Show success alert
                        iziToast.success({
                            title: 'Success',
                            message: response.message,
                            position: 'bottomRight'
                        });

                        reset()
                        // document.getElementById("#colection-form").reset();
                    },
                    error: function(xhr, status, error) {
                        var errors = xhr.responseJSON.errors;
                        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'
                        });
                    }

                });
            });
        });
        // 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);
                            $('#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) {
                    if(selectedOption1 != null){
                        var balanceDue = response[0].balance_due;

                    $('#total_amount').val(response[0].gross_total.replace(" Dr", "") );
                    if(balanceDue != null){
                    $('#balance_amount').val(balanceDue);
                    $('#due_amount').val(balanceDue);
                    } else{
                    $('#balance_amount').val(response[0].gross_total .replace(" Dr", ""));
                    $('#due_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');
                    }
                    else{
                    $('#total_amount').val('');
                    $('#balance_amount').val('');
                    $('#due_amount').val('');

                    document.getElementById('paid_date').value = '';
                    document.getElementById('due_date').value = '';

                    iziToast.info({
                                    message: "This customer due's are already cleared",
                                    position: 'topRight'
                                });
                    }
                    console.log(response)

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

    });
    </script>
@endsection