@extends('layouts.master')

@section('page_title', 'Courier Payment')
@section('title', 'Courier Payment')
@section('main_item', 'Orders')
@section('sub_item', 'Courier Payment')

@section('content')

    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <h4 class="mt-0 header-title">Courier Payments</h4>
                <p class="text-muted mb-3"></p>
                <form method="POST" id="courier_from" action="{{ route('oder.update_courier') }}"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold" class="form-control-label">Total Payment</label>
                                <input class="form-control" type="number" id="total_payment" name="total_payment"
                                    value="" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold" class="form-control-label">Total Courier Charge</label>
                                <input class="form-control" type="number" id="total_courier_charge"
                                    name="total_courier_charge" value="" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold" class="form-control-label">Balance</label>
                                <input class="form-control" type="number" id="balance" name="balance" value=""
                                    readonly required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold" for="payment_date">Date</label>
                                <input type="text" class="form-control mdate" id="mdate" name="payment_date"
                                    required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class=" form-group">
                                <label style="font-weight: bold">From Payment Account</label>
                                <select class="form-control select2" id="account" name="from_payment_account" required>

                                    @foreach ($payment_accounts as $payment_account)
                                        <option value="{{ $payment_account->id }}">
                                            {{ $payment_account->account_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class=" form-group">
                                <label style="font-weight: bold">To Payment Account</label>
                                <select class="form-control select2" id="account" name="to_payment_account" required>

                                    @foreach ($payment_accounts as $payment_account)
                                        <option value="{{ $payment_account->id }}">
                                            {{ $payment_account->account_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label style="font-weight: bold" for="courier">Select courier</label>
                                <select class="form-control select2" id="courier" name="courier" required>

                                    @foreach ($couriers as $courier)
                                        <option value="{{ $courier->id }}">{{ $courier->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label style="font-weight: bold" class="form-control-label">From Waybill</label>
                                <input class="form-control" type="number" id="from_waybill" name="from_waybill">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label style="font-weight: bold" class="form-control-label">To Waybill</label>
                                <input class="form-control" type="number" id="to_waybill" name="to_waybill" value="">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <div class="mt-4">
                                    <button type="button" class="btn btn-primary" id="add_to_table">Add To Table</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label style="font-weight: bold" class="form-control-label">Total Courier Amount</label>
                                <input class="form-control" type="hidden" id="total_courier_amount"
                                    name="total_courier_amount" value="" required readonly>
                                <input class="form-control" id="total_courier_amount1" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive dash-social">
                        <table id="datatable" class="table table-striped">
                            <thead class="thead-dark">
                                <tr>
                                    <th>Waybill No</th>
                                    <th>Sale Date</th>
                                    <th>Ref No</th>
                                    <th>Grand Total</th>
                                    <th>Customer</th>
                                    <th>Mobile</th>
                                    <th>Action</th>
                                </tr>
                                <!--end tr-->
                            </thead>
                            <tbody id="tbody">
                            </tbody>
                        </table>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 text-right">
                            <button type="button" class="btn btn-primary px-5 py-2" id="save_data">Save</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            $('#reportrange').val('');
            $('#mdate').val(moment(new Date()).format("YYYY-MM-DD"));
        });
        $(document).on('click', '#save_data', function() {
            var rowCount = $('#datatable tbody tr').length;
            let total_payment = $('#total_payment').val();
            let total_courier_charge = $('#total_courier_charge').val();
            if (rowCount == 0) {
                Swal.fire(
                    'Not Selected',
                    'Please add sales to table',
                    'warning'
                )
            } else if (total_payment == "") {
                Swal.fire(
                    'Not Entered',
                    'Please enter total payment',
                    'warning'
                )
            } else if (total_courier_charge == "") {
                Swal.fire(
                    'Not Entered',
                    'Please enter total courier charge',
                    'warning'
                )
            } else {

                $('#courier_from').submit()
            }

        });

        $(document).on('click', '#add_to_table', function() {
            let courier = $('#courier').val();
            let from_waybill = $('#from_waybill').val();
            let to_waybill = $('#to_waybill').val();
            let reportrange = $('#reportrange').val();
            let url = "{{ route('oder.get_courier_payments') }}";


            $.ajax({
                method: 'POST',
                url: url,
                data: {
                    "_token": "{{ csrf_token() }}",
                    'courier': courier,
                    'reportrange': reportrange,
                    'from_waybill': from_waybill,
                    'to_waybill': to_waybill,

                },
                success: function(response) {

                    if (response == 'na') {
                        Swal.fire(
                            'Error',
                            'No data found',
                            'warning'
                        );
                        $('#datatable tbody').empty();
                    } else {

                        $('#datatable tbody').empty().append(response);

                    }
                    calculateTotal();
                }
            });

        });

        $(document).on('click', '.remove_row', function() {
            $(this).closest("tr").remove();
            calculateTotal();
        });

        $("input[name='total_courier_charge']").change(function() {
            calculate();
        });

        $("input[name='total_payment']").change(function() {
            calculate();
        });

        function calculateTotal() {
            let total = 0.00;
            $('#datatable tbody tr').each(function() {

                total += parseFloat($(this).find(".line_total").val());

            });
            $('#total_courier_amount').val(total);
            var numFormat = $.fn.dataTable.render.number('\,', '.', 2).display;
            $('#total_courier_amount1').val(numFormat(total));
        }

        function calculate() {
            let total_payment = $('#total_payment').val();
            let total_courier_charge = $('#total_courier_charge').val();
            let balance = total_payment - total_courier_charge;

            $('#balance').val(balance);
        }
    </script>
@endsection