@extends('layouts.app', ['title' => __('Sub categories')])
@section('admin_title')
    {{ __('Sub categories') }}
@endsection
@section('content')
@include('category.owner.partials.modals')
<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">

                {{-- Header with Add, Edit, Delete buttons --}}
                <div class="card-header border-0">
                    <div class="row align-items-center">
                        <div class="col-6">
                            <h3 class="mb-0">{{ __('Sub Category List') }}</h3>
                        </div>
                        <div class="col-6 text-right">
                            <a href="javascript:void(0)" data-toggle="modal" data-target="#modal-items-subcategory"
                               class="btn btn-sm btn-primary">{{ __('Add new 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">{{ __('Status') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($subcategories as $category)
                                <tr>
                                    <td><input type="checkbox" class="row-check" value="{{ $category->id }}" data-category_id="{{ $category->category_id }}" data-name="{{ $category->name }}"></td>
                                    <td>{{ isset($category->categories) ? $category->categories->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('subcategories.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>

<form id="delete-subcategory-form" method="POST" style="display: none;">
    @csrf
</form>
@endsection
@section('js')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.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 click
    $('#top-edit-btn').on('click', function() {
        let selected = $('.row-check:checked');

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

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

        // Fill modal
        $('#sub_cat_name').val(name);
        $('#edit_parent_id').val(parent_id);

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

        // Show modal
        $('#modal-edit-subcategory').modal('show');
    });

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

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

        let id = selected.val();
        Swal.fire({
            title: '{{ __("Are you sure?") }}',
            text: '{{ __("This will delete the 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.subcategory.remove', ':id') }}".replace(':id', id);
                form.attr('action', route);
                form.submit();
            }
        });
    });

});
</script>
@endsection