@extends('layouts.backoffice')

@section('content')

<div class="main-container">
    <div class="ms-panel">
        <div class="card shadow-none position-relative overflow-hidden mb-4">
            <div class="card-body d-flex align-items-center justify-content-between p-4">
                <h4 class="card-title mb-0">Marketplace Items</h4>
                <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a class="text-muted text-decoration-none" href="{{ route('backoffice.index') }}">Home</a>
                    </li>
                    <li class="breadcrumb-item" aria-current="page">
                    Marketplace Items
                    </li>
                    </ol>
                </nav>
            </div>
        </div>
        <div class="card">
            <div class="card-body p-4">
                <form id="dataForm" name="dataForm" action="#" method="get">

                    <input type="hidden" name="customer" value="{{ $filter['customer'] }}">

                    <div class="row">
                        <div class="col-md-1 pe-0">
                            <label class="form-label">Show</label>
                        </div> 
                        <div class="col-md-2 ps-0"> 
                            <div class="select-style-1">
                                <div class="select-position">
                                    <select class="form-select" id="page_size" name="page_size" onchange="this.form.submit();">
                                        <option value="12" {{  ("12" == escapeNull($filter['page_size'])) ? "selected" : "" }}>12</option>
                                        <option value="24" {{  ("24" == escapeNull($filter['page_size'])) ? "selected" : "" }}>24</option>
                                        <option value="36" {{  ("36" == escapeNull($filter['page_size'])) ? "selected" : "" }}>36</option>
                                        <option value="48" {{  ("48" == escapeNull($filter['page_size'])) ? "selected" : "" }}>48</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-1 pe-0">
                            <label class="form-label">Status</label>
                        </div> 
                        <div class="col-md-2 ps-0"> 
                            <div class="select-style-1">
                                <div class="select-position">
                                    <select class="form-select" id="status" name="status" onchange="this.form.submit();">
                                        <option value="">All status</option>
                                        <option value="1" {{  ("1" == escapeNull($filter['status'])) ? "selected" : "" }}>Active</option>
                                        <option value="-1" {{  ("-1" == escapeNull($filter['status'])) ? "selected" : "" }}>InActive</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-1 pe-0">
                            <label class="form-label">Category</label>
                        </div> 
                        <div class="col-md-2 ps-0"> 
                            <div class="select-style-1">
                                <div class="select-position">
                                    <select class="form-select select2" id="category" name="category" onchange="this.form.submit();">
                                        <option value="">All Categories</option>
                                        @foreach($categories as $category_option)
                                        <option value="{{ $category_option->id }}" {{ ($category_option->id == escapeNull($filter['category'])) ? "selected" : "" }}>{{ $category_option->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                    </div>
                </form>
            </div>
        </div>
        <div class="card position-relative overflow-hidden">
            <div class="card-body p-4 pb-0">
                <div class="row">
                    @if($marketplace_items->isEmpty())
                        <span>No marketplace items!</span>
                        @else
                            @foreach($marketplace_items as $marketplace_item)

                            @php 
                            $barter_status = "Unknown";
                            if($marketplace_item->barter_status == 1){
                                $status = '<span class="mb-1 badge rounded-pill  bg-success-subtle text-success">Active</span>';
                                
                            }
                            elseif($marketplace_item->barter_status == 0){
                                $status = '<span class="mb-1 badge rounded-pill  bg-danger-subtle text-danger">InActive</span>';
                                
                            }
                            @endphp
                            <div class="col-sm-6 col-xl-4">
                                <div class="card hover-img overflow-hidden rounded-2">
                                    <div class="position-relative" style="background-image: url({{ $marketplace_item->image != '' ? asset($marketplace_item->image) : asset($marketplace_item->marketplace_item_images[0]->source) }}); height: 200px;background-size: contain;background-repeat: no-repeat;background-position: center;">
                                        <a href="javascript:void(0)" class="text-bg-warning rounded-circle p-2 text-white d-inline-flex position-absolute bottom-0 end-0 mb-n3 me-3" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="NB. Likes">
                                            <i class="ti ti-heart fs-4"></i>
                                        </a>
                                        <a href="javascript:void(0)" class="text-warning  p-2 d-inline-flex position-absolute  fs-2 bottom-0 end-0 mb-n4 me-5" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="NB. Likes">
                                            {{ $marketplace_item->nb_likes }}
                                        </a>
                                    </div>
                                    <div class="card-body pt-3 p-4">
                                        <h6 class="fw-semibold fs-4">{{ $marketplace_item->name }} <span class="text-muted fs-2">({{ $marketplace_item->category->name }})</span></h6>
                                        <div class="d-flex align-items-center justify-content-between">
                                            <h6 class="fw-semibold fs-2 mb-0"><span class="text-muted">Price: </span>{{ $marketplace_item->price }} {{ $marketplace_item->currency->name }}</h6>
                                            <p class="d-flex align-items-center fs-2 mb-0"><span class="text-muted">Barter status: </span> {!! $status !!}</p>
                                        </div>
                                        <div class="d-flex align-items-center justify-content-between">
                                        <h6 class="fw-semibold fs-2 mb-0"><span class="text-muted">Creation Date: </span>{{ date('F d, Y', strtotime($marketplace_item->created_at)) }}</h6>
                                            <p class="d-flex align-items-center fs-2 mb-0"><span class="text-muted">Nb. Visits: </span> {{ $marketplace_item->nb_visits }}</p>
                                        </div>
                                        <h6 class="mt-1 fw-semibold fs-2 mb-0"><span class="text-muted">Added by: </span>{{ $marketplace_item->customer->email ?? $marketplace_item->customer->first_name . ' '. $marketplace_item->customer->last_name }}</h6>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
        <div class="card data-list">
            <div class="card-body p-4">
                {{ $marketplace_items->appends(\Request::query())->links('vendor.pagination.custom-pagination') }}
            </div>
        </div> 
    </div>
</div>
@endsection