@extends('layouts.app')

@section('content')
    <style>
        thead > tr > th {
            text-align: center;
            font-weight: bold !important;
        }
    </style>

    <section class="page-header row">
        <h2> Amazon Items Checker </h2>
        <ol class="breadcrumb">
            <li><a href="{{ url('') }}"> Dashboard </a></li>
            <li class="active"> Amazon Items Checker </li>
        </ol>
    </section>

    <div class="page-content row">
        <div class="page-content-wrapper no-margin">
            <div class="sbox">
                <div class="sbox-content">
                    <form id="checkerForm" action="{{ url('/amazon-check-items') }}" method="POST">
                        <div class="row">
                            <div class="col-md-2">
                                <label for="network"> Network </label>
                                <br>
                                <select name="network" id="network" placeholder="Select Network" class="select2" required>
                                    @foreach($options as $key => $value)
                                        <option value="{{$key}}" @if(isset($selectedNetwork) && $selectedNetwork == $key) selected @endif>{{$value}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label for="date"> Date </label>
                                <br>
                                <input name="date" id="date" placeholder="Select Date" class="date" value="{{ $selectedDate ?? '' }}" required>
                            </div>
                            <button type="submit" class="btn btn-primary m">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @if (isset($items) && !empty($items))
        <div class="page-content row">
            <div class="page-content-wrapper no-margin">
                <div class="sbox">
                    <div class="sbox-content">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover" style="text-align: center">
                                <thead>
                                <tr>
                                    <th colspan="5">Report ({{count($items)}})</th>
                                    <th colspan="3">Database</th>
                                </tr>
                                <tr>
                                    <th>Click ID</th>
                                    <th>Unit Price</th>
                                    <th>Quantity</th>
                                    <th>Commission</th>
                                    <th>Category</th>
                                    <th>Click ID</th>
                                    <th>Sale ID</th>
                                    <th>SaleItem ID</th>
                                </tr>
                                </thead>

                                <tbody>
                                @foreach($items as $item)
                                    <tr>
                                        <td>{{$item['SubTag']}}</td>
                                        <td>{{$item['Price']}}</td>
                                        <td>{{$item['Qty']}}</td>
                                        <td>{{$item['Earnings']}}</td>
                                        <td>{{$item['categoryName']}}</td>
                                        <td>{{$item['db_click_id'] ?? ''}}</td>
                                        <td>{{$item['sale_id'] ?? ''}}</td>
                                        <td>{{$item['sale_item_id'] ?? ''}}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    @if (isset($otherItems) && $otherItems->isNotEmpty())
        <div class="page-content row">
            <div class="page-content-wrapper no-margin">
                <div class="sbox">
                    <div class="sbox-content">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover" style="text-align: center">
                                <thead>
                                <tr>
                                    <th colspan="7">Items in DB not in Report ({{$otherItems->count()}})</th>
                                </tr>
                                <tr>
                                    <th>Sale ID</th>
                                    <th>Click ID</th>
                                    <th>SaleItem ID</th>
                                    <th>Unit Price</th>
                                    <th>Quantity</th>
                                    <th>Commission</th>
                                    <th>Category</th>
                                </tr>
                                </thead>

                                <tbody>
                                @foreach($otherItems as $otherItem)
                                    <tr>
                                        <td>{{$otherItem->sale_id}}</td>
                                        <td>{{$otherItem->click_id}}</td>
                                        <td>{{$otherItem->id}}</td>
                                        <td>{{$otherItem->unit_price}}</td>
                                        <td>{{$otherItem->quantity}}</td>
                                        <td>{{$otherItem->commission}}</td>
                                        <td>{{$otherItem->category}}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection