@extends('layouts.admin')

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

@section('content_header')
    <div class="row mb-2">
        <div class="col-sm-6">
            <h1>Tambah Produk</h1>
        </div>
        <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('products.index') }}">Produk</a></li>
                <li class="breadcrumb-item active">Tambah</li>
            </ol>
        </div>
    </div>
@stop

@section('content')
    <div class="row">
        <div class="col-md-10 offset-md-1">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Form Tambah Produk</h3>
                </div>
                <form method="POST" action="{{ route('products.store') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="card-body">
                        <!-- Name -->
                        <div class="form-group">
                            <label for="name">Nama Produk <span class="text-danger">*</span></label>
                            <input type="text" id="name" name="name"
                                class="form-control @error('name') is-invalid @enderror"
                                placeholder="Masukkan nama produk" value="{{ old('name') }}" required>
                            @error('name')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <!-- Slug -->
                        <div class="form-group">
                            <label for="slug">Slug</label>
                            <input type="text" id="slug" name="slug"
                                class="form-control @error('slug') is-invalid @enderror"
                                placeholder="Slug akan di-generate otomatis dari nama"
                                value="{{ old('slug') }}">
                            @error('slug')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                            <small class="form-text text-muted">Slug digunakan untuk URL. Jika kosong, akan di-generate dari nama.</small>
                        </div>

                        <!-- Short Description -->
                        <div class="form-group">
                            <label for="short_description">Deskripsi Singkat</label>
                            <textarea id="short_description" name="short_description" rows="3"
                                class="form-control @error('short_description') is-invalid @enderror"
                                placeholder="Masukkan deskripsi singkat produk">{{ old('short_description') }}</textarea>
                            @error('short_description')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <!-- Icon -->
                        <div class="form-group">
                            <label for="icon">Icon</label>
                            <div class="custom-file">
                                <input type="file" id="icon" name="icon"
                                    class="custom-file-input @error('icon') is-invalid @enderror"
                                    accept="image/*">
                                <label class="custom-file-label" for="icon">Pilih icon...</label>
                            </div>
                            @error('icon')
                                <span class="invalid-feedback" style="display: block;">{{ $message }}</span>
                            @enderror
                            <small class="form-text text-muted">Format: JPG, PNG, GIF, SVG. Maks. 2MB</small>
                            <div id="iconPreview" class="mt-2"></div>
                        </div>

                        <!-- Image -->
                        <div class="form-group">
                            <label for="image">Gambar Utama</label>
                            <div class="custom-file">
                                <input type="file" id="image" name="image"
                                    class="custom-file-input @error('image') is-invalid @enderror"
                                    accept="image/*">
                                <label class="custom-file-label" for="image">Pilih gambar...</label>
                            </div>
                            @error('image')
                                <span class="invalid-feedback" style="display: block;">{{ $message }}</span>
                            @enderror
                            <small class="form-text text-muted">Format: JPG, PNG, GIF. Maks. 2MB</small>
                            <div id="imagePreview" class="mt-2"></div>
                        </div>

                        <!-- Product Details -->
                        <div class="form-group">
                            <label>Detail Produk</label>
                            <div id="detailsContainer">
                                <!-- Template for details will be added here -->
                            </div>
                            <button type="button" id="addDetailBtn" class="btn btn-outline-primary btn-sm mt-2">
                                <i class="fas fa-plus"></i> Tambah Detail
                            </button>
                        </div>
                    </div>

                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Simpan
                        </button>
                        <a href="{{ route('products.index') }}" class="btn btn-secondary">
                            <i class="fas fa-times"></i> Batal
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
@stop

@section('js')
    <script>
        let detailIndex = 0;

        // Auto-generate slug from name
        document.getElementById('name').addEventListener('input', function() {
            const name = this.value;
            const slug = name.toLowerCase()
                .replace(/[^a-z0-9 -]/g, '')
                .replace(/\s+/g, '-')
                .replace(/-+/g, '-')
                .trim('-');
            document.getElementById('slug').value = slug;
        });

        // Icon preview
        document.getElementById('icon').addEventListener('change', function(e) {
            const file = e.target.files[0];
            const preview = document.getElementById('iconPreview');

            if (file) {
                const reader = new FileReader();
                reader.onload = function(event) {
                    preview.innerHTML = `
                        <div class="d-flex align-items-center">
                            <img src="${event.target.result}" alt="Icon Preview"
                                style="max-height: 100px; max-width: 100px; object-fit: contain;">
                        </div>
                    `;
                };
                reader.readAsDataURL(file);

                document.querySelector('.custom-file-label[for="icon"]').textContent = file.name;
            }
        });

        // Image preview
        document.getElementById('image').addEventListener('change', function(e) {
            const file = e.target.files[0];
            const preview = document.getElementById('imagePreview');

            if (file) {
                const reader = new FileReader();
                reader.onload = function(event) {
                    preview.innerHTML = `
                        <div class="d-flex align-items-center">
                            <img src="${event.target.result}" alt="Image Preview"
                                style="max-height: 200px; object-fit: contain;">
                        </div>
                    `;
                };
                reader.readAsDataURL(file);

                document.querySelector('.custom-file-label[for="image"]').textContent = file.name;
            }
        });

        // Add detail function
        function addDetail(title = '', description = '') {
            const container = document.getElementById('detailsContainer');
            const detailHtml = `
                <div class="detail-item border rounded p-3 mb-3" data-index="${detailIndex}">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h6>Detail ${detailIndex + 1}</h6>
                        <button type="button" class="btn btn-danger btn-sm remove-detail" onclick="removeDetail(this)">
                            <i class="fas fa-trash"></i> Hapus
                        </button>
                    </div>
                    <div class="form-row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Judul Detail <span class="text-danger">*</span></label>
                                <input type="text" name="details[${detailIndex}][title]"
                                    class="form-control" placeholder="Judul detail" value="${title}" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Gambar Detail</label>
                                <div class="custom-file">
                                    <input type="file" name="details[${detailIndex}][image]"
                                        class="custom-file-input detail-image" accept="image/*">
                                    <label class="custom-file-label">Pilih gambar...</label>
                                </div>
                                <div class="detail-image-preview mt-2"></div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Deskripsi Detail</label>
                        <textarea name="details[${detailIndex}][description]" rows="3"
                            class="form-control" placeholder="Deskripsi detail">${description}</textarea>
                    </div>
                </div>
            `;
            container.insertAdjacentHTML('beforeend', detailHtml);
            detailIndex++;
        }

        // Remove detail function
        function removeDetail(button) {
            button.closest('.detail-item').remove();
            updateDetailNumbers();
        }

        // Update detail numbers
        function updateDetailNumbers() {
            const details = document.querySelectorAll('.detail-item');
            details.forEach((detail, index) => {
                detail.querySelector('h6').textContent = `Detail ${index + 1}`;
            });
        }

        // Add detail button
        document.getElementById('addDetailBtn').addEventListener('click', function() {
            addDetail();
        });

        // Handle detail image previews
        document.addEventListener('change', function(e) {
            if (e.target.classList.contains('detail-image')) {
                const file = e.target.files[0];
                const preview = e.target.closest('.form-group').querySelector('.detail-image-preview');

                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(event) {
                        preview.innerHTML = `
                            <img src="${event.target.result}" alt="Detail Image Preview"
                                style="max-height: 100px; object-fit: contain;">
                        `;
                    };
                    reader.readAsDataURL(file);

                    e.target.nextElementSibling.textContent = file.name;
                }
            }
        });

        // Add one detail by default
        addDetail();
    </script>
@stop

@section('css')
    <style>
        .detail-item {
            background-color: #f8f9fa;
        }

        @media (max-width: 768px) {
            .col-md-10.offset-md-1 {
                margin: 0;
                padding: 0.5rem;
            }

            .form-group {
                margin-bottom: 1rem;
            }

            .card-body {
                padding: 1rem;
            }

            .card-footer {
                padding: 1rem;
            }

            .btn {
                width: 100%;
                margin-bottom: 0.5rem;
            }

            .form-row {
                margin: 0;
            }

            .col-md-6 {
                padding: 0.25rem;
            }

            img {
                max-width: 100%;
                height: auto;
            }
        }
    </style>
@stop