@extends('layouts.app')

@section('title', 'Tambah Iklan')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h6 class="mb-0">
                        <i class="fas fa-bullhorn"></i>
                        Tambah Iklan Baru
                    </h6>
                </div>
                <div class="card-body">
                    <form action="{{ route('iklan.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        
                        <div class="row mb-3">
                            <div class="col-md-8">
                                <label for="nama_iklan" class="form-label">Nama Iklan <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('nama_iklan') is-invalid @enderror" 
                                       id="nama_iklan" name="nama_iklan" value="{{ old('nama_iklan') }}" required>
                                @error('nama_iklan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label for="status" class="form-label">Status</label>
                                <select class="form-select @error('status') is-invalid @enderror" id="status" name="status">
                                    <option value="draft" {{ old('status', 'draft') == 'draft' ? 'selected' : '' }}>Draft</option>
                                    <option value="publish" {{ old('status') == 'publish' ? 'selected' : '' }}>Publish</option>
                                </select>
                                @error('status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="gambar" class="form-label">Gambar/Slide Iklan</label>
                            <input type="file" class="form-control @error('gambar') is-invalid @enderror" 
                                   id="gambar" name="gambar" accept="image/*">
                            @error('gambar')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">Format: JPG, PNG, GIF. Maksimal 2MB. Ukuran yang disarankan: 1200x600px</small>
                        </div>

                        <div class="mb-3">
                            <label for="content" class="form-label">Isi Content <span class="text-danger">*</span></label>
                            <textarea class="form-control @error('content') is-invalid @enderror" 
                                      id="content" name="content" rows="15" required>{{ old('content') }}</textarea>
                            @error('content')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">Gunakan editor di atas untuk memformat konten dengan mudah.</small>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="tanggal_berakhir" class="form-label">Tanggal Berakhir <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('tanggal_berakhir') is-invalid @enderror" 
                                       id="tanggal_berakhir" name="tanggal_berakhir" 
                                       value="{{ old('tanggal_berakhir', date('Y-m-d')) }}" 
                                       min="{{ date('Y-m-d') }}" required>
                                @error('tanggal_berakhir')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Iklan akan otomatis tidak ditampilkan setelah tanggal ini</small>
                            </div>
                            <div class="col-md-6">
                                <label for="kecepatan_slide" class="form-label">Kecepatan Slide <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="number" class="form-control @error('kecepatan_slide') is-invalid @enderror" 
                                           id="kecepatan_slide" name="kecepatan_slide" 
                                           value="{{ old('kecepatan_slide', 5) }}" 
                                           min="1" max="60" required>
                                    <span class="input-group-text">detik</span>
                                </div>
                                @error('kecepatan_slide')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Berapa detik slide akan berpindah (1-60 detik)</small>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Link Iklan</label>
                            <div class="input-group">
                                <span class="input-group-text">{{ url('/iklan/') }}/</span>
                                <input type="text" class="form-control" id="preview_slug" readonly 
                                       placeholder="akan-dibuat-otomatis-dari-nama-iklan">
                            </div>
                            <small class="text-muted">Link akan dibuat otomatis berdasarkan nama iklan</small>
                        </div>

                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Simpan Iklan
                            </button>
                            <a href="{{ route('iklan.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times"></i> Batal
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.tox-tinymce {
    border-radius: 8px !important;
}
.tox .tox-toolbar {
    background: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6 !important;
}
</style>
@endpush

@push('scripts')
<!-- Summernote CSS & JS -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/lang/summernote-id-ID.min.js"></script>

<script>
$(document).ready(function() {
    // Initialize Summernote
    $('#content').summernote({
        height: 400,
        lang: 'id-ID',
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
            ['fontname', ['fontname']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video', 'hr']],
            ['view', ['fullscreen', 'codeview', 'help']]
        ],
        fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana', 'Segoe UI'],
        fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '20', '24', '36', '48'],
        styleTags: [
            'p', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
        ],
        callbacks: {
            onImageUpload: function(files) {
                // Handle image upload
                for (let i = 0; i < files.length; i++) {
                    uploadImage(files[i]);
                }
            },
            onChange: function(contents, $editable) {
                // Auto-save functionality
                console.log('Content changed');
            }
        },
        placeholder: 'Tulis konten iklan di sini...',
        tabsize: 2,
        focus: false,
        disableResizeEditor: false
    });

    // Image upload function
    function uploadImage(file) {
        let reader = new FileReader();
        reader.onload = function(e) {
            $('#content').summernote('insertImage', e.target.result, function($image) {
                $image.css('max-width', '100%');
                $image.css('height', 'auto');
                $image.addClass('img-fluid rounded');
            });
        };
        reader.readAsDataURL(file);
    }

    // Auto generate slug preview from nama iklan
    $('#nama_iklan').on('input', function() {
        let nama = $(this).val();
        let slug = nama.toLowerCase()
            .replace(/[^a-z0-9 -]/g, '')
            .replace(/\s+/g, '-')
            .replace(/-+/g, '-')
            .trim('-');
        $('#preview_slug').val(slug || 'akan-dibuat-otomatis-dari-nama-iklan');
    });

    // Form validation
    $('form').on('submit', function(e) {
        // Check if content is empty
        var content = $('#content').summernote('code');
        var textContent = $('<div>').html(content).text().trim();
        
        if (textContent === '') {
            e.preventDefault();
            alert('Konten iklan tidak boleh kosong!');
            $('#content').summernote('focus');
            return false;
        }

        // Validate tanggal berakhir
        var tanggalBerakhir = new Date($('#tanggal_berakhir').val());
        var today = new Date();
        today.setHours(0, 0, 0, 0);
        
        if (tanggalBerakhir < today) {
            e.preventDefault();
            alert('Tanggal berakhir tidak boleh kurang dari hari ini!');
            $('#tanggal_berakhir').focus();
            return false;
        }
    });

    // Preview gambar saat dipilih
    $('#gambar').on('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                // Remove existing preview
                $('#gambar-preview').remove();
                
                // Create new preview
                const preview = $(`
                    <div id="gambar-preview" class="mt-2">
                        <img src="${e.target.result}" class="img-thumbnail" style="max-width: 200px; max-height: 150px;">
                        <small class="d-block text-muted">Preview gambar</small>
                    </div>
                `);
                
                $('#gambar').parent().append(preview);
            };
            reader.readAsDataURL(file);
        }
    });
});
</script>
@endpush