@extends('Layout.base')
@section('title', $request.' Request')
@if ($request == "Approve")
@section('titleLink', '/payment_requests/pending_requests')
@elseif($request == "View")
@section('titleLink', '/payment_requests/requests')
@endif

@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">Review Payment Request</h3>

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

                </div>

            </div>


            <div class="mt-5 md:mt-0 md:col-span-2">

                <div class="shadow overflow-hidden sm:rounded-md">
                    <div class="px-4 py-3 bg-white sm:p-6">
                        <div class="grid grid-cols-6 gap-6">
                            <div class="col-span-6 border-bottom pb-3">
                                <div class="row d-flex justify-content-center p-1">
                                    Requested by {{ $payment_request->creator->name }}

                                </div>
                                <div class="row d-flex justify-content-center p-1">
                                    <span style="color:
                                    @if ($payment_request->payment_status =="Approved")
                                        green
                                    @elseif ($payment_request->payment_status =="Completed")
                                        #188ed2
                                    @elseif ($payment_request->payment_status =="Declined")
                                        red
                                    @else
                                        brown
                                    @endif
                                    "
                                    >
                                    {{ $payment_request->payment_status }}
                                </span> &nbsp; ID #{{ $payment_request->id }}
                                </div>
                                <div class="row d-flex justify-content-center p-1">
                                    <i class="far fa-clock p-1"></i> {{ $payment_request->created_at }}
                                </div>
                            </div>
                            <!-- Name -->
                            <div class="col-span-6 sm:col-span-4">
                                <div class="row">
                                    <div class="col-5">
                                        <label class="block font-medium text-sm text-gray-700" for="amount">
                                            Amount
                                        </label>
                                    </div>
                                    <div class="col-7">
                                        {{ $payment_request->amount }}
                                        <input name="amount" value="{{ $payment_request->amount }}" type="hidden">
                                    </div>
                                </div>
                            </div>
                            <div class="col-span-6 sm:col-span-4">
                                <div class="row">
                                    <div class="col-5">
                                        <label class="block font-medium text-sm text-gray-700" for="category_id">
                                            Cost center
                                        </label>
                                    </div>
                                    <div class="col-7">
                                        {{ $payment_request->category->category }}<br>
                                        {{ $payment_request->category->description }}
                                        <input name="category_id" value="{{ $payment_request->category_id }}" type="hidden">
                                    </div>
                                </div>
                            </div>
                            <!-- Description -->
                            <div class="col-span-6 sm:col-span-4">
                                <div class="row">
                                    <div class="col-5">
                                        <label class="block font-medium text-sm text-gray-700" for="description">
                                            Description
                                        </label>
                                    </div>
                                    <div class="col-7">
                                        {{ $payment_request->description }}
                                        <input name="description" value="{{ $payment_request->description }}" type="hidden">
                                    </div>
                                </div>
                            </div>
                            <div class="col-span-6 sm:col-span-4">
                                <div class="row">
                                    <div class="col-5">
                                        <label class="block font-medium text-sm text-gray-700" for="gst">
                                            GST
                                        </label>
                                    </div>
                                    <div class="col-7">
                                        {{ $payment_request->gst == '1' ? 'Yes' : 'No' }}
                                        <input name="gst" value="{{ $payment_request->gst }}" type="hidden">
                                    </div>
                                </div>
                            </div>
                            <div class="col-span-6 sm:col-span-4">
                                <div class="row">
                                    <div class="col-5">
                                        <label class="block font-medium text-sm text-gray-700" for="payment">
                                            Payment
                                        </label>
                                    </div>
                                    <div class="col-7">
                                        {{ $payment_request->payment }}
                                        <input name="payment" value="{{ $payment_request->payment }}" type="hidden">
                                    </div>
                                </div>
                            </div>
                            @if ($payment_request->payment == "Bank")
                                <div class="col-span-6 sm:col-span-4">
                                    <div class="row">
                                        <div class="col-5">
                                            <label class="block font-medium text-sm text-gray-700" for="Cash_id">
                                                Account
                                            </label>
                                        </div>
                                        <div class="col-7">
                                            {{ $payment_request->bank_account->name }} <br>
                                            {{ $payment_request->bank_account->account_number }}
                                            <input name="bank_account_id" value="{{ $payment_request->bank_account_id }}"
                                                type="hidden">
                                        </div>
                                    </div>
                                </div>
                                @if ($payment_request->payment_status =="Completed")
                                <div class="col-span-6 sm:col-span-4">
                                    <div class="row">
                                        <div class="col-5">
                                            <label class="block font-medium text-sm text-gray-700">
                                                UTR Number
                                            </label>
                                        </div>
                                        <div class="col-7">
                                            {{ $payment_request->utr_number }}
                                        </div>
                                    </div>
                                </div>


                                @endif

                            @endif
                            @if (isset($payment_source))
                                <div class="col-span-6 sm:col-span-4">
                                    <div class="row">
                                        <div class="col-5">
                                            <label class="block font-medium text-sm text-gray-700">
                                                Payment source
                                            </label>
                                        </div>
                                        <div class="col-7">
                                            {{ $payment_source->name }} <br>
                                            {{ $payment_request->payment == "Bank" ? $payment_source->account_number : $payment_source->description }}
                                        </div>
                                    </div>
                                </div>
                                @endif
                        </div>
                    </div>
                    @if ($request == "Approve" || $payment_request->payment_status == "Pending")
                        <form method="post" action="{{ route('payment_request.approved', $payment_request->id) }}">
                        @csrf
                        @method('patch')

                        <div class="flex items-center justify-end px-4 py-3 bg-gray-50 text-right sm:px-6">
                            @if ($request == "Approve" || $payment_request->payment_status == "Pending")
                            <a href="#" data-toggle="modal" data-target="#editModal" class="btn btn-outline-danger mr-1 pt-2">Decline</a>
                            @endif
                            @if ($request == "Approve")
                            <button type="submit"
                            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">
                            Approve
                        </button>
                            @endif

                        </div>
                    </form>
                    @elseif($request == "Complete")
                    <div class="flex items-center justify-end px-4 py-3 bg-gray-50 text-right sm:px-6">
                        <button type="button" onclick="addQueryString('modal', 'complete')"
                            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">
                            Complete
                        </button>
                    </div>
                    @endif

                </div>
            </div>


        </div>
        @if ($payment_request->payment_status =="Declined")
            <x-jet-section-border />
            <div class="mt-10 sm:mt-0">
                <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">Reject Reason</h3>
                                <p class="mt-1 text-sm text-gray-600">
                                    Reject Reason is optional so it have chance to be empty.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3 md:mt-0 md:col-span-2">
                        <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">

                                    <!-- Reject Reason -->
                                    <div class="col-span-6 sm:col-span-4">
                                        <label class="block font-medium text-sm text-gray-700" for="newPassword">
                                           <span class="text-danger"> {{$payment_request->reject_reason}} </span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif
        <div class="row d-flex justify-content-center m-5">
            <a href="{{ url()->current() == url()->previous() ? "/home" : url()->previous() }}" ><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>

    <!-- Modal -->
    <div class="modal fade" id="editModal" tabindex="-1" task_type="dialog" aria-hidden="true">
        <div class="modal-dialog" task_type="document">
            <div class="modal-content">
                <div class="modal-header" style="border-bottom: 0px;">

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="post" action="{{ route('payment_request.reject', $payment_request->id) }}">
                    @csrf
                    @method('patch')
                <div class="modal-body">
                    <div class="grid grid-cols-6 gap-6">
                        <div class="col-span-6 sm:col-span-4">
                            <label class="block font-medium text-sm text-gray-700" for="step_name">
                                Reject Reason (optional)
                            </label>
                            <textarea class="form-input rounded-md shadow-sm mt-1 block w-full" rows="3"
                                        name="reject_reason"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="border-top: 0px;">

                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary hover:bg-secondary-yy">Decline</button>


                </div>
            </form>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal" id="completeModal" tabindex="-1" task_type="dialog" aria-hidden="true">
        <div class="modal-dialog" task_type="document">
            <div class="modal-content">
                <div class="modal-header" style="border-bottom: 0px;">

                    <button type="button" class="close" data-dismiss="modal" onclick="removeQueryString()" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="post" action="{{ route('payment_request.complete', $payment_request->id) }}">
                    @csrf
                    @method('patch')
                <div class="modal-body">
                    <div class="grid grid-cols-6 gap-6">
                        @if (isset($payment_sources))
                        <div class="col-span-6 sm:col-span-4">
                            <label class="block font-medium text-sm text-gray-700" for="payment_source_id">
                                Payment Source *
                            </label>

                            <select class="form-input rounded-md shadow-sm mt-1 block w-full"
                                name="payment_source_id">
                                <option value="">Select payment source</option>
                                @foreach ($payment_sources as $payment_source)
                                    <option value="{{ $payment_source->value }}"
                                        @if (Session::has('payment_source_id'))
                                            {{ Session::get('payment_source_id') == $payment_source->value ? "selected" : "" }}
                                        @else
                                            {{ old('payment_source_id') == $payment_source->value ? "selected" : "" }}
                                        @endif
                                    >
                                        {{ $payment_source->text }}</option>
                                @endforeach

                            </select>
                            <x-jet-input-error for="payment_source_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="/{{$link}}/create?from=payment-request&id={{$payment_request->id}}" 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>
                        @endif

                        @if ($payment_request->payment == "Bank")
                        <div class="col-span-6 sm:col-span-4">
                            <label class="block font-medium text-sm text-gray-700" for="utr_number">
                                Enter UTR number
                            </label>
                            <input class="form-input rounded-md shadow-sm mt-1 block w-full pl-4" name="utr_number" onkeyup="this.value = this.value.toUpperCase();" type="text">
                            <x-jet-input-error for="utr_number" class="mt-2" />
                        </div>
                        @else
                        <div class="col-span-6 sm:col-span-4">
                            <input type="checkbox" class="form-checkbox" name="accept" {{ old("accept") == "on" ? "checked": "" }} >
                    <span class="ml-2 text-sm text-gray-600">{{ __('I have handed over the cash to the concerned person in this approval') }}</span>
                            <x-jet-input-error for="accept" class="mt-2" />
                        </div>
                        @endif


                    </div>
                </div>
                <div class="modal-footer" style="border-top: 0px;">

                        <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="removeQueryString()">Cancel</button>
                        <button type="submit" 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">Mark as Complete</button>


                </div>
            </form>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        function addQueryString(name, value) {
            window.location.href = updateQueryStringParameter(window.location.href, name, value)
        }
        $(document).ready(function() {
            var modal = getParameterByName("modal", window.location.href);
            if (modal == "complete") {
                $('#completeModal').modal({
                    backdrop: false
                });
            }
        });
    </script>
@endsection