@extends('Layout.base')
@section('title', 'Payment Request')
@section('titleLink', '/home')
@section('content')
    <div class="panel-header-xs">

    </div>
    <div class="content mt-0">
        <div class="row">
            <x-alert />
        </div>
        <div class="md:grid md:grid-cols-3 md:gap-6">
            <div class="md:col-span-1">

                <div class="px-4 sm:px-0">
                    <div class="row">
                        <h3 class="text-lg font-medium text-gray-900">Create Payment Request</h3>

                        <p class="mt-1 text-sm text-gray-600">
                            Please fill the details.
                        </p>
                    </div>

                </div>

            </div>


            <div class="mt-5 md:mt-0 md:col-span-2">
                <form method="post" action="/payment_requests/preview">
                    @csrf
                    <div class="shadow overflow-hidden sm:rounded-md">
                        <div class="px-4 py-5 bg-white sm:p-6">
                            <div class="grid grid-cols-6 gap-6">

                                <!-- Name -->
                                <div class="col-span-6 sm:col-span-4">
                                    <label class="block font-medium text-sm text-gray-700" for="amount">
                                        Amount *
                                    </label>
                                    <div class="input-group">
                                        <span>
                                            <i class="fas fa-rupee-sign position-absolute mt-3 ml-2"></i>
                                        </span>
                                        <input class="form-input rounded-md shadow-sm mt-1 block w-full pl-4" name="amount"
                                            value="{{ old('amount') }}" type="text">
                                    </div>

                                    <x-jet-input-error for="amount" class="mt-2" />

                                </div>
                                <div class="col-span-6 sm:col-span-4">
                                    <label class="block font-medium text-sm text-gray-700" for="category_id">
                                        Cost center *
                                    </label>

                                    <select class="form-input rounded-md shadow-sm mt-1 block w-full" name="category_id">
                                        <option value="">Select cost center</option>
                                        @foreach ($categories as $category)
                                            <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? "selected" : "" }}>{{ $category->category }}</option>
                                        @endforeach

                                    </select>
                                    <x-jet-input-error for="category_id" class="mt-2" />

                                </div>
                                <!-- Description -->
                                <div class="col-span-6 sm:col-span-4">
                                    <label class="block font-medium text-sm text-gray-700" for="description">
                                        Description *
                                    </label>

                                    <textarea class="form-input rounded-md shadow-sm mt-1 block w-full" rows="3"
                                        name="description">{{ old('description') }}</textarea>
                                    <x-jet-input-error for="description" class="mt-2" />

                                </div>
                                <div class="col-span-6 sm:col-span-4">
                                    <div class="row">
                                        <div class="col-4">
                                            <label class="block font-medium text-sm text-gray-700" for="gst">
                                                GST *
                                            </label>
                                        </div>
                                        <div class="col-4">
                                            {!! Form::radio('gst', '1', true) !!} Yes

                                        </div>
                                        <div class="col-4">
                                            {!! Form::radio('gst', '0') !!} No
                                        </div>
                                    </div>
                                    <x-jet-input-error for="gst" class="mt-2" />

                                </div>
                                <div class="col-span-6 sm:col-span-4">
                                    <div class="row">
                                        <div class="col-4">
                                            <label class="block font-medium text-sm text-gray-700" for="payment">
                                                Payment *
                                            </label>
                                        </div>
                                        <div class="col-4">
                                            {!! Form::radio('payment', 'Cash') !!} Cash

                                        </div>
                                        <div class="col-4">
                                            {!! Form::radio('payment', 'Bank', true) !!} Bank
                                        </div>
                                    </div>
                                    <x-jet-input-error for="payment" class="mt-2" />

                                </div>
                                <div id="divAccount" class="col-span-6 sm:col-span-4">
                                    <label class="block font-medium text-sm text-gray-700" for="bank_account_id">
                                        Account *
                                    </label>

                                    <select class="form-input rounded-md shadow-sm mt-1 block w-full"
                                        name="bank_account_id">
                                        <option value="">Select Account</option>
                                        @foreach ($bank_accounts as $bank_account)
                                            <option value="{{ $bank_account->id }}"
                                                @if (Session::has('bank_account_id'))
                                                    {{ Session::get('bank_account_id') == $bank_account->id ? "selected" : "" }}
                                                @else
                                                    {{ old('bank_account_id') == $bank_account->id ? "selected" : "" }}
                                                @endif
                                            >
                                                {{ $bank_account->name . ' - ' . $bank_account->account_number }}</option>
                                        @endforeach

                                    </select>
                                    <x-jet-input-error for="bank_account_id" class="mt-2" />
                                    <div class="row m-2 d-flex justify-content-center">OR</div>
                                    <div class="row d-flex justify-content-center"><a
                                            href="/bank_accounts/create?from=payment-request" onclick="setSession()" style="text-decoration:none"
                                            class="inline-flex items-center px-4 py-2 bg-primary-yy border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-secondary-yy  active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray disabled:opacity-25 transition ease-in-out duration-150">Add
                                            New Account</a></div>
                                </div>
                            </div>
                        </div>

                        <div class="flex items-center justify-end px-4 py-3 bg-gray-50 text-right sm:px-6">
                            <button type="submit" onclick="setSession();"
                                class="inline-flex items-center px-4 py-2 bg-primary-yy border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-secondary-yy  active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray disabled:opacity-25 transition ease-in-out duration-150">
                                Review & Submit
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="row d-flex justify-content-center m-5">
            <a href="/home" ><span class="card rounded-circle d-flex justify-content-center" style="width: 50px;height: 50px;"><i class="fas fa-chevron-left mx-auto"></i></span></a>
        </div>
    </div>
@endsection
@section('script')
    <script>
        function setSession() {
            var amount = $("input[name='amount']").val();
            var category_id = $('select[name="category_id"] option:selected').val();
            var description = $("textarea[name='description']").val();
            var gst = $("input[name='gst']:checked").val();
            var payment = $("input[name='payment']:checked").val();
            var bank_account_id = $('select[name="bank_account_id"] option:selected').val();
            if (amount != null && amount != undefined && amount != '') {
                sessionStorage.setItem("amount", amount);
            }
            if (category_id != null && category_id != undefined && category_id != '') {
                sessionStorage.setItem("category_id", category_id);
            }
            if (description != null && description != undefined && description != '') {
                sessionStorage.setItem("description", description);
            }
            if (gst != null && gst != undefined && gst != '') {
                sessionStorage.setItem("gst", gst);
            }
            if (payment != null && payment != undefined && payment != '') {
                sessionStorage.setItem("payment", payment);
            }
            if (bank_account_id != null && bank_account_id != undefined && bank_account_id != '') {
                sessionStorage.setItem("bank_account_id", bank_account_id);
            }
        }
        function setInputValuesFromSession() {
            var amount = sessionStorage.getItem("amount");
            var category_id = sessionStorage.getItem("category_id");
            var description = sessionStorage.getItem("description");
            var gst = sessionStorage.getItem("gst");
            var payment = sessionStorage.getItem("payment");
            var bank_account_id = sessionStorage.getItem("bank_account_id");

            if (amount != null) {
                $("input[name='amount']").val(amount);
            }
            if (category_id != null) {
                $('select[name="category_id"]').val(category_id)
            }
            if (description != null) {
                $("textarea[name='description']").val(description);
            }
            if (gst != null) {
                if (gst=="1") {
                    $('input[name="gst"][value="1"]').prop('checked', true)
                } else {
                    $('input[name="gst"][value="0"]').prop('checked', true)
                }

            }
            if (payment != null) {
                if (payment=="Cash") {
                    $('input[name="payment"][value="Cash"]').prop('checked', true)
                } else {
                    $('input[name="payment"][value="Bank"]').prop('checked', true)
                }
            }
            if (payment=="Bank") {
                if (bank_account_id != null) {
                $('select[name="bank_account_id"]').val(bank_account_id)
                }
            }


        }
        function accountVisiblity(payment) {
            if (payment == 'Bank') {
                $("#divAccount").show();
            } else {
                $("#divAccount").hide();
            }
        }
        $(document).ready(function() {

            $("input[name$='payment']").click(function() {
                var payment = $(this).val();
                accountVisiblity(payment);
            });

            setInputValuesFromSession();
            accountVisiblity($("input[name='payment']:checked").val());
        });

    </script>
@endsection