@extends('admin.layouts.app')
@section('container', 'dashboard-container-xl')
@section('section', d_trans('Businesses'))
@section('title', d_trans('Business Categories'))
@section('header_title', d_trans(':business_name Categories', ['business_name' => $business->trans->name]))
@section('back', route('admin.businesses.index'))
@section('business_view', true)
@section('content')
    @include('admin.businesses.includes.tabs')
    @if ($business->category)
        <button class="btn btn-outline-primary btn-md mb-4" data-bs-toggle="modal" data-bs-target="#addModal"><i
                class="fa fa-plus me-2"></i>{{ d_trans('Add Category') }}</button>
    @else
        <div class="note note-warning mb-4"><i
                class="bi bi-info-circle me-2"></i>{{ d_trans('Main category is required to add more categories') }}</div>
    @endif
    <div class="card">
        <div class="card-header border-bottom">
            <form action="{{ url()->current() }}" method="GET">
                <div class="row g-3">
                    <div class="col-12 col-lg-10">
                        <input type="text" name="search" class="form-control" placeholder="{{ d_trans('Search...') }}"
                            value="{{ request('search') }}">
                    </div>
                    <div class="col">
                        <button class="btn btn-primary w-100"><i class="fa fa-search"></i></button>
                    </div>
                    <div class="col">
                        <a href="{{ url()->current() }}" class="btn btn-soft w-100">{{ d_trans('Reset') }}</a>
                    </div>
                </div>
            </form>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table no-outer-border">
                    <thead>
                        <th>{{ d_trans('Category') }}</th>
                        <th class="text-center">{{ d_trans('Sub Categories') }}</th>
                        <th></th>
                    </thead>
                    <tbody>
                        @forelse ($tableCategories as $tableCategory)
                            <tr>
                                <td><i class="bi bi-tag-fill me-2"></i>{{ $tableCategory['subCategory']['name'] }}
                                </td>
                                <td class="text-center w-50">
                                    <div class="row g-2 justify-content-center">
                                        @foreach ($tableCategory['subSubCategories'] as $subSubCategory)
                                            <div class="col-auto">
                                                <span class="badge bg-secondary">
                                                    <i class="bi bi-tag-fill me-2"></i>{{ $subSubCategory }}
                                                </span>
                                            </div>
                                        @endforeach
                                    </div>
                                </td>
                                <td class="text-end">
                                    <div class="dropdown">
                                        <button class="dropdown-btn" type="button" id="dropdownMenuButton"
                                            data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="fa fa-ellipsis-v"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
                                            <li>
                                                <form
                                                    action="{{ route('admin.businesses.categories.delete', [$business->id, $tableCategory['subCategory']['id']]) }}"
                                                    method="POST">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button class="action-confirm dropdown-item text-danger"><i
                                                            class="far fa-trash-alt"></i>{{ d_trans('Delete') }}</button>
                                                </form>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            @include('admin.partials.empty-table', ['colspan' => 3])
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {{ $subCategories->links() }}
    <div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="false">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content p-4">
                <div class="modal-header border-0 p-0 mb-4">
                    <h1 class="modal-title fs-5" id="addModalLabel">{{ d_trans('Add New Category') }}</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-0">
                    <form action="{{ route('admin.businesses.categories.store', $business->id) }}" method="POST">
                        @csrf
                        <div class="row g-4">
                            <div id="category" class="col-12">
                                <select class="selectpicker selectpicker-md" name="category" data-size="5"
                                    data-live-search="true" title="{{ d_trans('Select Category') }}" required>
                                    @foreach ($modalSubCategories as $modalSubCategory)
                                        <option value="{{ $modalSubCategory->slug }}">{{ $modalSubCategory->trans->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div id="subCategory" class="col-12 d-none">
                                <select class="selectpicker selectpicker-md" name="sub_categories[]" data-size="5"
                                    data-live-search="true" title="{{ d_trans('Select Sub Categories') }}" multiple
                                    required>
                                </select>
                            </div>
                            <div class="col-12">
                                <button class="btn btn-primary btn-md w-100">{{ d_trans('Add') }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @push('styles_libs')
        <link rel="stylesheet" href="{{ asset('vendor/libs/bootstrap/select/bootstrap-select.min.css') }}">
    @endpush
    @push('scripts_libs')
        <script src="{{ asset('vendor/libs/bootstrap/select/bootstrap-select.min.js') }}"></script>
    @endpush
    @push('scripts')
        <script>
            "use strict";

            let categorySelect = $('#category select'),
                subCategory = $('#subCategory'),
                subCategorySelect = $('#subCategory select');

            categorySelect.on('change', function() {
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: "{{ route('admin.businesses.categories.load.sub-categories', $business->id) }}",
                    method: 'POST',
                    data: {
                        category: $(this).val(),
                    },
                    success: function(response) {
                        if (!$.isEmptyObject(response.error)) {
                            toastr.error(response.error);
                        } else {
                            subCategorySelect.selectpicker('destroy');
                            subCategorySelect.empty();
                            response.forEach(function(data) {
                                subCategorySelect.append(
                                    `<option value="${data.slug}">${data.name}</option>`
                                );
                            });
                            subCategorySelect.prop('disabled', false);
                            subCategorySelect.selectpicker();
                            subCategorySelect.addClass('selectpicker');
                            subCategory.removeClass('d-none');
                        }
                    },
                    error: function(request, status, error) {
                        toastr.error(error);
                    }
                });
            })
        </script>
    @endpush
@endsection