@extends('layouts.app')

@section('title', 'Add Study Material')
@section('page-title', 'Add New Study Material')

@section('content')
<div class="card">
    <div class="card-header bg-primary text-white">
        <h6 class="mb-0"><i class="fas fa-plus me-2"></i>Study Material Information</h6>
    </div>
    <div class="card-body">
        <form method="POST" action="{{ route('study-materials.store') }}" enctype="multipart/form-data">
            @csrf
            
            <div class="row">
                <div class="col-md-12 mb-3">
                    <label class="form-label">Title <span class="text-danger">*</span></label>
                    <input type="text" name="title" class="form-control" value="{{ old('title') }}" required>
                </div>
                
                <div class="col-md-6 mb-3">
                    <label class="form-label">Category <span class="text-danger">*</span></label>
                    <select name="category_type" class="form-control" required>
                        <option value="">-- Select Category --</option>
                        <option value="fire">🔥 Fire Insurance</option>
                        <option value="marine">⚓ Marine Insurance</option>
                        <option value="motor">🚗 Motor Insurance</option>
                        <option value="health">🏥 Health Insurance</option>
                        <option value="engineering">🏗️ Engineering Insurance</option>
                        <option value="liability">⚖️ Liability Insurance</option>
                        <option value="miscellaneous">📦 Miscellaneous</option>
                        <option value="general">📚 General</option>
                    </select>
                </div>
                
                <div class="col-md-6 mb-3">
                    <label class="form-label">Type <span class="text-danger">*</span></label>
                    <select name="type" id="type" class="form-control" required>
                        <option value="">-- Select Type --</option>
                        <option value="clause">📜 Clause</option>
                        <option value="tariff">📊 Tariff Details</option>
                        <option value="pdf">📄 PDF Document</option>
                        <option value="text">📝 Text Content</option>
                        <option value="guideline">📖 Guideline</option>
                        <option value="regulation">⚖️ Regulation</option>
                        <option value="other">📎 Other</option>
                    </select>
                </div>
                
                <div class="col-md-12 mb-3">
                    <label class="form-label">Description</label>
                    <textarea name="description" class="form-control" rows="2">{{ old('description') }}</textarea>
                </div>
                
                <div class="col-md-12 mb-3" id="contentField">
                    <label class="form-label">Content</label>
                    <textarea name="content" class="form-control" rows="10">{{ old('content') }}</textarea>
                    <small class="text-muted">Enter the clause, tariff details, or study material content here.</small>
                </div>
                
                <div class="col-md-12 mb-3" id="fileField" style="display: none;">
                    <label class="form-label">Upload File (PDF, DOC, TXT - Max 10MB)</label>
                    <input type="file" name="file" class="form-control" accept=".pdf,.doc,.docx,.txt">
                </div>
            </div>
            
            <div class="mt-3">
                <button type="submit" class="btn btn-primary">Create Material</button>
                <a href="{{ route('study-materials.index') }}" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    const typeSelect = document.getElementById('type');
    const contentField = document.getElementById('contentField');
    const fileField = document.getElementById('fileField');
    
    typeSelect.addEventListener('change', function() {
        if (this.value === 'pdf') {
            contentField.style.display = 'none';
            fileField.style.display = 'block';
            document.querySelector('textarea[name="content"]').required = false;
            document.querySelector('input[name="file"]').required = true;
        } else {
            contentField.style.display = 'block';
            fileField.style.display = 'none';
            document.querySelector('textarea[name="content"]').required = true;
            document.querySelector('input[name="file"]').required = false;
        }
    });
</script>
@endpush
@endsection