@extends('admin.layouts.master')

@section('content')
<style>
    * {
        box-sizing: border-box;
    }

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .page-container {
        padding: 40px 30px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
    }

    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 40px;
        gap: 20px;
        flex-wrap: wrap;
    }

    .page-title-section {
        flex: 1;
        min-width: 200px;
    }

    .page-header h2 {
        font-size: 36px;
        color: white;
        font-weight: 700;
        margin: 0;
        letter-spacing: -0.5px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .header-buttons {
        display: flex;
        gap: 12px;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .btn-primary {
        background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
        color: #667eea;
        padding: 12px 24px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-size: 14px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    }

    .btn-primary:active {
        transform: translateY(-1px);
    }

    .card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    .table-responsive {
        overflow-x: auto;
    }

    .table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 0;
    }

    .table thead {
        background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
        border-bottom: 3px solid #667eea;
    }

    .table thead th {
        color: white;
        padding: 16px 15px;
        text-align: left;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.8px;
    }

    .table tbody tr {
        border-bottom: 1px solid #e2e8f0;
        transition: all 0.3s;
    }

    .table tbody tr:hover {
        background: #f7fafc;
        box-shadow: inset 0 0 10px rgba(102, 126, 234, 0.05);
    }

    .table tbody tr.ui-sortable-helper {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
        color: white;
    }

    .table tbody tr.ui-sortable-helper td {
        color: white;
    }

    .table td {
        padding: 14px 15px;
        color: #2d3748;
        vertical-align: middle;
    }

    .drag-icon {
        cursor: grab;
        color: #cbd5e0;
        font-weight: bold;
        user-select: none;
        padding: 0 8px;
        display: inline-block;
        font-size: 18px;
        transition: all 0.2s;
    }

    .drag-icon:hover {
        color: #667eea;
        transform: scale(1.2);
    }

    .drag-icon:active {
        cursor: grabbing;
        color: #764ba2;
    }

    .badge {
        display: inline-block;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .badge-active {
        background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
        color: #155724;
    }

    .badge-inactive {
        background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
        color: #721c24;
    }

    .btn-toggle {
        padding: 8px 16px;
        border: 2px solid #e2e8f0;
        background: white;
        color: #2d3748;
        border-radius: 6px;
        cursor: pointer;
        font-size: 12px;
        font-weight: 600;
        transition: all 0.3s;
        min-width: 70px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .btn-toggle.active {
        background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
        color: #155724;
        border-color: #28a745;
    }

    .btn-toggle.inactive {
        background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
        color: #721c24;
        border-color: #dc3545;
    }

    .btn-toggle:hover {
        border-color: #667eea;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
    }

    .settings-box {
        background: #f7fafc;
        padding: 12px;
        border-radius: 6px;
        border-left: 4px solid #667eea;
        font-size: 12px;
        line-height: 1.6;
        color: #2d3748;
        box-shadow: inset 0 0 10px rgba(102, 126, 234, 0.05);
    }

    .settings-item {
        margin-bottom: 6px;
    }

    .settings-label {
        color: #667eea;
        font-weight: 700;
    }

    .settings-box img {
        max-width: 100px;
        max-height: 60px;
        margin-top: 8px;
        border-radius: 4px;
        border: 1px solid #e2e8f0;
    }

    .date-text {
        color: #718096;
        font-size: 12px;
        text-align: center;
        font-weight: 500;
    }

    .btn-action {
        padding: 8px 12px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 12px;
        font-weight: 600;
        transition: all 0.3s;
        margin-right: 6px;
        text-decoration: none;
        display: inline-block;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .btn-edit {
        background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
        color: white;
    }

    .btn-edit:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
    }

    .btn-delete {
        background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        color: white;
    }

    .btn-delete:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
    }

    .empty-message {
        text-align: center;
        padding: 80px 20px;
        color: #a0aec0;
        font-size: 16px;
        font-weight: 500;
    }

    .pagination {
        margin-top: 25px;
        text-align: center;
        padding: 20px;
    }

    .type-badge {
        background: linear-gradient(135deg, #e8f4f8 0%, #d0e8f2 100%);
        color: #2c5282;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        box-shadow: 0 2px 8px rgba(44, 82, 130, 0.1);
    }

    @media (max-width: 768px) {
        .page-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .page-header h2 {
            font-size: 28px;
        }

        .header-buttons {
            justify-content: flex-start;
            width: 100%;
        }

        .table {
            font-size: 12px;
        }

        .table td, .table th {
            padding: 10px 8px;
        }

        .btn-action {
            padding: 6px 10px;
            font-size: 11px;
        }
    }
</style>

<div class="page-container">
    <div class="page-header">
        <div class="page-title-section">
            <h2>📊 {{ trans('Widget List') }}</h2>
        </div>
        <div class="header-buttons">
            <a href="{{ route('View.widgets') }}" class="btn-primary">
                <span>👁️</span> {{ trans('View Widgets') }}
            </a>
            <a href="{{ route('widgets.create') }}" class="btn-primary">
                <span>➕</span> {{ trans('Create New Widget') }}
            </a>
        </div>
    </div>

    <div class="card">
        <div class="table-responsive">
            <table class="table" id="widgetTable">
                <thead>
                    <tr>
                        <th style="width: 40px;">⋮⋮</th>
                        <th>{{ trans('Title') }}</th>
                        <th>{{ trans('Type') }}</th>
                        <th>{{ trans('Settings') }}</th>
                        <th>{{ trans('Status') }}</th>
                        <th>{{ trans('News Details') }}</th>
                        <th>{{ trans('Show From') }}</th>
                        <th>{{ trans('Show Till') }}</th>
                        <th>{{ trans('Actions') }}</th>
                    </tr>
                </thead>
                <tbody id="sortable">
                    @forelse ($widgets as $widget)
                        <tr data-id="{{ $widget->id }}" class="sortable-row">
                            <td style="text-align: center; cursor: grab;">
                                <span class="drag-icon">⋮⋮</span>
                            </td>
                            <td><strong>{{ $widget->title }}</strong></td>
                            <td>
                                <span class="type-badge">
                                    {{ $widget->type ? __(strtoupper(str_replace('_', ' ', $widget->type))) : trans('N/A') }}
                                </span>
                            </td>
                            <td>
                                <div class="settings-box">
                                    @if (is_array($widget->settings))
                                        @foreach ($widget->settings as $key => $value)
                                            @if (!empty($value))
                                                <div class="settings-item">
                                                    @if (is_array($value))
                                                        <span class="settings-label">{{ $key }}:</span> {{ json_encode($value) }}
                                                    @elseif ($key == 'banner_image')
                                                        <span class="settings-label">{{ $key }}:</span><br>
                                                        <img src="{{ asset($value) }}" alt="Banner">
                                                    @elseif ($key == 'category_id' || $key == 'tag_id')
                                                        {{ widget_type_settings($key, $value) }}
                                                    @else
                                                        <span class="settings-label">{{ $key }}:</span> {{ $value }}
                                                    @endif
                                                </div>
                                            @endif
                                        @endforeach
                                    @else
                                        {{ $widget->settings }}
                                    @endif
                                </div>
                            </td>
                            <td>
                                <span class="badge {{ $widget->is_active ? 'badge-active' : 'badge-inactive' }}">
                                    {{ $widget->is_active ? trans('Active') : trans('Inactive') }}
                                </span>
                            </td>
                            <td>
                                <button class="btn-toggle toggle-news-status {{ $widget->show_news_details ? 'active' : 'inactive' }}"
                                    data-id="{{ $widget->id }}">
                                    {{ $widget->show_news_details ? trans('Yes') : trans('No') }}
                                </button>
                            </td>
                            <td class="date-text">
                                {{ $widget->show_from ? $widget->show_from->format('Y-m-d H:i') : trans('N/A') }}
                            </td>
                            <td class="date-text">
                                {{ $widget->show_till ? $widget->show_till->format('Y-m-d H:i') : trans('N/A') }}
                            </td>
                            <td>
                                <a href="{{ route('widgets.edit', $widget->id) }}" class="btn-action btn-edit">{{ trans('Edit') }}</a>
                                <form action="{{ route('widgets.destroy', $widget->id) }}" method="POST" style="display: inline;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn-action btn-delete" onclick="return confirm('{{ trans('Are you sure?') }}')">{{ trans('Delete') }}</button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="empty-message">
                                {{ trans('No widgets found.') }}
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($widgets->hasPages())
            <div class="pagination">
                {{ $widgets->links() }}
            </div>
        @endif
    </div>
</div>

@endsection

@section('js')
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
    // Initialize Sortable
    $("#sortable").sortable({
        items: "tr.sortable-row",
        handle: ".drag-icon",
        cursor: "grab",
        axis: "y",
        placeholder: "sortable-placeholder",
        opacity: 0.9,
        revert: 150,
        start: function(e, ui) {
            ui.helper.css('background', 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)');
            ui.helper.css('color', 'white');
        },
        update: function(e, ui) {
            let order = [];
            $('#sortable tr.sortable-row').each(function() {
                order.push($(this).data('id'));
            });

            $.ajax({
                url: "{{ route('widgets.sort') }}",
                method: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    order: order
                },
                success: function(response) {
                    Toastify({
                        text: response.success || 'Widget order updated!',
                        duration: 3000,
                        gravity: "top",
                        position: "right",
                        style: {
                            background: "linear-gradient(135deg, #28a745 0%, #20c997 100%)",
                            color: "white"
                        }
                    }).showToast();
                },
                error: function() {
                    Toastify({
                        text: 'Error updating order!',
                        duration: 3000,
                        gravity: "top",
                        position: "right",
                        style: {
                            background: "linear-gradient(135deg, #dc3545 0%, #c82333 100%)",
                            color: "white"
                        }
                    }).showToast();
                }
            });
        }
    });

    // Toggle News Details Status
    $(document).on('click', '.toggle-news-status', function() {
        let btn = $(this);
        let widgetId = btn.data('id');

        $.ajax({
            url: "/widgets/show-news-details/" + widgetId,
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {
                if (response.success) {
                    btn.toggleClass('active inactive');
                    btn.text(response.label);
                }
            }
        });
    });
});
</script>
@endsection