@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'Taxonomies')

@push('styles')
    <!-- Load DataTables CSS -->
    <link href="{{ asset('backend/assets/css/jquery.dataTables.min.css') }}" rel="stylesheet">
    <link href="https://cdn.datatables.net/2.3.2/css/dataTables.tailwindcss.css" rel="stylesheet">
    <style>
        .color-box {
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 3px;
            border: 1px solid #ddd;
        }
    </style>
@endpush

@section('content')

    <div class="card">

        <div class="filter-area flex gap-3 flex-wrap mb-3 justify-between">
            <h2 class="text-nowrap">All Taxonomies</h2>
            <div class="flex gap-3 flex-wrap mb-3">
                <div>
                    <select class="form-select" id="taxonomy-type-filter">
                        <option value="">All Taxonomy Types</option>
                        @foreach ($taxonomyTypes as $type)
                            <option value="{{ $type }}">{{ ucfirst($type) }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <select class="form-select" id="language-filter">
                        <option value="">All Languages</option>
                        @foreach ($languages as $language)
                            <option value="{{ $language->code }}">{{ $language->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <select class="form-select" id="model-type-filter">
                        <option value="">All Model Types</option>
                        @foreach ($taxonomableTypes as $label => $type)
                            <option value="{{ $type }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <button class="btn btn-secondary" id="reset-filters">Reset Filters</button>
                </div>
                <div>
                    <a href="{{ route('admin.taxonomy.create') }}" class="btn btn-primary">
                        <i class="fas fa-plus"></i> Add New Taxonomy
                    </a>
                </div>
            </div>
        </div>

        <div class="overflow-x-auto">
            <div class="inline-block min-w-full align-middle">
                <div class="overflow-hidden">
                    <table class="min-w-full" id="taxonomy-table">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Type</th>
                                <th>Model Type</th>
                                <th>Language</th>
                                <th>Color</th>
                                <th>Items</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    {{-- <div class="modal fade" id="deleteModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirm Delete</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete this taxonomy? This action cannot be undone.</p>
                </div>
                <div class="modal-footer">````````````````````
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirm-delete">Delete</button>
                </div>
            </div>
        </div>
    </div> --}}
@endsection

@push('scripts')
    <!-- Load jQuery -->
    <script src="{{ asset('backend/assets/js/jquery-3.7.1.min.js') }}"></script>

    <!-- Load DataTables JS -->
    <script src="{{ asset('backend/assets/js/jquery.dataTables.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            var table = $('#taxonomy-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('admin.taxonomy.index') }}',
                    data: function(d) {
                        d.taxonomy_type = $('#taxonomy-type-filter').val();
                        d.language = $('#language-filter').val();
                        d.taxonomable_type = $('#model-type-filter').val();
                    }
                },
                columns: [{
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'taxonomy_type',
                        name: 'taxonomy_type'
                    },
                    {
                        data: 'model_type',
                        name: 'taxonomable_type'
                    },
                    {
                        data: 'language.name',
                        name: 'language.name'
                    },
                    {
                        data: 'color_display',
                        name: 'color',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'content_count',
                        name: 'content_count',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ],
                order: [
                    [0, 'asc']
                ]
            });

            // Filter functionality
            $('#taxonomy-type-filter, #language-filter, #model-type-filter').change(function() {
                table.draw();
            });

            $('#reset-filters').click(function() {
                $('#taxonomy-type-filter, #language-filter, #model-type-filter').val('');
                table.search('').columns().search('').draw();
                table.draw();
            });

            // Delete functionality
            $(document).on('click', '.delete-btn', function() {

                Swal.fire({
                    title: "Are you sure to delete?",
                    text: "You won't be able to revert this!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Yes, delete it!"
                }).then((result) => {
                    if (result.isConfirmed) {
                        var id = $(this).data('id');
                        $.ajax({
                            url: '{{ url('admin/taxonomy') }}/' + id,
                            type: 'DELETE',
                            data: {
                                _token: '{{ csrf_token() }}'
                            },
                            success: function(response) {
                                if (response.success) {
                                    toastr.success(response.message);
                                } else {
                                    toastr.error(response.message);
                                }
                                table.draw();
                            },
                            error: function() {
                                toastr.error("Server error.");
                            }
                        });
                    }
                });
            });
        });
    </script>
@endpush