@extends('superadmin.layout.main')

@section('header-css')
    <style>
   td {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-all; /* Optional for extra compatibility */
    max-width: 30ch; /* Restrict to 20 characters per line */
    white-space: normal; /* Ensure wrapping is enabled */
  }       
    </style>
@endsection

@section('page-header')
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <!-- Page pre-title -->
                    {{-- <div class="page-pretitle">
                        Script
                    </div> --}}
                    <h2 class="page-title">
                        Categories
                    </h2>
                </div>
                <!-- Page title actions -->
                <div class="col-auto ms-auto d-print-none">
                    <div class="btn-list">
                        <span class="d-none d-sm-inline">
                            <a href="{{ route('admin.dashboard') }}" class="btn btn-primary">
                                {!! $GO_BACK !!} Go Back
                            </a>
                        </span>

                        <a href="{{ route('admin.categories.add') }}" class="btn btn-success d-none d-sm-inline-block">
                            <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                <path d="M12 5l0 14" />
                                <path d="M5 12l14 0" />
                            </svg>
                            Add Category
                        </a>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

<!-- main container -->
@section('main-container')
    <div class="row row-deck row-cards">
        <div class="col-12">
            <div class="card">

                <div class="card-body border-bottom py-3">
                    <div class="d-flex">
                        <div class="text-secondary mt-2">
                            Show entries
                            <div class="mx-2 d-inline-block">
                                <select class="form-control form-control-sm" id="pagination"
                                    data-url="{{ url('/admin/categories?result=') }}" onchange="updatePagination()">
                                    @foreach ([10, 20, 50, 100] as $value)
                                        <option value="{{ $value }}"
                                            {{ request('result', 100) == $value ? 'selected' : '' }}>{{ $value }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="ms-auto text-secondary">

                            <form action="{{ url('admin/categories') }}" method="GET">
                                @csrf
                                <div class="row g-2">
                                    <div class="col">
                                        <input type="text" name="search" id="search" class="form-control"
                                            placeholder="Search for..." value="{{$_GET['search']?? false}}">
                                    </div>
                                    <div class="col-auto">
                                        <button data-bs-toggle="tooltip" title="Search" type="submit" class="btn btn-icon" aria-label="Button">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
                                                fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
                                                <path d="M21 21l-6 -6"></path>
                                            </svg>
                                        </button>
                                        <a href="{{route('admin.categories.list')}}" data-bs-toggle="tooltip" title="Reset search" class="btn btn-icon" aria-label="Button">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round"
                                                class="icon icon-tabler icons-tabler-outline icon-tabler-zoom-reset">
                                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                <path d="M21 21l-6 -6" />
                                                <path
                                                    d="M3.268 12.043a7.017 7.017 0 0 0 6.634 4.957a7.012 7.012 0 0 0 7.043 -6.131a7 7 0 0 0 -5.314 -7.672a7.021 7.021 0 0 0 -8.241 4.403" />
                                                <path d="M3 4v4h4" />
                                            </svg>
                                        </a>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table card-table table-vcenter text-nowrap datatable">
                        <thead>
                            <tr>
                                <th>Active</th>
                                <th>Category</th>
                                <th>Description</th>
                                <th>Order</th>
                                <th>Edit</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($categories as $key => $item)
                                <tr id="rowID{{$item->id}}">
                                    <td>
                                        <label class="form-check form-switch mt-3">
                                            <input class="form-check-input toggle-switch-green change-status"
                                                url="{{ route('admin.categories.update-status') }}" data-id="{{$item->id}}"
                                                type="checkbox" {{ $item->status ? 'checked' : false }}>
                                        </label>
                                    </td>
                                    <td>
                                        
                                            {{ $item->name ?? '-' }}
                                    </td>

                                    <td>
                                        
                                            {{ $item->description ?? '-' }}
                                    </td>
                    
                                    <td>
                                        <select data-id="{{$item->id}}" url="{{ route('admin.categories.update-order') }}"
                                            class="change-order form-control">
                                            @for ($i = 0; $i <= 20; $i++)
                                                <option value="{{ $i }}"
                                                    {{ $item->order == $i ? 'selected' : false }}>
                                                    {{ $i }} </option>
                                            @endfor
                                        </select>
                                    </td>
                                    
                                    <td class="text-left">
                                        <a style="max-width: 45px;!impportant" data-bs-toggle="tooltip" title="Edit {{ $item->name }}"
                                            href="{{ route('admin.categories.edit', ['id' => $item->id]) }}"
                                            class="btn btn-twitter w-100 btn-icon" aria-label="Google">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                class="icon icon-tabler icons-tabler-outline icon-tabler-edit">
                                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
                                                <path
                                                    d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" />
                                                <path d="M16 5l3 3" />
                                            </svg>
                                        </a>
                                        @if($item->name != 'others' && $item->id != 1)
                                        <a action="delete" id="{{$item->id}}" data-id="{{$item->id}}" style="max-width: 45px;!impportant" data-bs-toggle="tooltip" title="Delete {{ $item->name }}"
                                            url="{{ route('admin.categories.delete') }}"
                                            class="btn btn-google w-100 btn-icon form_submit" aria-label="Google">
                                            <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-trash"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7l16 0" /><path d="M10 11l0 6" /><path d="M14 11l0 6" /><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" /><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" /></svg>
                                        </a>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="card-footer d-flex align-items-center">
                    {!! $categories->appends(request()->query())->links('pagination::bootstrap-5') !!}
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection