@extends('layouts.admin')

@section('title', 'Create Order')

@section('styles')
@endsection

@section('breadcrumb-item')
    <li class="breadcrumb-item">Orders</li>
    <li class="breadcrumb-item active">Payment</li>
@endsection

@section('content')
    <div class="card">
        <div class="card-header bg-theme">Order Payment</div>
        <div class="card-body">

                <div class="col-12">
                    <div class="input-group mb-3">
                        <input id="searchInput" type="number" name="order_search" class="form-control" placeholder="Enter order number">
                        <div class="input-group-append">
                            <button id="searchBtn" class="btn btn-primary" onclick="orderSearch()" type="submit">Search</button>
                        </div>
                    </div>
                </div>

            <div class="row" style="background: #22af47">
                <div class="col-3 text-center flash pt-2 pb-2">
                    <h6>Order Number</h6>
                    <p id="order_id">*******</p>
                </div>
                <div class="col-3 text-center flash pt-2 pb-2">
                    <h6>Shop Name</h6>
                    <h4 id="shop_name">*******</h4>
                </div>
                <div class="col-3 text-center flash pt-2 pb-2">
                    <h6>Order Status</h6>
                    <p id="order_status">*******</p>
                </div>
                <div class="col-3 text-center flash pt-2 pb-2">
                    <h6>Payable</h6>
                    <h4 id="amount">****</h4>
                </div>
            </div>

            <div class="container p-5">
                <form action="{{ route('admin.payment.store') }}" method="POST">
                    @csrf
                    <input type="hidden" name="order_id" value="">
                    <input type="hidden" name="employee_id" value="32">
                    <input type="hidden" name="amount" value="">

                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label>Payment Type</label>
                                <select name="payment_type" class="form-control" required>
                                    <option value="1">Cash</option>
                                    <option value="2">Cheque</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-6 d-none" id="status">
                            <div class="form-group">
                                <label>Cheque Type</label>
                                <select name="status" class="form-control" required disabled>
                                    <option value="completed">Full</option>
                                    <option value="partial">Partial</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-6 d-none" id="bank_name">
                            <div class="form-group">
                                <label>Bank Name</label>
                                <select name="bank_name" class="form-control" required disabled>
                                    <option value="Al Baraka Bank (Pakistan) Limited">Al Baraka Bank (Pakistan) Limited
                                    </option>
                                    <option value="Allied Bank Limited">Allied Bank Limited</option>
                                    <option value="Askari Bank">Askari Bank</option>
                                    <option value="Bank Alfalah Limited">Bank Alfalah Limited</option>
                                    <option value="Bank Al-Habib Limited">Bank Al-Habib Limited</option>
                                    <option value="BankIslami Pakistan Limited">BankIslami Pakistan Limited</option>
                                    <option value="Dubai Islamic Bank Pakistan Limited">Dubai Islamic Bank Pakistan Limited
                                    </option>
                                    <option value="Faysal Bank Limited">Faysal Bank Limited</option>
                                    <option value="First Women Bank Limited">First Women Bank Limited</option>
                                    <option value="Habib Bank Limited">Habib Bank Limited</option>
                                    <option value="Standard Chartered Bank (Pakistan) Limited">Standard Chartered Bank
                                        (Pakistan) Limited</option>
                                    <option value="Habib Metropolitan Bank">Habib Metropolitan Bank</option>
                                    <option value="Industrial Development Bank of Pakistan">Industrial Development Bank of
                                        Pakistan</option>
                                    <option value="JS Bank Limited">JS Bank Limited</option>
                                    <option value="MCB Bank Limited">MCB Bank Limited</option>
                                    <option value="MCB Islamic Bank Limited">MCB Islamic Bank Limited</option>
                                    <option value="Meezan Bank Limited">Meezan Bank Limited</option>
                                    <option value="National Bank of Pakistan">National Bank of Pakistan</option>
                                    <option value="Bank of Punjab">Bank of Punjab</option>
                                    <option value="Sindh Bank">Sindh Bank</option>
                                    <option value="Bank of Khyber">Bank of Khyber</option>
                                    <option value="Industrial Development Bank">Industrial Development Bank</option>
                                    <option value="SME Bank">SME Bank</option>
                                    <option value="Zarai Taraqiati Bank Limited">Zarai Taraqiati Bank Limited</option>
                                    <option value="JS Bank">JS Bank</option>
                                    <option value="Samba Bank Limited">Samba Bank Limited</option>
                                    <option value="Silkbank Limited">Silkbank Limited</option>
                                    <option value="Standard Chartered Pakistan">Standard Chartered Pakistan</option>
                                    <option value="Soneri Bank">Soneri Bank</option>
                                    <option value="Summit Bank">Summit Bank</option>
                                    <option value="United Bank Limited">United Bank Limited</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-6 d-none" id="cheque_date">
                            <div class="form-group">
                                <label>Cheque Date</label>
                                <input type="date" name="cheque_date" class="form-control" required value="{{ \Carbon\Carbon::now()->toDateString() }}" disabled>
                            </div>
                        </div>

                        <div class="col-6 d-none" id="cheque_number">
                            <div class="form-group">
                                <label>Cheque Number</label>
                                <input type="number" name="cheque_number" class="form-control" required disabled>
                            </div>
                        </div>

                        <div class="col-6 d-none" id="cheque_amount">
                            <div class="form-group">
                                <label>Cheque Amount</label>
                                <input type="number" value="0" name="cheque_amount" min="1" class="form-control" required
                                    disabled>
                            </div>
                        </div>

                        <div class="col-6" id="received_amount">
                            <div class="form-group">
                                <label>Payment Amount</label>
                                <input type="number" value="0" name="received_amount" min="1" class="form-control"
                                    required>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="form-group">
                                <label>WHT Amount</label>
                                <input type="number" value="0" name="wht_amount" class="form-control" required>
                            </div>
                        </div>

                        <div class="col-6" id="balance">
                            <div class="form-group">
                                <label>Remaining Balance</label>
                                <input type="number" value="0" name="balance" class="form-control" readonly>
                            </div>
                        </div>
                        <div class="col-12" id="balance">
                            <div class="form-group">
                                <label>payment comment</label>
                                <input type="text" name="comment" class="form-control">
                            </div>
                        </div>
                        <div class="col-12">
                            <button class="pull-right btn btn-primary" type="submit">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        function paymentTypeInputs() {
            if ($('[name="payment_type"]').val() == '2') {

                $('#status').removeClass('d-none');
                $('[name="status"]').removeAttr('disabled');

                $('#bank_name').removeClass('d-none');
                $('[name="bank_name"]').removeAttr('disabled');

                $('#cheque_date').removeClass('d-none');
                $('[name="cheque_date"]').removeAttr('disabled');

                $('#cheque_number').removeClass('d-none');
                $('[name="cheque_number"]').removeAttr('disabled');

                $('#received_amount').addClass('d-none');
                $('[name="received_amount"]').attr('disabled', 'disabled');

                $('#cheque_amount').removeClass('d-none');
                $('[name="cheque_amount"]').removeAttr('disabled');

                $('#balance').addClass('d-none');
                $('[name="balance"]').attr('disabled', 'disabled');

                if ($('[name="status"]').val() == 'partial') {
                    chequeTypeInputs();
                    remainingAmountOfChequeAmount();
                }

            } else if ($('[name="payment_type"]').val() == '1') {

                $('#status').addClass('d-none');
                $('[name="status"]').attr('disabled', 'disabled');

                $('#bank_name').addClass('d-none');
                $('[name="bank_name"]').attr('disabled', 'disabled');

                $('#cheque_date').addClass('d-none');
                $('[name="cheque_date"]').attr('disabled', 'disabled');

                $('#cheque_number').addClass('d-none');
                $('[name="cheque_number"]').attr('disabled', 'disabled');

                $('#cheque_amount').addClass('d-none');
                $('[name="cheque_amount"]').attr('disabled', 'disabled');

                $('#received_amount').removeClass('d-none');
                $('[name="received_amount"]').removeAttr('disabled', 'disabled');

                $('#balance').removeClass('d-none');
                $('[name="balance"]').removeAttr('disabled', 'disabled');

                remainingAmountOfPaymentAmount();

            }
        }

        function chequeTypeInputs() {

            var selectedValue = $('#status select option:selected').val();
            if (selectedValue == 'partial') {
                
                $('#cheque_amount').removeClass('d-none');
                $('[name="cheque_amount"]').removeAttr('disabled');

                $('#balance').removeClass('d-none');
                $('[name="balance"]').removeAttr('disabled', 'disabled');

                remainingAmountOfChequeAmount();

            } else if (selectedValue == 'completed') {

                
                $('#cheque_amount').removeClass('d-none');
                $('[name="cheque_amount"]').removeAttr('disabled');

                $('#balance').addClass('d-none');

            }
        }

        function remainingAmountOfPaymentAmount() {
            var amount = parseInt($('[name="amount"]').val());
            var received_amount = parseInt($('[name="received_amount"]').val());
            var wht_amount = parseInt($('[name="wht_amount"]').val());
            var total_amount = wht_amount + received_amount;

            if (total_amount > amount) {
                alert('Your amounts is greater than payables !');
                $('[name="received_amount"]').val(0);
                $('[name="wht_amount"]').val(0);
                $('[name="balance"]').val(0);
            } else {
                var balance = amount - total_amount;
                $('[name="balance"]').val(balance);
            }
        }

        function remainingAmountOfChequeAmount() {
          
            var amount = parseInt($('[name="amount"]').val());
            var cheque_amount = parseInt($('[name="cheque_amount"]').val());
            var wht_amount = parseInt($('[name="wht_amount"]').val());
            var total_amount = wht_amount + cheque_amount;
        
            if (total_amount > amount) {
                alert('Your amounts is greater than payables !');
                $('[name="cheque_amount"]').val(0);
                $('[name="wht_amount"]').val(0);
                $('[name="balance"]').val(0);
            } else {
                var balance = amount - total_amount;
                $('[name="balance"]').val(balance);
            }
        }

        $('[name="payment_type"]').change(function() {
            paymentTypeInputs();
        });

        $('[name="status"]').change(function() {
            chequeTypeInputs();
        });

        $('[name="received_amount"]').keyup(function() {
            remainingAmountOfPaymentAmount();
        });
        $('[name="received_amount"]').change(function() {
            remainingAmountOfPaymentAmount();
        });

        $('[name="cheque_amount"]').keyup(function() {
            remainingAmountOfChequeAmount();
        });
        $('[name="cheque_amount"]').change(function() {
            remainingAmountOfChequeAmount();
        });

        $('[name="wht_amount"]').keyup(function() {
            if ($('[name="payment_type"]').val() == '1') {
                remainingAmountOfPaymentAmount();
            } else if ($('[name="payment_type"]').val() == '2' && $('[name="status"]').val() == 'partial') {
                remainingAmountOfChequeAmount();
            }
        });
        $('[name="wht_amount"]').change(function() {
            if ($('[name="payment_type"]').val() == '1') {
                remainingAmountOfPaymentAmount();
            } else if ($('[name="payment_type"]').val() == '2' && $('[name="status"]').val() == 'partial') {
                remainingAmountOfChequeAmount();
            }
        });

        $('[type="submit"]').click(function() {
            if (payment_type == '1' && total < amount) {
                var payment_type = $('[name="payment_type"]').val();
                var amount = parseInt($('[name="amount"]').val());
                var wht_amount = parseInt($('[name="wht_amount"]').val());
                var received_amount = parseInt($('[name="received_amount"]').val());
                var total = wht_amount + received_amount;
                $('[name="status"]').removeAttr('disabled');
                $('[name="status"]').val('partial');
            }
        });
    </script>
    <script>
        function orderSearch() {
            let _url = '/admin/order/payment/search';
            $.ajax({
                url: _url,
                type: 'get',
                data: {
                    order_id: $('[name="order_search"]').val()
                },
                success: function(response) {
                    if (response.response) {
                        alert(response.response);
                    } else if (response.order_id && response.amount) {
                        $('#order_id').html(response.order_id);
                        $('#amount').html(response.amount);
                        $('#order_status').html(response.order_status);
                        $('#shop_name').html(response.shop_name);
                        $('[name="order_id"]').val(response.order_id);
                        $('[name="amount"]').val(response.amount);
                        $(".flash").fadeOut(200).fadeIn(200);
                    } else {
                        alert('Something went wrong !');
                    }
                },
                error: function(response) {
                    alert('Something is going wrong !');
                }
            });
        }

        // Get the input field
        var input = document.getElementById("searchInput");

        // Execute a function when the user presses a key on the keyboard
        input.addEventListener("keypress", function(event) {
            // If the user presses the "Enter" key on the keyboard
            if (event.key === "Enter") {
                // Cancel the default action, if needed
                event.preventDefault();
                // Trigger the button element with a click
                document.getElementById("searchBtn").click();
            }
        });
    </script>
@endsection