@extends('admin.layouts.master')

@section('title', 'Create Template Section')

@section('content')
<div class="main-content">
    <section class="section">
        <div class="section-header">
            <h1>Create Template Section</h1>
            <div class="section-header-breadcrumb">
                <div class="breadcrumb-item active"><a href="{{ route('admin.dashboard') }}">Dashboard</a></div>
                <div class="breadcrumb-item"><a href="{{ route('admin.templates.index') }}">Templates</a></div>
                <div class="breadcrumb-item"><a href="{{ route('admin.templates.show', $template) }}">{{ $template->name }}</a></div>
                <div class="breadcrumb-item"><a href="{{ route('admin.templates.sections.index', $template) }}">Sections</a></div>
                <div class="breadcrumb-item">Create</div>
            </div>
        </div>

        <div class="section-body">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4>Add Section to: {{ $template->name }}</h4>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('admin.templates.sections.store', $template) }}" method="POST">
                                @csrf
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="name">Section Name <span class="text-danger">*</span></label>
                                            <input type="text" id="name" name="name" class="form-control @error('name') is-invalid @enderror" 
                                                   value="{{ old('name') }}" required placeholder="e.g., Header, Experience, Skills">
                                            @error('name')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="sort_order">Sort Order</label>
                                            <input type="number" id="sort_order" name="sort_order" class="form-control @error('sort_order') is-invalid @enderror" 
                                                   value="{{ old('sort_order') }}" min="1" placeholder="Display order (1, 2, 3...)">
                                            <small class="form-text text-muted">Leave empty to add at the end</small>
                                            @error('sort_order')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="html_code">HTML Code <span class="text-danger">*</span></label>
                                    <textarea id="html_code" name="html_code" class="form-control @error('html_code') is-invalid @enderror" 
                                              rows="10" required placeholder="Enter HTML code with placeholders like {{name}}, {{email}}, etc.">{{ old('html_code') }}</textarea>
                                    <small class="form-text text-muted">
                                        Use placeholders like {{name}}, {{email}}, {{#each experience}}, etc. for dynamic content.
                                    </small>
                                    @error('html_code')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="css_code">CSS Code</label>
                                    <textarea id="css_code" name="css_code" class="form-control @error('css_code') is-invalid @enderror" 
                                              rows="8" placeholder="Enter CSS styles for this section">{{ old('css_code') }}</textarea>
                                    <small class="form-text text-muted">Optional CSS styles for this section</small>
                                    @error('css_code')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="placeholders">Placeholders</label>
                                    <input type="text" id="placeholders" name="placeholders[]" class="form-control @error('placeholders') is-invalid @enderror" 
                                           value="{{ old('placeholders.0') }}" placeholder="Enter placeholders separated by commas">
                                    <small class="form-text text-muted">
                                        List the placeholders used in this section (e.g., name, email, experience, skills)
                                    </small>
                                    @error('placeholders')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary">Create Section</button>
                                    <a href="{{ route('admin.templates.sections.index', $template) }}" class="btn btn-secondary">Cancel</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection