@extends('layouts.main_dashboard.app')

@section('title', __('dashboard.Create New Post'))
@section('page_heading', __('dashboard.Create New Post'))

@section('breadcrumb')
    <li class="breadcrumb-item text-muted"><a href="{{ route('admin.courses.posts.index', $course->id) }}" class="text-muted text-hover-primary">{{ __('dashboard.Posts') }}</a></li>
    <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
    <li class="breadcrumb-item text-muted">{{ __('dashboard.Create Post') }}</li>
@endsection

@section('content')
<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-fluid">
        <div class="rounded-[1.75rem] border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <div class="p-6">
                <form action="{{ route('admin.courses.posts.store', $course->id) }}" method="POST" enctype="multipart/form-data" id="postForm">
                    @csrf

                    <div class="row mb-5">
                        <div class="col-md-6">
                            <label class="form-label required">{{ __('dashboard.Post Type') }}</label>
                            <div class="d-flex gap-4">
                                <div class="form-check form-check-custom form-check-solid">
                                    <input class="form-check-input" type="radio" name="type" value="normal" id="type_normal" checked onchange="togglePostType()">
                                    <label class="form-check-label" for="type_normal">{{ __('dashboard.Normal Post') }}</label>
                                </div>
                                <div class="form-check form-check-custom form-check-solid">
                                    <input class="form-check-input" type="radio" name="type" value="poll" id="type_poll" onchange="togglePostType()">
                                    <label class="form-check-label" for="type_poll">{{ __('dashboard.Poll') }}</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label required">{{ __('dashboard.Status') }}</label>
                            <select name="is_published" class="form-select form-select-solid">
                                <option value="1" selected>{{ __('dashboard.Published') }}</option>
                                <option value="0">{{ __('dashboard.Unpublished') }}</option>
                            </select>
                        </div>
                    </div>

                    <div class="mb-5">
                        <label class="form-label required" id="content_label">{{ __('dashboard.Content') }}</label>
                        <textarea name="body" class="form-control form-control-solid" rows="4" placeholder="{{ __('dashboard.Write something...') }}" required>{{ old('body') }}</textarea>
                        @error('body') <div class="text-danger mt-2">{{ $message }}</div> @enderror
                    </div>

                    <div id="normal_post_section">
                        <div class="mb-5">
                            <label class="form-label">{{ __('dashboard.Attachments') }}</label>
                            <input type="file" name="files[]" class="form-control form-control-solid" multiple accept="image/*,video/*">
                            <div class="form-text text-muted mt-2">
                                <i class="ki-outline ki-information-5 text-gray-500 fs-6"></i>
                                {{ __('dashboard.You can upload up to 4 images OR 1 video.') }}
                            </div>
                            @error('files') <div class="text-danger mt-2">{{ $message }}</div> @enderror
                            @foreach($errors->get('files.*') as $error)
                                <div class="text-danger mt-1">{{ $error[0] }}</div>
                            @endforeach
                        </div>
                    </div>

                    <div id="poll_section" style="display: none;">
                        <label class="form-label required">{{ __('dashboard.Poll Options') }}</label>
                        <div id="poll_options_container">
                            <div class="input-group mb-3">
                                <span class="input-group-text">1</span>
                                <input type="text" name="poll_options[]" class="form-control form-control-solid" placeholder="{{ __('dashboard.Option') }} 1">
                            </div>
                            <div class="input-group mb-3">
                                <span class="input-group-text">2</span>
                                <input type="text" name="poll_options[]" class="form-control form-control-solid" placeholder="{{ __('dashboard.Option') }} 2">
                            </div>
                        </div>
                        <button type="button" class="btn btn-sm btn-light-primary mb-5" onclick="addPollOption()">+ {{ __('dashboard.Add Option') }}</button>

                        <div class="form-check form-switch form-check-custom form-check-solid mb-5">
                            <input class="form-check-input" type="checkbox" name="allow_multiple_choice" value="1" id="allow_multiple">
                            <label class="form-check-label" for="allow_multiple">{{ __('dashboard.Allow Multiple Choice') }}</label>
                        </div>
                    </div>

                    <div class="d-flex justify-content-end">
                        <a href="{{ route('admin.courses.posts.index', $course->id) }}" class="btn btn-light me-3">{{ __('dashboard.Cancel') }}</a>
                        <button type="submit" class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2 text-sm font-bold text-white hover:bg-brand-700">{{ __('dashboard.Publish') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    function togglePostType() {
        const isPoll = document.getElementById('type_poll').checked;
        const normalSection = document.getElementById('normal_post_section');
        const pollSection = document.getElementById('poll_section');
        const contentLabel = document.getElementById('content_label');

        if (isPoll) {
            normalSection.style.display = 'none';
            pollSection.style.display = 'block';
            contentLabel.textContent = "{{ __('dashboard.Poll Question') }}";
        } else {
            normalSection.style.display = 'block';
            pollSection.style.display = 'none';
            contentLabel.textContent = "{{ __('dashboard.Content') }}";
        }
    }

    function addPollOption() {
        const container = document.getElementById('poll_options_container');
        const count = container.children.length + 1;
        const div = document.createElement('div');
        div.className = 'input-group mb-3';
        div.innerHTML = `
            <span class="input-group-text">${count}</span>
            <input type="text" name="poll_options[]" class="form-control form-control-solid" placeholder="{{ __('dashboard.Option') }} ${count}">
            <button type="button" class="btn btn-light-danger" onclick="this.parentElement.remove()">x</button>
        `;
        container.appendChild(div);
    }
</script>
@endsection