@extends('backoffice.layouts.app')
@section('content')
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center py-4">
        <div class="d-block mb-4 mb-md-0">
            <nav aria-label="breadcrumb" class="d-none d-md-inline-block">
                <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
                    <li class="breadcrumb-item">
                        <a href="{{ route('admin.dashboard') }}">
                            <svg class="icon icon-xxs" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
                                </path>
                            </svg>
                        </a>
                    </li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.products') }}">Products</a></li>
                    <li class="breadcrumb-item active" aria-current="page">list</li>
                </ol>
            </nav>
            <h2 class="h4">All Products</h2>
        </div>
        <div class="btn-toolbar mb-2 mb-md-0">
            {{-- <form action="">
                <div class="input-group me-2 me-lg-3 fmxw-400">
                    <span class="input-group-text">
                        <svg class="icon icon-xs" x-description="Heroicon name: solid/search"
                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd"
                                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
                                clip-rule="evenodd"></path>
                        </svg>
                    </span>
                    <input type="text" name="search" class="form-control" placeholder="Search orders"
                        value="{{ $search }}">
                    <input type="submit" value="Search" class="btn btn-primary">
                </div>
            </form> --}}
            <a href="{{ route('admin.product.create') }}" class="btn btn-sm btn-gray-800 d-inline-flex align-items-center">
                <svg class="icon icon-xs me-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6">
                    </path>
                </svg>
                Add New
            </a>
        </div>
    </div>
    <div class="card card-body border-0 shadow table-wrapper table-responsive">
        <table class="table table-hover table-bordered pt-4" id="dataTablesTable">
            <thead>
                <tr>
                    <th class="border-gray-200">#</th>
                    <th class="border-gray-200">Thumbnail</th>
                    <th class="border-gray-200">Title (EN)</th>
                    <th class="border-gray-200">Title (AR)</th>
                    {{-- <th class="border-gray-200">Category</th> --}}
                    <th class="border-gray-200">Modify Date</th>
                    <th class="border-gray-200">Status</th>
                    <th class="border-gray-200 text-center">Action</th>
                </tr>
            </thead>
            <tbody>
                @if (count($products))
                    @foreach ($products as $index => $item)
                        <tr>
                            <td>
                                <a href="your-page-url" class="fw-bold text-center">{{ $index + 1 }}</a>
                            </td>
                            <td>
                                @if ($item->images->isNotEmpty())
                                    <a href="#" target="_blank">
                                        <img src="{{ asset('uploads/products/' . $item->images->first()->filename) }}"
                                            alt="Product Image" class="img-fluid" width="80"
                                            height="60">
                                    </a>
                                @else
                                    <img src="{{ asset('wasm-flower-dummy.jpg') }}" class="img-fluid" width="80"
                                        height="60">
                                @endif
                            </td>
                            <td><span class="fw-normal">{{ $item->title_en ?? '' }}</span></td>
                            <td><span class="fw-normal">{{ $item->title_ar ?? '' }}</span></td>
                            {{-- <td><span class="fw-normal">{{ $item->category->title_en ?? 'No Category' }}</span></td> --}}
                            <td><span
                                    class="fw-normal">{{ \Carbon\Carbon::parse($item->created_at)->format('d-m-Y') ?? '' }}</span>
                            </td>
                            <td>
                                @if ($item->status == 1)
                                    <span class="fw-bold text-success">Active</span>
                                @else
                                    <span class="fw-bold text-danger">Inactive</span>
                                @endif
                            </td>
                            <td class="mx-auto text-center">
                                <a href="{{ route('admin.product.edit', $item->slug) }}"
                                    class="icon-shape icon-xs icon-shape-success rounded">
                                    <span class="fas fa-edit mx-auto"
                                        style="text-decoration: none !important; background: transparent !important; color: #10B981 !important;"></span>
                                </a>
                            </td>
                        </tr>
                    @endforeach
                @endif
            </tbody>
        </table>
       
    </div>
@endsection