@extends('administrator.layout.master')
@push('plugin-styles')
    @foreach (config('assets.datatable.css') as $datatable)
        <link href="{{ asset($datatable) }}" rel="stylesheet" />
    @endforeach
@endpush

@section('breadcrumb')
    @php
        $breadcrumbItems = [
            ['label' => 'Product'],
            ['label' => 'Product Addons'],
            ['label' => 'Product Addons List', 'active' => true],
        ];
    @endphp
    <x-admin-breadcrumb :items="$breadcrumbItems" />
@endsection

@php
    use App\Enums\AddonType;
@endphp

@section("content")
    @if (auth()->guard('admins')->user()->can('manager product'))
        <div class="card card-primary card-outline">
            <div class="card-header d-flex justify-content-end gap-2">
                @include('administrator.pages.block.addon.btn')
            </div>
            <div class="card-body p-0">
                <x-datatable id="addonTable" ajax="{{ route('addon.datatable') }}" :columns="[
                    ['key' => 'details_control', 'label' => '', 'orderable' => false, 'searchable' => false, 'className' => 'details-control text-center cursor-pointer'],
                    ['key' => 'name', 'label' => 'Group'],
                    ['key' => 'slug', 'label' => 'Slug'],
                    ['key' => 'is_active', 'label' => 'Status'],
                    ['key' => 'action', 'label' => 'Action', 'searchable' => false],
                ]" />
            </div>
        </div>
    @else
        <div class="alert alert-danger alert-dismissible">
            <h5 class="mb-0"><i class="icon fas fa-ban"></i> Access Denied - You are not assigned to any Product management
                department</h5>
        </div>
    @endif
@endsection

@push('plugin-scripts')
    @foreach (config('assets.datatable.js') as $datatable)
        <script src="{{ asset($datatable) }}"></script>
    @endforeach
@endpush

@push('custom-styles')
    <style>
        td.details-control {
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
        }
    </style>
@endpush

@push('custom-scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var tableId = '#addonTable';

            $('#addonTable').on('draw.dt', function () {
                setTimeout(function () {
                    if (typeof lucide !== 'undefined') {
                        lucide.createIcons();
                    }
                }, 100);
            });

            $(tableId + ' tbody').on('click', 'td.details-control', function () {
                var tr = $(this).closest('tr');
                var table = $(tableId).DataTable();
                var row = table.row(tr);
                var cell = $(this);

                if (row.child.isShown()) {
                    row.child.hide();
                    tr.removeClass('shown');
                    cell.html('<i data-lucide="plus-circle" class="cursor-pointer text-success mx-auto" style="width:15px; height:15px"></i>');
                } else {
                    if (row.data().children && row.data().children.length > 0) {
                        row.child(format(row.data())).show();
                        tr.addClass('shown');
                        cell.html('<i data-lucide="minus-circle" class="cursor-pointer text-danger mx-auto" style="width:15px; height:15px"></i>');

                        if (typeof lucide !== 'undefined') {
                            lucide.createIcons();
                        }
                    }
                }

                if (typeof lucide !== 'undefined') {
                    lucide.createIcons();
                }
            });

            function format(d) {
                return d.children_html;
            }
        });
    </script>
@endpush