@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.sliders') }}">Sliders</a></li>
                    <li class="breadcrumb-item active" aria-current="page">List</li>
                </ol>
            </nav>
            <h2 class="h4">All Sliders</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.slider.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">Modify Date</th>
                    <th class="border-gray-200">Status</th>
                    <th class="border-gray-200 text-center">Action</th>
                </tr>
            </thead>
            <tbody>
                @if (count($sliders))
                    @foreach ($sliders as $index => $item)
                        <tr>
                            <td>
                                <a href="your-page-url" class="fw-bold text-center">{{ $index + 1 }}</a>
                            </td>
                            <td>
                                @if (empty($item->thumbnail))
                                    <img src="{{ asset('wasm-flower-dummy.jpg') }}" class="img-fluid" width="80"
                                        height="60">
                                @else
                                    <img src="{{ asset('uploads/slider/' . $item->thumbnail) }}" 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">{{ \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.slider.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>
                                {{-- &nbsp;&nbsp;
                                <a href="#" class="icon-shape icon-xs icon-shape-danger rounded">
                                    <span class="fas fa-trash-alt mx-auto"
                                        style="text-decoration: none !important; background: transparent !important; color: #E11D48 !important;"></span>
                                </a> --}}
                            </td>
                        </tr>
                    @endforeach
        
                @endif
            </tbody>
        </table>
        {{-- <div class="card-footer px-3 border-0 d-flex flex-column flex-lg-row align-items-center justify-content-between">
            <nav aria-label="Page navigation example">
                <ul class="pagination mb-0">
                    <!-- Previous Page Link -->
                    @if ($sliders->onFirstPage())
                        <li class="page-item disabled">
                            <span class="page-link">Previous</span>
                        </li>
                    @else
                        <li class="page-item">
                            <a class="page-link" href="{{ $sliders->previousPageUrl() }}">Previous</a>
                        </li>
                    @endif

                    <!-- Page Numbers -->
                    @foreach ($sliders->getUrlRange(1, $sliders->lastPage()) as $page => $url)
                        <li class="page-item {{ $page == $sliders->currentPage() ? 'active' : '' }}">
                            <a class="page-link" href="{{ $url }}">{{ $page }}</a>
                        </li>
                    @endforeach

                    <!-- Next Page Link -->
                    @if ($sliders->hasMorePages())
                        <li class="page-item">
                            <a class="page-link" href="{{ $sliders->nextPageUrl() }}">Next</a>
                        </li>
                    @else
                        <li class="page-item disabled">
                            <span class="page-link">Next</span>
                        </li>
                    @endif
                </ul>
            </nav>

            <!-- Pagination Summary -->
            <div class="fw-normal small mt-4 mt-lg-0">
                Showing <b>{{ $sliders->firstItem() }}</b> to <b>{{ $sliders->lastItem() }}</b> of
                <b>{{ $sliders->total() }}</b> entries
            </div>
        </div> --}}
        {{-- <div class="card-footer px-3 border-0 d-flex flex-column flex-lg-row align-items-center justify-content-between">
            <nav aria-label="Page navigation example">
                <ul class="pagination mb-0">
                    <li class="page-item">
                        <a class="page-link" href="#">Previous</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">1</a>
                    </li>
                    <li class="page-item active">
                        <a class="page-link" href="#">2</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">3</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">4</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">5</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">Next</a>
                    </li>
                </ul>
            </nav>
            <div class="fw-normal small mt-4 mt-lg-0">Showing <b>5</b> out of <b>25</b> entries</div>
        </div> --}}
    </div>
@endsection