@extends('admin.layout_admin.main')
@section('css')
    <link rel="stylesheet" href="{{ asset('admin-assets/css/custom/listmodule.css') }}">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="{{ asset('admin-assets/css/custom/select2.css') }}">
@endsection

@section('content')

    <div class="container">
        <div class="d-flex justify-content-start align-items-center m-4">
            <div class="fw-bold text-capitalize">
                <a href="{{ route('menu.index') }}">Quản lý menu</a> / <a
                    href="{{ route('menu.show', $menu->id) }}">{{ $menu->name }}</a>
                / <a href="{{ route('admin.menu_items', [$menu->id, $menu_item->id]) }}">{{ $menu_item->title }}</a>
            </div>
        </div>
        <div class="card shadow-sm m-4">
            <div class="card-header">
                @if ($menu_item->children->count() > 0)
                    <div class="table-responsive">
                        <table class="table">
                            <thead class="table-primary">
                                <tr>
                                    <th scope="col">STT</th>
                                    <th scope="col">Tên mục</th>
                                    <th scope="col">Đường dẫn liên kết</th>
                                    @can(['sua-menu', 'xoa-menu'])
                                        <th scope="col">Xử lý</th>
                                    @endcan
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($menu_item->children as $key => $menu_i)
                                    <tr>
                                        <td>{{ $key + 1 }}</td>
                                        <td>{{ $menu_i->title }}
                                        </td>
                                        <td>
                                            {{ $menu_i->url }}
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                @can('sua-menu')
                                                    <a href="{{ route('admin.edit-menu-item-children', [$menu->id, $menu_item->id, $menu_i->id]) }}"
                                                        class="btn btn-outline-primary btn-xs me-2" title="Edit"><i
                                                            class="fas fa-edit" data-bs-toggle="tooltip"
                                                            title="Chỉnh sửa menu"></i></a>
                                                @endcan
                                                @can('xoa-menu')
                                                    <form action="{{ route('admin.menu_item.destroy', $menu_i->id) }}"
                                                        method="POST" class="delete-form">
                                                        @method('DELETE')
                                                        @csrf
                                                        <button type="button" title="Delete"
                                                            class="btn btn-outline-danger btn-xs delete-btn"><i
                                                                class="fas fa-trash" data-bs-toggle="tooltip"
                                                                title="Xóa menu"></i></button>
                                                    </form>
                                                @endcan
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <p class="alert alert-danger">Chưa có menu con nào!</p>
                @endif
            </div>
            <div class="card-body">
                <p>{{ isset($editItem) ? 'Chỉnh sửa mục menu' : 'Thêm mục cho menu' }}</p>
                <form
                    action="{{ isset($editItem) ? route('admin.menu.update-item', $editItem->id) : route('admin.menu.create-item') }}"
                    method="POST">
                    @csrf
                    @if (isset($editItem))
                        @method('PUT')
                    @endif
                    <input type="text" name="menu_id" class="d-none" value="{{ $menu->id }}">
                    <div class="mb-3 col-md-6">
                        <label class="form-label">Thuộc mục <span class="text-danger">*</span></label>
                        <select class="form-control tag-select" id="parent_id" name="parent_id">
                            <option value="">Là mục chính</option>
                            @foreach ($menu->items as $menu_parent)
                                @if ($menu_parent->parent_id == null)
                                    <option value="{{ $menu_parent->id }}"
                                        {{ $menu_parent->id == $menu_item->id ? 'selected' : '' }}>
                                        {{ $menu_parent->title }}</option>
                                @endif
                            @endforeach
                        </select>
                        @error('parent_id')
                            <div class="message-error">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3 col-md-6">
                        <label class="form-label">Liên kết đến module </label>
                        <select class="form-control tag-select2" id="module" name="module">
                            <option value="">Chọn module</option>
                            @foreach ($modules as $module)
                                <option value="{{ $module->id }}" data-title="{{ $module->name }}"
                                    data-url="{{ $module->slug }}">
                                    {{ $module->name }}</option>
                            @endforeach
                        </select>
                        @error('module')
                            <div class="message-error">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3 col-md-6">
                        <label class="form-label">Tên mục <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('title') is-invalid @enderror" id="title"
                            name="title" placeholder="Nhập tên mục"
                            value="{{ isset($editItem) ? $editItem->title : old('title') }}">

                        @error('title')
                            <div class="message-error">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3 col-md-6">
                        <label class="form-label">Đường dẫn liên kết <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('url') is-invalid @enderror" id="url"
                            name="url" placeholder="Nhập đường dẫn"
                            value="{{ isset($editItem) ? $editItem->url : old('url') }}">

                        @error('url')
                            <div class="message-error">{{ $message }}</div>
                        @enderror
                    </div>
                    <button type="submit" class="btn btn-primary">
                        {{ isset($editItem) ? 'Cập nhật' : 'Lưu lại' }}
                    </button>

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


@section('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="{{ asset('admin-assets/js/custom/deleteSweetaler.js') }}"></script>
    <script>
        $(function() {
            $('.tag-select').select2({
                placeholder: "Là mục chính",
                allowClear: true,
            })
            $(".tag-select2").select2({
                placeholder: "Chọn module",
            }).on('change', function() {
                var selected = $(this).find('option:selected');
                var title = selected.data('title');
                var url = selected.data('url');

                if (title) {
                    $('#title').val(title);
                }

                if (url) {
                    $('#url').val(url);
                }
            });
        })
    </script>
@endsection