@extends('superadmin.layout.main')

@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">
                        Manage
                    </div> --}}
                    <h2 class="page-title">
                        {{$page['pageTitle']}}
                    </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>

                        @if(isset($page['addBtn']) && $page['addBtn'])
                        <a href="{{ $page['btnLink'] }}" class="btn btn-success d-none d-sm-inline-block">
                            {!! $ADD !!}
                            {{$page['btnText']}}
                        </a>
                        @endif

                    </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/tools?result=') }}" onchange="updatePagination()">
                                    @foreach ([10, 20, 30, 50, 100] as $value)
                                        <option value="{{ $value }}"
                                            {{ request('result', 30) == $value ? 'selected' : '' }}>{{ $value }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="ms-auto text-secondary">

                            <form action="{{ url('admin/tools') }}" 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.tools.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>Header Menu</th>
                                <th>Title</th>
                                <th>Slug</th>
                                <th>Category</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($navitem 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 update-status tool-page"
                                                url="{{ route('admin.tools.update-col', ['id' => $item->id]) }}"
                                                col="status" type="checkbox" {{ $item->status ? 'checked' : false }}>
                                        </label>
                                    </td>
                                    <td>
                                        <a href="{{ route('popup.itemDetail', ['controller' => 'ToolController', 'method' => 'itemDetail', 'id' => $item->id]) }}"
                                            class="open-popup text-reset">
                                            {{ $item->name ?? '-' }} </a>
                                        <span>
                                            <a href="{{url($item->url??'#')}}" target="_blank" title="Open in Website Public View">
                                                <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-eye-share"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M12.597 17.981a9.467 9.467 0 0 1 -.597 .019c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6c-.205 .342 -.415 .67 -.63 .983" /><path d="M16 22l5 -5" /><path d="M21 21.5v-4.5h-4.5" /></svg>
                                            </a>
                                        </span>
                                            <br><i style="font-size: 10px; margin-top: 0px; float:left">{{$page['itemType']}}</i>
                                    </td>
                                    <td>
                                        {{ $item->card_heading ?? '-' }}
                                    </td>
                                    <td>
                                        {{ $item->url ?? '#' }}
                                    </td>
                                    <td>
                                        <select style="width: 200px !important"
                                            url="{{ route('admin.tools.update-col', ['id' => $item->id]) }}"
                                            class="update-order form-control" col="category_id">
                                            @foreach ($categories as $cat)
                                                <option value="{{ $cat->id }}"
                                                    {{ $cat->id == $item->category_id ? 'selected' : false }}>
                                                    {{ $cat->name }} </option>
                                            @endforeach
                                        </select>
                                    </td>


                                    <td class="text-end">
                                        <a data-bs-toggle="tooltip" title="Edit {{ $item->name }}"
                                            href="{{ route('admin.tools.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>
                                    </td>
                                    @if($item->is_custom_page)
                                    <td class="text-end">
                                        <button id="{{$item->id}}" data-bs-toggle="tooltip" title="Delete {{ $item->name }}"
                                            url="{{ route('admin.tools.delete') }}" action = "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>
                                        </button>
                                    </td>
                                    @endif
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

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