@extends('layouts.app')
@section('title', 'Speakers | KDHC')
@section('content')
    <div class="container">
        @if (session('message'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('message') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif

        <div class="d-flex justify-content-between align-items-center mb-3" style="gap: 0.75rem;">
            <h4 class="mb-0">Speakers</h4>
            <div class="d-flex align-items-center" style="gap: 0.5rem;">
                <form method="get" class="d-flex align-items-center mr-2">
                    <select name="year" class="form-select form-control" onchange="this.form.submit()">
                        <option value="all" {{ ($selectedYear ?? '') === 'all' ? 'selected' : '' }}>All years</option>
                        @foreach (($years ?? []) as $year)
                            <option value="{{ $year }}"
                                {{ (string) $year === (string) ($selectedYear ?? date('Y')) ? 'selected' : '' }}>
                                {{ $year }}
                            </option>
                        @endforeach
                    </select>
                </form>
                <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#speakerModal"
                    onclick="prepCreate()">Add Speaker</button>
            </div>
        </div>

        <div class="row row-cols-2 row-cols-sm-3 row-cols-md-5 g-3">
            @forelse ($speakers as $speaker)
                <div class="col">
                    <div class="position-relative">
                        <div class="rounded-2 overflow-hidden" style="height: 210px;">
                            <img src="{{ asset('storage/speakers/' . $speaker->avatar) }}" alt="{{ $speaker->name }}"
                                class="img-fluid rounded-2 h-100 w-100 object-fit-cover">
                        </div>
                        <div class="position-absolute top-0 end-0 m-1 d-flex gap-1">
                            <button type="button" class="btn btn-sm btn-light shadow-sm btn-edit-speaker"
                                data-bs-toggle="modal" data-bs-target="#speakerModal"
                                data-name="{{ $speaker->name }}"
                                data-title="{{ $speaker->title }}"
                                data-organization="{{ $speaker->organization }}"
                                data-message="{{ $speaker->message }}"
                                data-avatar="{{ asset('storage/speakers/' . $speaker->avatar) }}"
                                data-slug="{{ $speaker->speaker_slug }}"
                                data-year="{{ $speaker->event_year }}">
                                <i class="bi bi-pencil"></i>
                            </button>
                            <button type="button" class="btn btn-sm btn-danger shadow-sm btn-delete-speaker"
                                data-bs-toggle="modal" data-bs-target="#deleteModal"
                                data-slug="{{ $speaker->speaker_slug }}"
                                data-name="{{ $speaker->name }}">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                    </div>
                    <div class="mt-2">
                        <div class="fw-semibold">{{ $speaker->name }}</div>
                        <div class="small text-muted">{{ $speaker->title }}</div>
                        <div class="small text-muted">{{ $speaker->organization }}</div>
                    </div>
                </div>
            @empty
                <div class="col-12">
                    <div class="alert alert-secondary mb-0">No speakers found for the selected year.</div>
                </div>
            @endforelse
        </div>
    </div>

    <!-- Speaker Modal (Create/Edit) -->
    <div class="modal fade" id="speakerModal" tabindex="-1" role="dialog" aria-labelledby="speakerModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <form method="post" id="speakerForm" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="speakerModalLabel">Add Speaker</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row g-3 mb-3">
                            <div class="col-sm-6 col-lg-4">
                                <div class="form-group">
                                    <label>Name</label>
                                    <input type="text" class="form-control" name="name" id="speaker_name" required>
                                </div>
                            </div>
                            <div class="col-sm-6 col-lg-4">
                                <div class="form-group">
                                    <label>Title</label>
                                    <input type="text" class="form-control" name="title" id="speaker_title" required>
                                </div>
                            </div>
                            <div class="col-sm-6 col-lg-4">
                                <div class="form-group">
                                    <label>Organization/Company/Institution</label>
                                    <input type="text" class="form-control" name="organization" id="speaker_org" required>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group">
                                    <label>Avatar</label>
                                    <div class="mb-2">
                                        <img id="avatar_preview" src="" alt="Avatar preview" class="img-fluid rounded-2"
                                            style="max-height: 180px; display:none;">
                                    </div>
                                    <input type="file" class="form-control" name="user_avatar" id="speaker_avatar">
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group">
                                    <label>About</label>
                                    <textarea class="form-control" name="message" id="speaker_message" rows="4"></textarea>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label>Event Year</label>
                                    <input type="text" class="form-control" name="event_year" id="speaker_year"
                                        value="{{ $selectedYear ?? date('Y') }}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-info" id="speakerSubmitBtn">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Delete Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form method="post" id="deleteForm">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteModalLabel">Delete Speaker</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p class="mb-0">Are you sure you want to delete <strong id="deleteSpeakerName"></strong>?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-danger">Delete</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        function prepCreate() {
            const form = document.getElementById('speakerForm');
            form.action = "{{ route('admin.speakers.store') }}";
            document.getElementById('speakerModalLabel').innerText = 'Add Speaker';
            document.getElementById('speakerSubmitBtn').innerText = 'Submit';
            document.getElementById('speaker_name').value = '';
            document.getElementById('speaker_title').value = '';
            document.getElementById('speaker_org').value = '';
            document.getElementById('speaker_message').value = '';
            document.getElementById('speaker_year').value = "{{ $selectedYear ?? date('Y') }}";
            document.getElementById('speaker_avatar').required = true;
            const preview = document.getElementById('avatar_preview');
            preview.style.display = 'none';
            preview.src = '';
            if (window.speakerEditor) {
                window.speakerEditor.setData('');
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.btn-edit-speaker').forEach(function(btn) {
                btn.addEventListener('click', function() {
                    const form = document.getElementById('speakerForm');
                    const slug = this.dataset.slug;
                    const updateUrl = "{{ route('admin.speaker.update', ['speaker' => '__slug__']) }}".replace('__slug__', slug);
                    form.action = updateUrl;
                    document.getElementById('speakerModalLabel').innerText = 'Update Speaker';
                    document.getElementById('speakerSubmitBtn').innerText = 'Update';
                    document.getElementById('speaker_name').value = this.dataset.name || '';
                    document.getElementById('speaker_title').value = this.dataset.title || '';
                    document.getElementById('speaker_org').value = this.dataset.organization || '';
                    document.getElementById('speaker_message').value = this.dataset.message || '';
                    document.getElementById('speaker_year').value = this.dataset.year || '';
                    const preview = document.getElementById('avatar_preview');
                    preview.src = this.dataset.avatar || '';
                    preview.style.display = this.dataset.avatar ? 'block' : 'none';
                    document.getElementById('speaker_avatar').required = false;
                    if (window.speakerEditor) {
                        window.speakerEditor.setData(this.dataset.message || '');
                    }
                });
            });

            document.querySelectorAll('.btn-delete-speaker').forEach(function(btn) {
                btn.addEventListener('click', function() {
                    const slug = this.dataset.slug;
                    const name = this.dataset.name || '';
                    const deleteUrl = "{{ route('admin.speaker.destroy', ['speaker' => '__slug__']) }}".replace('__slug__', slug);
                    document.getElementById('deleteForm').action = deleteUrl;
                    document.getElementById('deleteSpeakerName').innerText = name;
                });
            });
            const messageField = document.getElementById('speaker_message');
            if (messageField && window.ClassicEditor) {
                ClassicEditor
                    .create(messageField)
                    .then(editor => {
                        window.speakerEditor = editor;
                    })
                    .catch(error => console.error(error));
            }

            const form = document.getElementById('speakerForm');
            if (form) {
                form.addEventListener('submit', function() {
                    if (window.speakerEditor) {
                        document.getElementById('speaker_message').value = window.speakerEditor.getData();
                    }
                });
            }
        });
    </script>
@endsection