@extends('admin.layouts.app')
@section('title')
    Sub Category
@endsection
@section('content')
    <div class="content-page">
        <div class="content">
            <div class="container-fluid">
                <div class="row page-title">
                    <div class="col-md-12">
                        <div class="col-md-12 d-flex justify-content-between">
                            <div class="col-sm-4 col-xl-2 d-flex justify-content-space-between align-center m-0 p-0">
                                <button class="btn text-dark category"><i data-feather="chevron-left"></i></button>
                                <h4 class="">Sub Category</h4>
                            </div>
                            <nav aria-label="breadcrumb" class="float-right mt-1">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a>admin</a></li>
                                    <li class="breadcrumb-item"><a>Sub Category List</a></li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="col">
                                    @isset($_GET['step'])
                                        @if (decrypt($_GET['step']) >= 5)
                                        @else
                                            <a class="btn btn-info"
                                                href="{{ route('addCategory', ['id' => $_GET['id'], 'step' => $_GET['step']]) }}"><i
                                                    data-feather="plus"></i>Add
                                                Sub Category</a>
                                            <a class="btn btn-info"
                                                href="{{ route('changeOrder', ['mainId' => $_GET['id'], 'step' => $_GET['step']]) }}"><i
                                                    data-feather="battery-charging"></i>Change Order</a>
                                        @endif
                                    @endisset

                                </div>
                                @if ($message = Session::get('success'))
                                    <div class="alert alert-success alert-dismissible fade show  mt-3" role="alert">
                                        <strong>{{ $message }}</strong>
                                        <button type="button" class="btn-close" data-bs-dismiss="alert"
                                            aria-label="Close"></button>
                                    </div>
                                @endif
                                <div class="table-responsive mt-2">
                                    <table class="table m-0">
                                        <thead>
                                            <tr>
                                                <th>Id</th>
                                                <th>Category Name</th>
                                                <th>Order Id</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody id="sortable">
                                            @if(count($category))
                                                @forelse($category as $cat)
                                                    <tr data-id="{{ $cat->id }}" class="row1">
                                                        <td>{{ $cat->id }}</td>
                                                        <td>{{ $cat->category_name }}</td>
                                                        <td>{{ $cat->order_id }}</td>
                                                        <td>
                                                            @isset($_GET['step'])
                                                                @if (decrypt($_GET['step']) >= 4)
                                                                @else
                                                                    <a class="btn btn-sm btn-info "
                                                                        href="{{ route('subCategory', ['id' => encrypt($cat->id), 'step' => encrypt(decrypt($_GET['step']) + 1)]) }}">View</a>
                                                                @endif
                                                            @endisset
                                                            <a class="btn btn-sm btn-info"
                                                                href="{{ route('editCategory', ['mainId' => $_GET['id'], 'id' => encrypt($cat->id), 'step' => $_GET['step']]) }}">Edit</a>

                                                        </td>
                                                    </tr>
                                                @endforeach
                                            @else
                                                <tr><td align="center" colspan="4" class="fw-bold">Sub Category data not available.</td> </tr>
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endsection
            @section('js')
                <script nonce="{{ $cspNonce }}" s>
                    $(document).on("click", ".category", function() {
                        window.history.go(-1);
                    });
                </script>
                {{-- <script nonce="{{ $cspNonce }}">
                    $("#sortable").sortable({
                        items: "tr",
                        cursor: 'move',
                        opacity: 0.6,
                        update: function() {
                            sendOrderToServer();
                        }
                    });

                    function sendOrderToServer() {
                        var order = [];
                        $('.row1').each(function(index, element) {
                            order.push({
                                id: $(this).attr('data-id'),
                                position: index + 1
                            });
                        });
                        console.log(order);
                        $.ajax({
                            type: "POST",
                            dataType: "json",
                            url: "{{ route('changeOrder') }}",
                            data: {
                                order: order,
                                _token: "{{ csrf_token() }}",
                            },
                            success: function(response) {
                                console.log(response);
                                if (response == "done") {
                                    window.location.reload();
                              }
                            }
                        });
                    }
                </script> --}}
            @endsection