@extends('layouts.admin')

@section('title', 'Create CBSE Certificate')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3">Create CBSE Certificate</h1>
    <a href="{{ route('admin.cbse-corners.index') }}" class="btn btn-modern-primary">
        <i class="bi bi-arrow-left me-2"></i>Back to CBSE Corner
    </a>
</div>

<div class="card">
    <div class="card-body">
        <form method="POST" action="{{ route('admin.cbse-corners.store') }}">
            @csrf

            @if($admin->is_super_admin)
            <div class="mb-3">
                <label for="domain_id" class="form-label">Domain <span class="text-danger">*</span></label>
                <select class="form-select @error('domain_id') is-invalid @enderror" id="domain_id" name="domain_id" required>
                    <option value="">Select Domain</option>
                    @foreach($domains as $domain)
                        <option value="{{ $domain->id }}" {{ old('domain_id', $currentDomainId) == $domain->id ? 'selected' : '' }}>
                            {{ $domain->full_domain }}
                        </option>
                    @endforeach
                </select>
                <small class="form-text text-muted">Select the domain for this certificate</small>
                @error('domain_id')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            @endif

            <div class="mb-3">
                <label for="title" class="form-label">Certificate Title <span class="text-danger">*</span></label>
                <input type="text" class="form-control @error('title') is-invalid @enderror"
                       id="title" name="title" value="{{ old('title') }}"
                       placeholder="Enter certificate title" required>
                <small class="form-text text-muted">The title of the certificate or document</small>
                @error('title')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-3">
                <label for="description" class="form-label">Description</label>
                <textarea class="form-control @error('description') is-invalid @enderror"
                          id="description" name="description" rows="4">{{ old('description') }}</textarea>
                <small class="form-text text-muted">Optional description for the certificate</small>
                @error('description')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-3">
                <label class="form-label">Certificate File</label>
                <div class="input-group">
                    <input type="text" class="form-control @error('file_path') is-invalid @enderror"
                           name="file_path" id="certificate-file" placeholder="Select a file or enter URL"
                           value="{{ old('file_path') }}">
                    <button type="button" class="btn btn-outline-secondary" data-bs-toggle="filemanager" data-input="certificate-file" data-preview="certificate-preview">
                        <i class="bi bi-folder2-open"></i> Browse
                    </button>
                </div>
                <div id="certificate-preview" class="mt-2"></div>
                <small class="form-text text-muted d-block">Upload or select a certificate file (PDF, Excel, Word, Image, etc.)</small>
                @error('file_path')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="sort_order" class="form-label">Sort Order</label>
                    <input type="number" class="form-control @error('sort_order') is-invalid @enderror"
                           id="sort_order" name="sort_order" value="{{ old('sort_order', 0) }}" min="0">
                    <small class="form-text text-muted">Lower numbers appear first (0 = highest priority)</small>
                    @error('sort_order')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Status</label>
                    <div class="form-check form-switch">
                        <input type="hidden" name="is_active" value="0">
                        <input type="checkbox" name="is_active" id="is_active"
                               class="form-check-input" value="1"
                               {{ old('is_active', true) ? 'checked' : '' }}>
                        <label for="is_active" class="form-check-label">Active</label>
                    </div>
                    <small class="form-text text-muted">Inactive certificates won't be displayed</small>
                </div>
            </div>

            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                <a href="{{ route('admin.cbse-corners.index') }}" class="btn btn-secondary">Cancel</a>
                <button type="submit" class="btn btn-modern-primary">
                    <i class="bi bi-check-circle me-2"></i>Create Certificate
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('vendor/laravel-filemanager/js/stand-alone-button.js') }}"></script>
<script>
// Initialize file managers for all file inputs
$(document).ready(function() {
    initializeFileManagers();
});

function initializeFileManagers() {
    // Initialize any file manager buttons
    $('[data-bs-toggle="filemanager"]').each(function() {
        const $btn = $(this);
        const inputId = $btn.data('input');
        const previewId = $btn.data('preview');

        // Check if already initialized
        if (!$btn.data('filemanager-initialized')) {
            try {
                // Use 'file' type to allow all file types
                $btn.filemanager('file', {prefix: '/admin/filemanager'});
                $btn.on('filemanager.selected', function(e, data) {
                    $('#' + inputId).val(data.url);
                    if (previewId && $('#' + previewId).length > 0) {
                        // Check file extension to determine preview type
                        const fileUrl = data.url.toLowerCase();
                        if (fileUrl.includes('.pdf')) {
                            $('#' + previewId).html('<div class="file-preview pdf-preview"><i class="bi bi-file-earmark-pdf text-danger"></i><span>PDF Document</span></div>');
                        } else if (fileUrl.includes('.doc') || fileUrl.includes('.docx')) {
                            $('#' + previewId).html('<div class="file-preview doc-preview"><i class="bi bi-file-earmark-word text-primary"></i><span>Word Document</span></div>');
                        } else if (fileUrl.includes('.xls') || fileUrl.includes('.xlsx')) {
                            $('#' + previewId).html('<div class="file-preview xls-preview"><i class="bi bi-file-earmark-excel text-success"></i><span>Excel Document</span></div>');
                        } else if (fileUrl.includes('.jpg') || fileUrl.includes('.jpeg') || fileUrl.includes('.png') || fileUrl.includes('.gif')) {
                            $('#' + previewId).html('<img src="' + data.url + '" class="img-fluid rounded" style="max-height: 100px;">');
                        } else {
                            $('#' + previewId).html('<div class="file-preview generic-preview"><i class="bi bi-file-earmark text-muted"></i><span>File Selected</span></div>');
                        }
                    }
                });
                $btn.data('filemanager-initialized', true);
            } catch (error) {
                console.error('Error initializing filemanager for', inputId, error);
            }
        }
    });
}
</script>
<style>
.file-preview {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    font-size: 0.9rem;
    color: #495057;
}

.file-preview i {
    font-size: 1.2rem;
}

.pdf-preview { border-left: 4px solid #dc3545; }
.doc-preview { border-left: 4px solid #0d6efd; }
.xls-preview { border-left: 4px solid #198754; }
</style>
@endpush