@extends('layouts.app')
@section('content')
    <div class="main__container">
        <div class="header__">
            <div class="left__">
                <h2>Contracts</h2>
                <p>You’ve made {{ $contracts->count() }} contracts this month</p>
            </div>
            <div class="right__">
                <div class="search-box">
                    <form action="{{ route('contract.show') }}" method="GET">

                        <input type="text" class="search-input2" name="contract_id" placeholder="Search By Id...">
                        <button type="submit" class="search-button">
                        </button>

                    </form>
                </div>
            </div>
        </div>
        <div class="grid__stats">
            <div class="elem">
                <div class="title">
                    <h6>Total Contracts</h6>
                </div>
                <div class="content__">
                    <h6>{{ $contracts->count() }} Contract(s)</h6>
                    <!--
                    <p>
            <span class="{{ $percentageContractChange >= 0 ? 'up' : 'down' }}">
                <img src="{{ asset($percentageContractChange >= 0 ? 'img/uparrow.svg' : 'img/arrowdown.svg') }}" alt="arrow">
                 @if($percentageContractChange == 0)
                    <span>N/A</span>
                @else
                    {{ number_format($percentageContractChange, 2) }}%
                @endif
            </span>
                        vs last 30 days
                    </p>
                    -->
                </div>
            </div>
            
            <div class="elem">
                <div class="title">
                    <h6>Total Value</h6>
                </div>
                <div class="content__">
                    <h6>{{ number_format($currentMonthTotalValue, 2) }} USD</h6>
                    <!--
                    <p>
            <span class="{{ $totalValueChange >= 0 ? 'up' : 'down' }}">
                <img src="{{ asset($totalValueChange >= 0 ? 'img/uparrow.svg' : 'img/arrowdown.svg') }}" alt="{{ $totalValueChange >= 0 ? 'uparrow' : 'downarrow' }}">
                 @if($totalValueChange == 0)
                    <span>N/A</span>
                @else
                    {{ $totalValueChange >= 0 ? '+' : '' }}{{ number_format($totalValueChange, 2) }}%
                @endif
            </span> vs last month
                    </p>
                    -->
                </div>
            </div>

            <div class="elem">
                <div class="title">
                    <h6>Active Contracts</h6>
                </div>
                <div class="content__">
                    <h6>{{ $activeContracts }} Contract(s)</h6>
                    <!--
                    <p>
            <span class="{{ $percentageActiveContractChange >= 0 ? 'up' : 'down' }}">
                <img src="{{ asset($percentageActiveContractChange >= 0 ? 'img/uparrow.svg' : 'img/arrowdown.svg') }}" alt="arrow">
                   @if($percentageActiveContractChange == 0)
                    <span>N/A</span>
                @else
                    {{ number_format($percentageActiveContractChange, 2) }}%
                @endif
            </span>
                        vs last 30 days
                    </p>
                    -->
                </div>
            </div>

        </div>
        <div class="table__wrapper">
            <table class="regular-table">
                <tr>
                    <th>Contract ID</th>
                    <th>RFQ ID</th>
                    <th class="center">Product</th>
                    <th class="center">Volume</th>
                    <th class="center">Price</th>
                    <th class="center">Value</th>
                    <th class="center">Supplier</th>
                    <th class="center">Status</th>
                    <th class="center"></th>
                </tr>
                @foreach ($items as $contract)
                    <tr style="cursor: pointer" onclick="window.location='{{ route('contractinner', $contract->id) }}'">

                        <td>
                            <p class="medium">{{ $contract->contract_id }}</p>
                        </td>
                        <td>
                            <p class="medium">{{ $contract->rfq->ref_id }}</p>
                        </td>
                        <td class="center">
                            <div class="double">
                                <p style="margin: auto;" class="semibold">{{ $contract->rfq->defaultProduct->name }}</p>
                                <span style="margin: auto;">{{$contract->rfq->category->name}}</span>
                            </div>
                        </td>
                        <td class="center">
                            <p class="medium">{{number_format( $contract->volume_kg,2) }}  {{$contract->unit}}</p>
                        </td>
                        <td class="center">
                            <p class="medium">{{number_format($contract->price_per_kg,2)}}  {{$contract->unit}}</p>
                        </td>
                        <td class="center">
                            <p class="medium">{{number_format($contract->total_price,2)}}  {{$contract->currency}}</p>
                        </td>
                        <td class="center">
                            <a href="{{ route('supplier.show', ['id' => $contract->buyer->id]) }}">
                                <p class="supplier">{{$contract->buyer->company->name}}.</p>
                            </a>
                        </td>
                        <td class="center">
                            @if ($contract->status == 0)
                                <p class="status active">
                                    <span class="dot"></span> Active
                                </p>
                            @elseif($contract->status == 1)
                                <p class="status  paused">
                                    <span class="dot"></span> Paused
                                </p>
                            @elseif($contract->status == 2)
                                <p class="status  canceled">
                                    <span class="dot"></span> Canceled
                                </p>
                            @elseif($contract->status == 3)
                                <p class="status  completed">
                                    <span class="dot"></span> Completed
                                </p>
                            @endif
                        </td>
                        <td class="center">
                            <div class="action__button">
                                <a href="#"><img src="{{ asset('img/dots.svg') }}" alt="dots"></a>
                            </div>
                        </td>
                    </tr>
                @endforeach

            </table>
        </div>
    </div>
@endsection