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

    </div>
    <div class="content mt-0 pt-0">
        <div class="row">
            <x-alert />
        </div>

        <div class="row d-flex flex-row-reverse p-3 align-items-center">
            <div class="col p-0">
                <ul class="list-group list-group-horizontal float-right">
                    <li class="list-group-item list-group-item-action" style="padding: 0.5rem 0.5rem;cursor: pointer;" id="export"> <i class="fas fa-file-export">Export</i></li>
                    <li class="list-group-item list-group-item-action" style="padding: 0.5rem 0.5rem;cursor: pointer;" data-toggle="modal" data-target="#filterModal"> <i class="fas fa-filter">Filter</i></li>
                </ul>
            </div>
           <div class="col p-0">
               <div class="row">
                   <div class="col col-sm-1 pr-0">
                    Show
                   </div>
                <div class="col col-sm-2 p-0 ml-sm-4">
                    <select class="browser-default custom-select" id="show">
                        <option value="10" {{ (request()->has("show") ? request("show") : "") == 10 ? "selected" : "" }} >10</option>
                        <option value="25" {{ (request()->has("show") ? request("show") : "") == 25 ? "selected" : "" }}>25</option>
                        <option value="50" {{ (request()->has("show") ? request("show") : "") == 50 ? "selected" : "" }}>50</option>
                        <option value="100" {{ (request()->has("show") ? request("show") : "") == 100 ? "selected" : "" }}>100</option>
                    </select>
                </div>
            <div class="col pr-0">
                entries
            </div>

               </div>

           </div>
        </div>

        @if ($payment_requests->count() > 0)
            @foreach ($payment_requests as $payment_request)
                <div class="card">
                    <div class="card-body">
                        <div class="row border-bottom p-3">
                            <div class="col-12">
                                <p>ID #{{$payment_request->id}}</p>
                            </div>
                            <div class="col-6">
                                <b>{{ $payment_request->category->category }}</b> <br>
                               <p style="width: 90%;"> {{ $payment_request->created_at }} </p>
                            <p>{{strlen($payment_request->description) > 46 ? substr($payment_request->description,0,46)."..." : $payment_request->description}}</p>
                            </div>
                            <div class="col-6 text-right">
                                <b>{{ $payment_request->amount }}</b> <br>
                                by
                                @if ($payment_request->creator->id == Auth::id())
                                    you
                                @else
                                {{ $payment_request->creator->name }}
                                @endif
                                 <br>
                                <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>
                            </div>
                        </div>
                        <div class="row d-flex justify-content-center pt-2">
                        @if ($request == "Pending Requests")
                            <a href="/payment_requests/{{$payment_request->id}}/approve"> Respond</a>
                        @elseif($request == "History")
                            <a href="/payment_requests/{{$payment_request->id}}/view"> View</a>
                        @elseif($request == "Approved Requests")
                            <a href="/payment_requests/{{$payment_request->id}}/done"> Respond</a>
                        @endif

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

            @endforeach
                <div class="row d-flex justify-content-center p-3">
                    <nav aria-label="Page navigation example">
                        <ul class="pagination">
                            @if ($payment_requests->previousPageUrl() !== null)
                            <li class="page-item"><a class="page-link" href="{{ $payment_requests->previousPageUrl() }}">View Newer</a></li>
                            @endif
                            @if ($payment_requests->nextPageUrl()!== null)
                            <li class="page-item"><a class="page-link" href="{{ $payment_requests->nextPageUrl() }}">View Older</a></li>
                            @endif

                        </ul>
                    </nav>
                </div>
                <div class="row d-flex justify-content-center p-3">
                    {{'Showing '.$payment_requests->firstItem().' to '. $payment_requests->lastItem() .' of '.$payment_requests->total() .' results'}}
                </div>

        @else
            <div class="row d-flex justify-content-center p-3">
                No pending requests
            </div>
        @endif
    </div>

    <!-- Modal -->
    <div class="modal fade" id="filterModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header" style="border-bottom: 0px;">
                    <b>Filter Criteria</b>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="grid grid-cols-6 gap-6">

                        <div class="col-span-6 sm:col-span-4" {{ $request == "History" ? "" : "style=display:none;" }} >
                            <label class="block font-medium text-sm text-gray-700" >
                                <i class="fas {{ request()->has('pendingStatus') || request()->has('approvedStatus') || request()->has('completedStatus') || request()->has('declinedStatus') ? 'fa-minus' : 'fa-plus' }}  collapse-toggle" data-toggle="collapse" data-target="#requestStatus" aria-expanded="true" aria-controls="requestStatus"></i> &nbsp; Payment request status
                            </label>
                            <div class="collapse {{ request()->has('pendingStatus') || request()->has('approvedStatus') || request()->has('completedStatus') || request()->has('declinedStatus') ? 'show' : 'hide' }}" id="requestStatus">
                                <div class="row p-2">
                                    <div class="col-6">
                                        <input type="checkbox" class="form-checkbox" id="pending" {{ request()->has("pendingStatus") ? "checked" : "" }} > Pending
                                    </div>
                                    <div class="col-6">
                                        <input type="checkbox" class="form-checkbox" id="approved" {{ request()->has("approvedStatus") ? "checked" : "" }} > Approved
                                    </div>

                                </div>
                                <div class="row p-2">
                                    <div class="col-6">
                                        <input type="checkbox" class="form-checkbox" id="completed" {{ request()->has("completedStatus") ? "checked" : "" }} > Completed
                                    </div>
                                    <div class="col-6">
                                        <input type="checkbox" class="form-checkbox" id="declined" {{ request()->has("declinedStatus") ? "checked" : "" }} > Declined
                                    </div>
                                </div>
                            </div>


                        </div>
                        <div class="col-span-6 sm:col-span-4" >
                            <label class="block font-medium text-sm text-gray-700">
                                <i class="fas {{ request()->has('bank') || request()->has('cash') ? 'fa-minus' : 'fa-plus' }} collapse-toggle" data-toggle="collapse" data-target="#paymentType" aria-expanded="true" aria-controls="paymentType"></i> &nbsp; Payment type
                            </label>
                            <div class="collapse {{ request()->has('bank') || request()->has('cash') ? 'show' : 'hide' }}" id="paymentType">
                            <div class="row p-2">
                                <div class="col-6">
                                    <input type="checkbox" class="form-checkbox" id="bank" {{ request()->has("bank") ? "checked" : "" }} > Bank
                                </div>
                                <div class="col-6">
                                    <input type="checkbox" class="form-checkbox" id="cash" {{ request()->has("cash") ? "checked" : "" }} > Cash
                                </div>

                            </div>
                            </div>
                        </div>
                        <div class="col-span-6 sm:col-span-4" {{ $payment_sources->count() > 0 ? "" : "style=display:none;" }}>
                            <label class="block font-medium text-sm text-gray-700">
                                Payment source
                            </label>

                            <select class="form-input rounded-md shadow-sm mt-1 block w-full" id="payment_source">
                                <option value="">Select payment source</option>
                                @foreach ($payment_sources as $payment_source)
                                    <option value="{{ $payment_source->value }}" {{ (request()->has("payment_source") ? request("payment_source") : "") == $payment_source->value ? "selected" : "" }}>{{ $payment_source->text }}</option>
                                @endforeach

                            </select>

                        </div>
                        <div class="col-span-6 sm:col-span-4">
                            <label class="block font-medium text-sm text-gray-700" >
                                <i class="fas {{ request()->has('createdDate') || request()->has('endDate') ? 'fa-minus' : 'fa-plus' }} collapse-toggle" data-toggle="collapse" data-target="#created" aria-expanded="true" aria-controls="created"></i> &nbsp;  Created at
                            </label>
                            <div class="collapse {{ request()->has('createdDate') || request()->has('endDate') ? 'show' : 'hide' }}" id="created">
                            <div class="row">
                                <div class="col-12">

                                    <input type="text" placeholder="Choose a start date" value="{{ request()->has("createdDate") ? request("createdDate") : "" }}" class="datepicker form-input rounded-md shadow-sm mt-1 block w-full pr-4" id="createdDate">

                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">

                                    <input type="text" placeholder="Choose a end date" value="{{ request()->has("endDate") ? request("endDate") : "" }}" class="datepicker form-input rounded-md shadow-sm mt-1 block w-full pr-4" id="endDate">

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

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

                            </select>

                        </div>
                        <div class="col-span-6 sm:col-span-4">
                            <label class="block font-medium text-sm text-gray-700">
                                Requested by *
                            </label>

                            <select class="form-input rounded-md shadow-sm mt-1 block w-full" id="creator">
                                <option value="">Select user</option>
                                @foreach ($creators as $creator)
                                    <option value="{{ $creator->id }}" {{ (request()->has("creator") ? request("creator") : "") == $creator->id ? "selected" : "" }}>{{ Auth::id() == $creator->id ? "You" : $creator->name }}</option>
                                @endforeach

                            </select>

                        </div>
                        <!-- Role -->
                        <div class="col-span-6 sm:col-span-4">
                            <label class="block font-medium text-sm text-gray-700" for="role_id">
                                Search by
                            </label>
                            <div class="row">
                                <div class="col-12">
                                    <div class="float-right mr-4 pt-2 pr-2">
                                        <span style="color: grey;">
                                            <i class="fas fa-search fa-lg position-absolute mt-3"></i>
                                        </span>
                                    </div>
                                    <input type="text" placeholder="Id" value="{{ request()->has("searchId") ? request("searchId") : "" }}" class="form-input rounded-md shadow-sm mt-1 block w-full pr-4" id="searchId">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <div class="float-right mr-4 pt-2 pr-2">
                                        <span style="color: grey;">
                                            <i class="fas fa-search fa-lg position-absolute mt-3"></i>
                                        </span>
                                    </div>
                                    <input type="text" placeholder="Amount" value="{{ request()->has("search") ? request("search") : "" }}" class="form-input rounded-md shadow-sm mt-1 block w-full pr-4" id="search">
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="border-top: 0px;">
                    <a href="" onclick="clearFilter(this)" class="btn">Clear</a>
                    <a href="" onclick="filter(this);" 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">Go</a>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        $(function(){
            $(document).on("click", "#export", function(){
                window.location.href = updateQueryStringParameter(window.location.href, "export", 1);
            });
            $(document).on("change", "#show", function() {
                if ($("#show").val() != "") {
                    window.location.href = updateQueryStringParameter(window.location.href, "show", $("#show").val());
                } else {
                    window.location.href = removeQueryStringParameter(window.location.href, "show");
                }
            });
            $('#createdDate').datepicker({
                format: "dd/mm/yyyy",
                uiLibrary: 'bootstrap4'
            });
            $('#endDate').datepicker({
                format: "dd/mm/yyyy",
                minDate: function () {
                    return $("#createdDate").val();
                },
                uiLibrary: 'bootstrap4'
            });

        });
        function clearFilter(obj) {
            obj.href = removeGivenQueryString(obj.href);
        }
        function filter(obj) {
            obj.href = updateQueryStringParameter(obj.href, "page", 1);
            if ($("#pending").prop('checked')) {
                obj.href = updateQueryStringParameter(obj.href, "pendingStatus", 1);
            }
            else{
                obj.href = removeQueryStringParameter(obj.href, "pendingStatus");
            }
            if ($("#approved").prop('checked')) {
                obj.href = updateQueryStringParameter(obj.href, "approvedStatus", 1);
            }
            else{
                obj.href = removeQueryStringParameter(obj.href, "approvedStatus");
            }
            if ($("#completed").prop('checked')) {
                obj.href = updateQueryStringParameter(obj.href, "completedStatus", 1);
            }
            else{
                obj.href = removeQueryStringParameter(obj.href, "completedStatus");
            }
            if ($("#declined").prop('checked')) {
                obj.href = updateQueryStringParameter(obj.href, "declinedStatus", 1);
            }
            else{
                obj.href = removeQueryStringParameter(obj.href, "declinedStatus");
            }

            if ($("#bank").prop('checked')) {
                obj.href = updateQueryStringParameter(obj.href, "bank", 1);
            }
            else{
                obj.href = removeQueryStringParameter(obj.href, "bank");
            }
            if ($("#cash").prop('checked')) {
                obj.href = updateQueryStringParameter(obj.href, "cash", 1);
            }
            else{
                obj.href = removeQueryStringParameter(obj.href, "cash");
            }

            if ($("#createdDate").val() != "") {
                obj.href = updateQueryStringParameter(obj.href, "createdDate", $("#createdDate").val());
            } else {
                obj.href = removeQueryStringParameter(obj.href, "createdDate");
            }

            if ($("#endDate").val() != "") {
                obj.href = updateQueryStringParameter(obj.href, "endDate", $("#endDate").val());
            } else {
                obj.href = removeQueryStringParameter(obj.href, "endDate");
            }

            if ($("#cost_center").val() != "") {
                obj.href = updateQueryStringParameter(obj.href, "cost_center", $("#cost_center").val());
            } else {
                obj.href = removeQueryStringParameter(obj.href, "cost_center");
            }
            if ($("#payment_source").val() != "") {
                obj.href = updateQueryStringParameter(obj.href, "payment_source", $("#payment_source").val());
            } else {
                obj.href = removeQueryStringParameter(obj.href, "payment_source");
            }

            if ($("#creator").val() != "") {
                obj.href = updateQueryStringParameter(obj.href, "creator", $("#creator").val());
            } else {
                obj.href = removeQueryStringParameter(obj.href, "creator");
            }

            if ($("#search").val() != "") {
                obj.href = updateQueryStringParameter(obj.href, "search", $("#search").val());
            } else {
                obj.href = removeQueryStringParameter(obj.href, "search");
            }
            if ($("#searchId").val() != "") {
                obj.href = updateQueryStringParameter(obj.href, "searchId", $("#searchId").val());
            } else {
                obj.href = removeQueryStringParameter(obj.href, "searchId");
            }
        }
    </script>
@endsection