@extends('portal.user.layouts.app')

@section('content')
    <div id="content-wrapper" class="d-flex flex-column">
        <div id="content">
            <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
                <!-- <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
                        <i class="fa fa-bars"></i>
                    </button> -->
                <h2>PAYMENT HISTORY</h2>
                <ul class="navbar-nav rghtbl ml-auto">


                    {{--                        <li class="nav-item dropdown no-arrow">--}}
                    {{--                            <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"--}}
                    {{--                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">--}}
                    {{--                                <img src="../../dashboard/images/usrimg.png" class="img-fluid" alt="img" />--}}
                    {{--                                <span class="d-none d-lg-inline text-gray-600 small"><b>John Smith</b><small>User--}}
                    {{--                                    </small></span>--}}
                    {{--                            </a>--}}
                    {{--                            <div class="dropdown-menu dropdown-menu shadow animated--grow-in"--}}
                    {{--                                aria-labelledby="userDropdown">--}}
                    {{--                                <a class="dropdown-item" href="#"> <i--}}
                    {{--                                        class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i> Account </a>--}}
                    {{--                                <a class="dropdown-item" href="#"> <i--}}
                    {{--                                        class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i> Setting </a>--}}
                    {{--                                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal"> <i--}}
                    {{--                                        class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i> Login </a>--}}
                    {{--                            </div>--}}
                    {{--                        </li>--}}
                </ul>
            </nav>
            <!-- <div class="cartSec">
                <div class="container-fluid">
                    <div class="main-padingbdy">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="inspectionBox">
                                    <figure><img src="../../dashboard/images/totalicon.png" class="img-fluid"
                                            alt="img"></figure>
                                    <div>
                                        <h2>0</h2>
                                        <h6>TOTAL<br>
                                            INSPECTIONS</h6>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="inspectionBox">
                                    <figure><img src="../../dashboard/images/inprogresicon.png" class="img-fluid"
                                            alt="img">
                                    </figure>
                                    <div>
                                        <h2>0</h2>
                                        <h6>Complete<br>
                                            INSPECTIONS</h6>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="inspectionBox">
                                    <figure><img src="../../dashboard/images/complticon.png" class="img-fluid"
                                            alt="img">
                                    </figure>
                                    <div>
                                        <h2>0</h2>
                                        <h6>COMPLETED<br>
                                            INSPECTIONS</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> -->
            <div class="main-container margin">
                <div class="container-fluid">
                    <div class="card bg-transparent p-0">
{{--                        <div class="tableheadingsection">--}}
{{--                            <div class="d-flex align-items-center">--}}
{{--                                <span>Show</span>--}}
{{--                                <select class="custom-select mx-2">--}}
{{--                                    <option value="">10</option>--}}
{{--                                </select>--}}
{{--                                <span>entries</span>--}}
{{--                            </div>--}}
{{--                            <div class="searchBox">--}}
{{--                                <input type="text" class="form-control" placeholder="Search">--}}
{{--                                <button class="btn btn-primary"><i class="fas fa-search"></i></button>--}}
{{--                            </div>--}}
{{--                        </div>--}}

                        <table class="mytable noborder">
                            <thead>
                            <tr>
                                <th>Transaction Id</th>
                                <th>Agent Name</th>
                                <th>Category</th>
                                <th>Inspection fee</th>
                                <th>Price Range</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            @foreach($payments as $pay)
                                <tr>
                                    <td><span>{{$pay->id ?? ''}}</span></td>
                                    <td><span>{{$pay->inspection->userInspector->name ?? ''}}</span></td>
                                    @foreach($pay->inspection->inspectionDetails as $item)
                                        @if( $item->key == "categories")
                                            <td><span>{{$item->value ?? ''}}</span></td>
                                        @endif
                                    @endforeach
                                    <td><span>{{$pay->inspection_fee ?? ''}}$</span></td>
                                    @foreach($pay->inspection->inspectionDetails as $item)
                                        @if( $item->key == "prices")
                                            <td><span>{{$item->value ?? ''}}$</span></td>
                                        @endif
                                    @endforeach
                                    <td>
                                        <a href="{{route('user.agent.details', $pay->inspection->id)}}">
                                            <button class="btn btn-primary">Details</button>
                                        </a>
{{--                                        <button class="btn btn-primary">Details</button>--}}
                                        <a href="{{route('user.transactions.delete', $pay->id )}}">
                                            <button class="btn btn-danger" >Delete</button>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </table>
{{--                        --}}
{{--                        <div class="d-flex justify-content-end align-items-center mt-2">--}}
{{--                            <div class="btn-group">--}}
{{--                                <button class="btn btn-light text-dark mr-2">Previous</button>--}}
{{--                                <button class="btn btn-danger mr-2">01</button>--}}
{{--                                <button class="btn btn-light text-dark mr-2">02</button>--}}
{{--                                <button class="btn btn-light text-dark mr-2">03</button>--}}
{{--                                <button class="btn btn-light text-dark mr-2">04</button>--}}
{{--                                <button class="btn btn-primary">Next</button>--}}
{{--                            </div>--}}
{{--                        </div>--}}
                    </div>
                </div>
            </div>
        </div>
@endsection