@extends('admin.layouts.master')

@section('title')
    {{ isset($content) ? 'Edit Content' : 'Add New Content' }}
@endsection

@section('css')
    <style>
        .card {
            border-radius: 12px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .preview-image {
            max-width: 200px;
            max-height: 200px;
            object-fit: cover;
            border-radius: 8px;
            margin-top: 10px;
        }
    </style>
@endsection

@section('content')
    <!-- Content Header -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">{{ isset($content) ? 'Edit Content' : 'Add New Content' }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.contents.index') }}">Content</a></li>
                        <li class="breadcrumb-item active">{{ isset($content) ? 'Edit' : 'Add' }}</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <!-- Main content -->
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <form
                                action="{{ isset($content) ? route('admin.contents.update', $content->content_id) : route('admin.contents.store') }}"
                                method="POST" enctype="multipart/form-data">
                                @csrf
                                @if (isset($content))
                                    @method('PUT')
                                @endif

                                <div class="form-group">
                                    <label for="content_title">Title</label>
                                    <input type="text" class="form-control @error('content_title') is-invalid @enderror"
                                        id="content_title" name="content_title"
                                        value="{{ old('content_title', $content->content_title ?? '') }}" required>
                                    @error('content_title')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="content_description">Description</label>
                                    <textarea class="form-control @error('content_description') is-invalid @enderror" id="content_description"
                                        name="content_description" rows="4" required>{{ old('content_description', $content->content_description ?? '') }}</textarea>
                                    @error('content_description')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="content_image">Content Image</label>
                                    <input type="file" class="form-control @error('content_image') is-invalid @enderror"
                                        id="content_image" name="content_image" accept="image/*"
                                        {{ !isset($content) ? 'required' : '' }}>
                                    @error('content_image')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                    @if (isset($content) && $content->content_image)
                                        <img src="{{ asset('storage/' . $content->content_image) }}" alt="Current image"
                                            class="preview-image">
                                    @endif
                                </div>

                                <div class="form-group">
                                    <label for="content_source">Source URL</label>
                                    <input type="url" class="form-control @error('content_source') is-invalid @enderror"
                                        id="content_source" name="content_source"
                                        value="{{ old('content_source', $content->content_source ?? '') }}" required>
                                    @error('content_source')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="content_date">Date</label>
                                    <input type="date" class="form-control @error('content_date') is-invalid @enderror"
                                        id="content_date" name="content_date"
                                        value="{{ old('content_date', isset($content) ? $content->content_date->format('Y-m-d') : '') }}"
                                        required>
                                    @error('content_date')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="category_id">Category</label>
                                    <select class="form-control @error('category_id') is-invalid @enderror" id="category_id"
                                        name="category_id" required>
                                        <option value="">Select Category</option>
                                        @foreach ($categories as $category)
                                            @if ($category->category_name !== 'Videos')
                                                <option value="{{ $category->category_id }}"
                                                    {{ old('category_id', $content->category_id ?? '') == $category->category_id ? 'selected' : '' }}>
                                                    {{ $category->category_name }}
                                                </option>
                                            @endif
                                        @endforeach
                                    </select>
                                    @error('category_id')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="bi bi-save"></i> {{ isset($content) ? 'Update Content' : 'Add Content' }}
                                    </button>
                                    <a href="{{ route('admin.contents.index') }}" class="btn btn-secondary">
                                        <i class="bi bi-x-circle"></i> Cancel
                                    </a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        // Preview image before upload
        document.getElementById('content_image').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const preview = document.createElement('img');
                    preview.src = e.target.result;
                    preview.className = 'preview-image';

                    const existingPreview = document.querySelector('.preview-image');
                    if (existingPreview) {
                        existingPreview.remove();
                    }

                    document.getElementById('content_image').parentNode.appendChild(preview);
                }
                reader.readAsDataURL(file);
            }
        });
    </script>
@endsection