@extends('layouts.app')

@section('content')
    <div id="page-container" class="fade page-sidebar-fixed page-header-fixed page-with-wide-sidebar">
        <!-- begin #header -->
        @include('partials.header')
        <!-- end #header -->

        <!-- begin #sidebar -->
        @include('partials.sidebar')
        <!-- end #sidebar -->

        <!-- begin #content -->
        <div id="content" class="content">
            <!-- begin breadcrumb -->
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
                <li class="breadcrumb-item"><a href="javascript:;">Page Options</a></li>
                <li class="breadcrumb-item active">TV Channel Category</li>
            </ol>
            <!-- end breadcrumb -->

            <!-- begin page-header -->
            <h1 class="page-header">TV Channel Categories</h1>
            <!-- end page-header -->

            <!-- Alert container for notifications -->
            <div id="alert-container" class="mb-3"></div>

            <!-- begin panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <a href="{{ route('categories.create') }}" class="btn btn-sm btn-custom">
                            <i class="fa fa-plus"></i> Add TV Channel Categories
                        </a>
                    </div>
                </div>
                <div class="panel-body">
                    <table id="data-table-default" class="table table-striped table-bordered table-td-valign-middle">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Code</th>
                                <th>Category</th>
                                <th>Channels Count</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($categories as $category)
                                <tr>
                                    <td>{{ $category->id }}</td>
                                    <td>
                                        <span class="badge badge-info">{{ $category->code }}</span>
                                    </td>
                                    <td>{{ $category->category }}</td>
                                    <td>
                                        @if ($category->channels_count > 0)
                                            <span class="badge badge-success">
                                                <i class="fa fa-tv"></i> {{ $category->channels_count }}
                                            </span>
                                        @else
                                            <span class="badge badge-secondary">
                                                <i class="fa fa-minus"></i> 0
                                            </span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <a href="{{ route('categories.edit', $category->id) }}"
                                                class="btn btn-sm btn-custom" title="Edit">
                                                <i class="fa fa-edit"></i>
                                            </a>
                                            @if ($category->channels_count > 0)
                                                <button class="btn btn-sm btn-warning"
                                                    title="Cannot delete - has {{ $category->channels_count }} channel(s)"
                                                    onclick="showConstraintError('{{ addslashes($category->category) }}', {{ $category->channels_count }})"
                                                    disabled>
                                                    <i class="fa fa-lock"></i>
                                                </button>
                                            @else
                                                <button class="btn btn-sm btn-custom" title="Delete"
                                                    onclick="confirmDelete({{ $category->id }}, '{{ addslashes($category->category) }}')">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            @endif
                                        </div>

                                        <!-- Hidden delete form -->
                                        <form id="delete-form-{{ $category->id }}"
                                            action="{{ route('categories.destroy', $category->id) }}" method="POST"
                                            style="display: none;">
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- end panel -->
        </div>
        <!-- end #content -->

        <!-- begin scroll to top btn -->
        <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade" data-click="scroll-top">
            <i class="fa fa-angle-up"></i>
        </a>
        <!-- end scroll to top btn -->
    </div>

    <script>
        // Global variable for DataTable instance
        let categoryDataTable = null;

        /**
         * Show notification using Bootstrap alerts
         */
        function showNotification(message, type = 'success', duration = 5000) {
            const alertContainer = document.getElementById('alert-container');
            if (!alertContainer) {
                console.warn('Alert container not found');
                return;
            }

            const alertId = 'alert-' + Date.now();

            const alertHtml = `
                <div class="alert alert-${type} alert-dismissible fade show" id="${alertId}" role="alert">
                    <strong>${type === 'success' ? 'Success!' : type === 'danger' ? 'Error!' : 'Info!'}</strong> ${message}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            `;

            alertContainer.insertAdjacentHTML('beforeend', alertHtml);

            // Auto-dismiss after duration
            if (duration > 0) {
                setTimeout(() => {
                    const alertElement = document.getElementById(alertId);
                    if (alertElement) {
                        alertElement.classList.remove('show');
                        setTimeout(() => alertElement.remove(), 150);
                    }
                }, duration);
            }
        }

        /**
         * Show constraint error message when trying to delete category with channels
         */
        function showConstraintError(categoryName, channelCount) {
            const message = `Cannot delete "${categoryName}" because it has ${channelCount} channel(s) assigned to it. ` +
                'Please delete or reassign these channels first.';
            showNotification(message, 'warning', 8000);
        }

        /**
         * Simple delete confirmation for categories with no channels
         */
        function confirmDelete(categoryId, categoryName) {
            const confirmed = confirm(
                `Are you sure you want to delete the category "${categoryName}"?\n\n` +
                'This action cannot be undone.'
            );

            if (confirmed) {
                const deleteForm = document.getElementById('delete-form-' + categoryId);
                if (deleteForm) {
                    deleteForm.submit();
                } else {
                    showNotification('Delete form not found. Please refresh and try again.', 'danger');
                }
            }
        }

        /**
         * Initialize page functionality
         */
        document.addEventListener('DOMContentLoaded', function() {

            // Handle Laravel session flash messages
            @if (session('success'))
                showNotification('{{ session('success') }}', 'success');
            @endif

            @if (session('error'))
                showNotification('{{ session('error') }}', 'danger');
            @endif

            @if ($errors->any())
                showNotification('{{ $errors->first() }}', 'danger');
            @endif
        });

        // Handle page visibility changes and cleanup
        document.addEventListener('visibilitychange', function() {
            if (document.visibilityState === 'visible' && categoryDataTable) {
                try {
                    categoryDataTable.draw();
                } catch (error) {
                    console.warn('DataTable refresh error:', error);
                }
            }
        });

        // Cleanup on page unload
        window.addEventListener('beforeunload', function() {
            if (categoryDataTable) {
                try {
                    categoryDataTable.destroy();
                    categoryDataTable = null;
                } catch (error) {
                    console.warn('DataTable cleanup error:', error);
                }
            }
        });
    </script>

    <style>
        /* Visual styling for constraint indicators */
        .btn-warning {
            border-color: #ffc107;
            background-color: #ffc107;
            color: #212529;
        }

        .btn-warning:hover {
            background-color: #e0a800;
            border-color: #d39e00;
        }

        .btn-warning:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        /* Responsive improvements */
        @media (max-width: 768px) {
            .btn-group .btn {
                padding: 0.25rem 0.5rem;
                font-size: 0.875rem;
            }
        }
    </style>
@endsection