@extends('admin.layouts.master')

@section('title', isset($widget) ? trans('Edit Widget') : trans('Create Widget'))

@section('content')
<style>
    :root {
        --primary: #3498db;
        --danger: #e74c3c;
        --success: #27ae60;
        --warning: #f39c12;
        --dark: #2c3e50;
        --light: #f8f9fa;
        --border: #e0e0e0;
        --text: #34495e;
    }

    body {
        background: var(--light);
    }

    .form-container {
        padding: 30px 20px;
        max-width: 1400px;
        margin: 0 auto;
    }

    .form-header {
        margin-bottom: 30px;
    }

    .form-header h2 {
        font-size: 28px;
        color: var(--dark);
        font-weight: 600;
        margin: 0;
    }

    .form-wrapper {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        overflow: hidden;
    }

    .form-body {
        padding: 30px;
    }

    .row-form {
        display: grid;
        grid-template-columns: 1fr 350px;
        gap: 30px;
    }

    /* Left Column */
    .form-left {
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    .form-section {
        background: white;
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 20px;
        transition: all 0.3s ease;
    }

    .form-section:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .section-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--dark);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--primary);
    }

    .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 0;
    }

    .form-row.full {
        grid-template-columns: 1fr;
    }

    .form-group {
        margin-bottom: 0;
    }

    .form-group label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: var(--dark);
        margin-bottom: 6px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .form-group label .text-danger {
        color: var(--danger);
        margin-left: 3px;
    }

    .form-control {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 4px;
        font-size: 13px;
        color: var(--text);
        background: white;
        transition: all 0.2s;
    }

    .form-control:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
    }

    textarea.form-control {
        resize: vertical;
        min-height: 80px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .form-control:disabled {
        background: #f5f5f5;
        cursor: not-allowed;
        opacity: 0.7;
    }

    /* Right Column - Sidebar */
    .form-sidebar {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .sidebar-card {
        background: white;
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 20px;
    }

    .sidebar-card-title {
        font-size: 13px;
        font-weight: 600;
        color: var(--dark);
        text-transform: uppercase;
        letter-spacing: 0.3px;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--primary);
    }

    .sidebar-card .form-group {
        margin-bottom: 15px;
    }

    .sidebar-card .form-group:last-child {
        margin-bottom: 0;
    }

    /* Checkboxes */
    .form-check {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        padding: 8px 0;
    }

    .form-check-input {
        width: 18px;
        height: 18px;
        margin-right: 10px;
        cursor: pointer;
        border: 1px solid var(--border);
        border-radius: 3px;
        accent-color: var(--primary);
    }

    .form-check-label {
        font-size: 13px;
        color: var(--text);
        cursor: pointer;
        margin-bottom: 0;
        font-weight: 500;
    }

    /* File Input */
    .file-input-wrapper {
        position: relative;
    }

    .file-input-wrapper input[type="file"] {
        padding: 8px 12px;
    }

    .preview-image {
        margin-top: 10px;
        max-width: 150px;
        border-radius: 4px;
        border: 1px solid var(--border);
        padding: 3px;
    }

    /* Hidden Fields */
    .hidden-section {
        display: none;
    }

    .hidden-section.active {
        display: block;
    }

    /* Buttons */
    .btn {
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .btn-primary {
        background: var(--primary);
        color: white;
        width: 100%;
        justify-content: center;
        margin-top: 20px;
    }

    .btn-primary:hover {
        background: #2980b9;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
    }

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

    .btn-danger {
        background: var(--danger);
        color: white;
        text-decoration: none;
    }

    .btn-danger:hover {
        background: #c0392b;
        text-decoration: none;
    }

    /* Banner Preview */
    .banner-preview {
        margin-top: 15px;
        text-align: center;
    }

    .banner-preview img {
        max-width: 100%;
        height: auto;
        border-radius: 4px;
        border: 1px solid var(--border);
    }

    /* Responsive */
    @media (max-width: 1024px) {
        .row-form {
            grid-template-columns: 1fr;
        }

        .form-row {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 768px) {
        .form-body {
            padding: 20px;
        }

        .form-section {
            padding: 15px;
        }

        .sidebar-card {
            padding: 15px;
        }
    }

    /* Icon Styling */
    .icon {
        width: 16px;
        height: 16px;
    }
</style>

<div class="form-container">
    <div class="form-header">
        <h2>
            {{ isset($widget) ? trans('Edit Widget') : trans('Create Widget') }}
        </h2>
    </div>

    <div class="form-wrapper">
        <form action="{{ isset($widget) ? route('widgets.update', $widget->id) : route('widgets.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            @if (isset($widget))
                @method('PUT')
            @endif

            <div class="form-body">
                <div class="row-form">
                    <!-- Left Column -->
                    <div class="form-left">
                        <!-- Basic Settings -->
                        <div class="form-section">
                            <div class="section-title">{{ trans('Basic Settings') }}</div>
                            <div class="form-row">
                                <div class="form-group">
                                    <label>{{ trans('Widget Title') }} <span class="text-danger">*</span></label>
                                    <input type="text" name="title" class="form-control" required
                                        value="{{ old('title', $widget->title ?? '') }}">
                                </div>

                                <div class="form-group">
                                    <label>{{ trans('Widget Type') }}</label>
                                    <select name="type" id="type" class="form-control">
                                        @foreach ($widgetsFile as $label)
                                            <option value="{{ $label }}"
                                                {{ old('type', $widget->type ?? '') == $label ? 'selected' : '' }}>
                                                {{ $label }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="form-group form-row full">
                                <label>{{ trans('Short Description') }}</label>
                                <textarea name="description" class="form-control" rows="2">{{ old('description', $widget->description ?? '') }}</textarea>
                            </div>
                        </div>

                        <!-- Widget Type Specific Settings -->
                        <div class="form-section hidden-section category_based">
                            <div class="section-title">{{ trans('Category Settings') }}</div>
                            <div class="form-group form-row full">
                                <label>{{ trans('Select Category') }}</label>
                                <select name="settings[category_id]" class="form-control">
                                    <option disabled selected>{{ trans('Select Category') }}</option>
                                    @foreach (categories() as $info)
                                        <option value="{{ $info->id }}"
                                            {{ old('settings.category_id', $widget->settings['category_id'] ?? '') == $info->id ? 'selected' : '' }}>
                                            {{ $info->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="form-section hidden-section tag_based">
                            <div class="section-title">{{ trans('Tag Settings') }}</div>
                            <div class="form-group form-row full">
                                <label>{{ trans('Select Tag') }}</label>
                                <select name="settings[tag_id]" class="form-control">
                                    <option disabled selected>{{ trans('Select Tag') }}</option>
                                    @foreach (tags() as $info)
                                        <option value="{{ $info->id }}"
                                            {{ old('settings.tag_id', $widget->settings['tag_id'] ?? '') == $info->id ? 'selected' : '' }}>
                                            {{ $info->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="form-section hidden-section slider_news_widgets">
                            <div class="section-title">{{ trans('Slider Settings') }}</div>
                            <div class="form-group form-row full">
                                <label>{{ trans('Select Category') }}</label>
                                <select name="settings[category_id]" class="form-control">
                                    <option disabled selected>{{ trans('Select Category') }}</option>
                                    @foreach (categories() as $info)
                                        <option value="{{ $info->id }}"
                                            {{ old('settings.category_id', $widget->settings['category_id'] ?? '') == $info->id ? 'selected' : '' }}>
                                            {{ $info->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="form-section hidden-section news_tab_widgets">
                            <div class="section-title">{{ trans('Tab Settings') }}</div>
                            <div class="form-row">
                                <div class="form-group">
                                    <label>{{ trans('Select Option 1') }}</label>
                                    <select name="settings[option1]" class="form-control">
                                        <option disabled selected>{{ trans('Select Option 1') }}</option>
                                        <option value="latest_news" {{ old('settings.option1', $widget->settings['option1'] ?? '') == 'latest_news' ? 'selected' : '' }}>{{ trans('Latest News') }}</option>
                                        <option value="popular_news" {{ old('settings.option1', $widget->settings['option1'] ?? '') == 'popular_news' ? 'selected' : '' }}>{{ trans('Populer News') }}</option>
                                        @foreach (categories() as $info)
                                            <option value="{{ $info->id }}"
                                                {{ old('settings.option1', $widget->settings['option1'] ?? '') == $info->id ? 'selected' : '' }}>
                                                {{ $info->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>{{ trans('Select Option 2') }}</label>
                                    <select name="settings[option2]" class="form-control">
                                        <option disabled selected>{{ trans('Select Option 2') }}</option>
                                        <option value="latest_news" {{ old('settings.option2', $widget->settings['option2'] ?? '') == 'latest_news' ? 'selected' : '' }}>{{ trans('Latest News') }}</option>
                                        <option value="popular_news" {{ old('settings.option2', $widget->settings['option2'] ?? '') == 'popular_news' ? 'selected' : '' }}>{{ trans('Populer News') }}</option>
                                        @foreach (categories() as $info)
                                            <option value="{{ $info->id }}"
                                                {{ old('settings.option2', $widget->settings['option2'] ?? '') == $info->id ? 'selected' : '' }}>
                                                {{ $info->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="form-section hidden-section post_type_based">
                            <div class="section-title">{{ trans('Post Type Settings') }}</div>
                            <div class="form-group form-row full">
                                <label>{{ trans('Select Post Type') }}</label>
                                <select name="settings[news_type]" class="form-control">
                                    <option disabled selected>{{ trans('Select Post Type') }}</option>
                                    <option value="standerd"
                                        {{ old('settings.news_type', $widget->settings['news_type'] ?? '') == 'standerd' ? 'selected' : '' }}>
                                        {{ trans('Standard') }}
                                    </option>
                                    <option value="gallery"
                                        {{ old('settings.news_type', $widget->settings['news_type'] ?? '') == 'gallery' ? 'selected' : '' }}>
                                        {{ trans('Gallery') }}
                                    </option>
                                    <option value="video"
                                        {{ old('settings.news_type', $widget->settings['news_type'] ?? '') == 'video' ? 'selected' : '' }}>
                                        {{ trans('Video') }}
                                    </option>
                                </select>
                            </div>
                        </div>

                        <div class="form-section hidden-section add_space">
                            <div class="section-title">{{ trans('Ad Space Settings') }}</div>
                            <div class="form-group form-row full">
                                <label>{{ trans('Select Ad Space') }}</label>
                                <select name="settings[add_space]" class="form-control">
                                    <option disabled selected>{{ trans('Select Ad Space') }}</option>
                                    @forelse (adSpace() as $info)
                                        <option value="{{ $info->id }}"
                                            {{ old('settings.add_space', $widget->settings['add_space'] ?? '') == $info->id ? 'selected' : '' }}>
                                            {{ $info->title }}
                                        </option>
                                    @empty
                                    @endforelse
                                </select>
                            </div>
                        </div>

                        <div class="form-section hidden-section banner_widgets">
                            <div class="section-title">{{ trans('Banner Settings') }}</div>
                            <div class="form-row full">
                                <div class="form-group">
                                    <label>{{ trans('Upload Banner') }}</label>
                                    <div class="file-input-wrapper">
                                        <input type="file" name="settings[banner_image]" class="form-control">
                                        @if (!empty($widget->settings['banner_image']))
                                            <div class="banner-preview">
                                                <img src="{{ asset($widget->settings['banner_image']) }}" alt="Banner">
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group">
                                    <label>{{ trans('Banner Caption') }}</label>
                                    <input type="text" name="settings[banner_caption]" class="form-control"
                                        value="{{ old('settings.banner_caption', $widget->settings['banner_caption'] ?? '') }}">
                                </div>
                                <div class="form-group">
                                    <label>{{ trans('Banner Link') }}</label>
                                    <input type="text" name="settings[banner_link]" class="form-control"
                                        value="{{ old('settings.banner_link', $widget->settings['banner_link'] ?? '') }}">
                                </div>
                            </div>
                        </div>

                        <div class="form-section hidden-section custom_html">
                            <div class="section-title">{{ trans('Content Settings') }}</div>
                            <div class="form-group form-row full">
                                <label>{{ trans('Custom HTML Content') }}</label>
                                <textarea name="content" id="summernote" class="form-control" rows="6"
                                    placeholder="<div>Widget content here</div>">{{ old('content', $widget->content ?? '') }}</textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Right Column - Sidebar -->
                    <div class="form-sidebar">
                        <!-- Visibility Settings -->
                        <div class="sidebar-card">
                            <div class="sidebar-card-title">{{ trans('Schedule') }}</div>

                            <div class="form-group">
                                <label>{{ trans('Show From') }}</label>
                                <input type="datetime-local" name="show_from" class="form-control"
                                    value="{{ old('show_from', isset($widget->show_from) ? \Carbon\Carbon::parse($widget->show_from)->format('Y-m-d\TH:i') : '') }}">
                            </div>

                            <div class="form-group">
                                <label>{{ trans('Show Till') }}</label>
                                <input type="datetime-local" name="show_till" class="form-control"
                                    value="{{ old('show_till', isset($widget->show_till) ? \Carbon\Carbon::parse($widget->show_till)->format('Y-m-d\TH:i') : '') }}">
                            </div>

                            <div class="form-check ml-4">
                                <input type="checkbox" name="settings[date_active]" id="settings_date_active"
                                    class="form-check-input"
                                    {{ old('settings.date_active', $widget->settings['date_active'] ?? false) ? 'checked' : '' }}>
                                <label class="form-check-label ml-2" for="settings_date_active">
                                    {{ trans('Enable Date Schedule') }}
                                </label>
                            </div>
                        </div>

                        <!-- Status Settings -->
                        <div class="sidebar-card">
                            <div class="sidebar-card-title">{{ trans('Status') }}</div>

                            <div class="form-check ml-3">
                                <input type="checkbox" name="is_active" id="is_active" class="form-check-input"
                                    {{ old('is_active', $widget->is_active ?? true) ? 'checked' : '' }}>
                                <label class="form-check-label ml-2" for="is_active">
                                    {{ trans('Active Widget') }}
                                </label>
                            </div>
                        </div>

                        <!-- Save Button -->
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i>
                            {{ isset($widget) ? trans('Update Widget') : trans('Save Widget') }}
                        </button>
                        <a href="{{ route('widgets.index') }}" class="btn btn-danger text-center">Back</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

@endsection

@section('js')
<script>
    $(document).ready(function() {
        function toggleFields(type) {
            const sections = [
                'category_based',
                'tag_based',
                'post_type_based',
                'add_space',
                'banner_widgets',
                'custom_html',
                'news_tab_widgets',
                'slider_news_widgets',
            ];

            sections.forEach(sec => {
                const el = $('.' + sec);
                if (sec === type) {
                    el.addClass('active').find('input, select, textarea').prop('disabled', false);
                } else {
                    el.removeClass('active').find('input, select, textarea').prop('disabled', true);
                }
            });
        }

        const currentType = $('#type').val();

        @if (!isset($widget))
            $('.custom_html').addClass('active');
        @else
            toggleFields(currentType);
        @endif

        $('#type').change(function() {
            toggleFields($(this).val());
        });

        $('#summernote').summernote({
            height: 250,
            placeholder: 'Write your content here...',
        });
    });
</script>
@endsection