@extends('user.layouts.main')

@section('contents')
    <div class="dashboard_wrapper border_start p-3">
        <div class="card border-0">
            <div class="user_dashboard">
                <div class="car">
                    <div class="card-header bg-white">
                        <div class="row">
                            <div class="col-12">
                                <h5 class="card-title my-2"> Escrow Transaction Complete </h5>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="transction_step mb-5">
                            <ul>
                                <li>
                                    <a href="#">
                                        <span class="active">1</span><br>
                                        <h6>Create new transaction</h6>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="active">2</span><br>
                                        <h6>Participants approval</h6>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="active">3</span><br>
                                        <h6>Buyer pays to escrow</h6>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="active">4</span><br>
                                        <h6>Seller ships goods</h6>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="active">5</span><br>
                                        <h6>Buyer approves receipt</h6>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="bg-success text-white">6</span><br>
                                        <h6>Escrow released</h6>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="user_wrapper">
                            <div class="transaction_details">
                                <h4 class="card-title fw-bold text-success my-0">Transaction
                                    #22-2004 is completed
                                </h4>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="card-body">
                                            <table class="table striped">
                                                <thead class="back-dark">
                                                    <tr>
                                                        <th colspan="2">Transaction Details</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td class="text-end"> Product </td>
                                                        <td class="text-end"> {{ $row->ad->title }} </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-end"> Seller </td>
                                                        <td class="text-end"><a href="{{ route('seller.shop',$row->seller_id) }}">{{ $row->seller->name }}</a> </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-end"> Buyer </td>
                                                        <td class="text-end"> {{ $row->buyer->name }} </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-end">  Price </td>
                                                        <td class="text-end"> {{ $row->price }} KSh </td>
                                                    </tr>

                                                    <tr>
                                                        <td class="text-end"> Escrow fee </td>
                                                        <td class="text-end"> {{ $row->escrow_fee }} KSh </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="col-md-6 d-flex align-items-center">
                                        <div class="text-end text-center">
                                            <img src="{{ asset('assets/images/complete.jpg') }}" class="img-fluid" alt="image" width="50%">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection