@extends('layouts/contentLayoutMaster')

@section('title', 'Category')


@section('content')
    <div class="row" id="module-table">
        <div class="col-12">
            <div class="card p-0 mb-2">
                <form action="">
                    <div class="accordion  p-0" id="accordionExample">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingOne">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#accordionOne" aria-expanded="true" aria-controls="accordionOne">
                                    <b>Search</b>
                                </button>
                            </h2>
                            <div id="accordionOne"
                                class="accordion-collapse collapse border-top {{ $request->search == 1 ? 'show' : '' }}"
                                aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                <div class="accordion-body card-body">
                                    <div class="row">
                                        <div class="col-md-4 col-12">
                                            <div class="mb-1">
                                                <input type="hidden" name="search" id="" value="1">
                                                <label class="form-label" for="first-name-column">Title </label>
                                                <input type="text" id="first-name-column" class="form-control"
                                                    placeholder="Title" name="title" value="{{ $request->title ?? '' }}" />
                                                @error('title')
                                                    <b class="text-danger mt-1">{{ $message }}</b>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-8 pt-2">
                                            <a href="{{ route('category.index') }}"
                                                class="btn btn-danger float-end">Cancel</a>
                                            <button type="submit" class="btn btn-primary me-1 float-end">Fillter</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-12">
            <div class="card">
                <div class="card-header p-1">
                    <h4 class="card-title">Category listing</h4>
                    <a href="{{ route('category.create') }}" class="btn btn-primary">Add Category</a>
                </div>
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>@sortablelink('id', 'Id')</th>
                                <th>@sortablelink('title', 'Title')</th>
                                <th>@sortablelink('image', 'Image')</th>
                                <th class="text-primary">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($data as $key => $row)
                                <tr>
                                    <td>
                                        <span
                                            class="fw-bold">{{ $data->perPage() * ($data->currentPage() - 1) + ($key + 1) }}</span>
                                    </td>
                                    <td>
                                        <a class="text-primary" href="{{ route('category.edit', $row->id) }}">
                                            @php
                                                $row->title = json_decode($row->title);
                                            @endphp
                                            <ul>
                                            @foreach($row->title as $title)
                                                <li class="fw-bold">{{ $title ?? 'N/A' }}</li>
                                            @endforeach
                                            </ul>
                                        </a>
                                    </td>
                                    <td>
                                        @if(!empty($row->image))
                                        <img src="{{ asset($row->image) }}" alt="" style="height: 70px;">
                                        @endif
                                    </td>
                                    <td>
                                        <a class="text-warning" href="{{ route('category.edit', $row->id) }}">
                                            <i data-feather="edit-2" class="me-50"></i>
                                        </a>
                                        <a class="text-danger delete_btn" href="#" data-url="{{ route('category.delete', $row->id) }}">
                                            <i data-feather="trash" class="me-50"></i>
                                        </a>    
                                    </td>
                                </tr>

                            @empty
                                <tr>
                                    <td colspan="10" align="center">
                                        No records found.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="card-footer">
                    {!! $data->withQueryString()->links('pagination::bootstrap-5') !!}
                </div>
            </div>
        </div>
    </div>
@endsection