@extends('layouts.app', ['title' => __('Sub Sub categories')])
@section('admin_title')
    {{ __('Sub Sub categories') }}
@endsection
@section('content')

@include('category.owner.partials.modals')

{{-- Bootstrap & DataTables CSS --}}
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">

<div class="header bg-gradient-primary pb-8 pt-5 pt-md-5"></div>

<div class="container-fluid mt--7">
    <div class="row">
        <div class="col">
            <div class="card shadow">

                {{-- Top buttons --}}
                <div class="card-header border-0">
                    <div class="row align-items-center">
                        <div class="col-6">
                            <h3 class="mb-0">{{ __('Sub Sub Category List') }}</h3>
                        </div>
                        <div class="col-6 text-right">
                            <a href="javascript:void(0)" data-toggle="modal" data-target="#modal-items-subcategory1"
                               class="btn btn-sm btn-primary">{{ __('Add new Sub Sub category') }}</a>

                            <button class="btn btn-sm btn-warning ml-1" id="top-edit-btn">{{ __('Edit Selected') }}</button>
                            <button class="btn btn-sm btn-danger ml-1" id="top-delete-btn">{{ __('Delete Selected') }}</button>
                        </div>
                    </div>
                </div>

                {{-- Flash messages --}}
                <div class="col-12">
                    @include('partials.flash')
                </div>

                {{-- Table --}}
                <div class="table-responsive">
                    <table class="table align-items-center table-flush">
                        <thead class="thead-light">
                            <tr>
                                <th scope="col"><input type="checkbox" id="check-all"></th>
                                <th scope="col">{{ __('Category name') }}</th>
                                <th scope="col">{{ __('Sub Category name') }}</th>
                                <th scope="col">{{ __('Sub Sub Category name') }}</th>
                                <th scope="col">{{ __('Status') }}</th>

                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($subcategories as $category)
                                <tr>
                                    <td>
                                        <input type="checkbox" class="row-check" value="{{ $category->id }}"
                                               data-name="{{ $category->name }}"
                                               data-category_id="{{ $category->subcategories?->category_id }}"
                                               data-subcategory_id="{{ $category->subcategories?->id }}">
                                            </td>
                                            <td>{{ $category->subcategories?->categories?->name ?? '-' }}</td>
                                            <td>{{ $category->subcategories?->name ?? '-' }}</td>
                                    <td>{{ $category->name }}</td>
                                     <td>
                                    @if ($category->active)
                                        <span class="badge badge-success">Active</span>
                                    @else
                                        <span class="badge badge-secondary">Inactive</span>
                                    @endif
                                    <a href="{{ route('subsubcategories.toggleStatus', $category->id) }}"
                                       class="btn btn-sm btn-warning ml-2">
                                       {{ $category->active ? 'Deactivate' : 'Activate' }}
                                    </a>
                                </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="card-footer py-4">
                    <nav class="d-flex justify-content-end" aria-label="..."></nav>
                </div>
            </div>
        </div>
    </div>

    @include('layouts.footers.auth')
</div>

{{-- Hidden form for deletion --}}
<form id="delete-subcategory-form" method="POST" style="display: none;">
    @csrf
</form>
@endsection

@section('js')
{{-- jQuery, Bootstrap JS, DataTables --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>

<script>
$(document).ready(function() {

    // Initialize DataTable
    $('.table').DataTable({
        "columnDefs": [{ "orderable": false, "targets": 0 }] // Disable ordering on checkbox column
    });

    // Select/Deselect all
    $('#check-all').on('click', function() {
        $('.row-check').prop('checked', this.checked);
    });

    // EDIT button
    $('#top-edit-btn').on('click', function() {
        let selected = $('.row-check:checked');

        if(selected.length == 0){
            alert('Please select a sub subcategory to edit.');
            return;
        }
        if(selected.length > 1){
            alert('Please select only one sub subcategory at a time.');
            return;
        }

        let checkbox = selected.first();
        let id = checkbox.val();
        let name = checkbox.data('name');
        let category_id = checkbox.data('category_id');
        let subcategory_id = checkbox.data('subcategory_id');

        // Fill modal
        $('#edit_subsubcategory_name').val(name);
        $('#edit_subsubcategory_category').val(category_id);

        // Load subcategories dynamically
        loadSubcategories(category_id, subcategory_id);

        // Set form action
        let route = "{{ route('owner.subsubcategory.update', ':id') }}".replace(':id', id);
        $('#form-edit-subsubcategory').attr('action', route);

        // Open modal
        $('#modal-edit-subsubcategory').modal('show');
    });

    // DELETE button
    $('#top-delete-btn').on('click', function() {
        let selected = $('.row-check:checked');

        if(selected.length == 0){
            alert('Please select a sub subcategory to delete.');
            return;
        }
        if(selected.length > 1){
            alert('Please select only one sub subcategory at a time.');
            return;
        }

        let id = selected.val();
        Swal.fire({
            title: '{{ __("Are you sure?") }}',
            text: '{{ __("This will delete the sub subcategory and all related data. This action is irreversible.") }}',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: '{{ __("Yes, delete it!") }}',
            cancelButtonText: '{{ __("Cancel") }}',
            reverseButtons: true
        }).then((result) => {
            if(result.isConfirmed){
                let form = $('#delete-subcategory-form');
                let route = "{{ route('owner.subsubcategory.remove', ':id') }}".replace(':id', id);
                form.attr('action', route);
                form.submit();
            }
        });
    });

    // When category changes in modal, load subcategories dynamically
    $('#edit_subsubcategory_category').change(function() {
        let category_id = $(this).val();
        loadSubcategories(category_id, null);
    });

    function loadSubcategories(category_id, selected_id = null) {
        if(!category_id){
            $('#edit_subsubcategory_subcategory').html('<option value="">Select Subcategory</option>');
            return;
        }

        $.ajax({
            url: "{{ route('owner.subcategory.byCategory') }}",
            type: "GET",
            data: { category_id: category_id },
            success: function(data) {
                let options = '<option value="">Select Subcategory</option>';
                $.each(data, function(key, subcat){
                    options += `<option value="${subcat.id}" ${subcat.id == selected_id ? 'selected' : ''}>${subcat.name}</option>`;
                });
                $('#edit_subsubcategory_subcategory').html(options);
            }
        });
    }

});
</script>
@endsection