@extends('admin.layouts.master')

@section('title', 'Template Sections')

@section('content')
<div class="main-content">
    <section class="section">
        <div class="section-header">
            <h1>Template Sections: {{ $template->name }}</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">Sections</div>
            </div>
        </div>

        <div class="section-body">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4>Template Sections</h4>
                            <div class="card-header-action">
                                <a href="{{ route('admin.templates.sections.create', $template) }}" class="btn btn-primary">Add New Section</a>
                            </div>
                        </div>
                        <div class="card-body">
                            @if(session('success'))
                                <div class="alert alert-success">{{ session('success') }}</div>
                            @endif

                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>Sort Order</th>
                                            <th>Name</th>
                                            <th>Placeholders</th>
                                            <th>HTML Preview</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($sections as $section)
                                        <tr>
                                            <td>{{ $section->sort_order }}</td>
                                            <td>
                                                <strong>{{ $section->name }}</strong>
                                            </td>
                                            <td>
                                                @if($section->placeholders && count($section->placeholders) > 0)
                                                    @foreach($section->placeholders as $placeholder)
                                                        <span class="badge badge-light">{{ $placeholder }}</span>
                                                    @endforeach
                                                @else
                                                    <span class="text-muted">None</span>
                                                @endif
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-sm btn-info" 
                                                        data-toggle="modal" 
                                                        data-target="#htmlModal{{ $section->id }}">
                                                    View HTML
                                                </button>
                                            </td>
                                            <td>
                                                <div class="btn-group" role="group">
                                                    <a href="{{ route('admin.templates.sections.edit', [$template, $section]) }}" 
                                                       class="btn btn-sm btn-warning" title="Edit">
                                                        <i class="fas fa-edit"></i>
                                                    </a>
                                                    <form action="{{ route('admin.templates.sections.destroy', [$template, $section]) }}" 
                                                          method="POST" style="display: inline;" 
                                                          onsubmit="return confirm('Are you sure you want to delete this section?')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-sm btn-danger" title="Delete">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                        @empty
                                        <tr>
                                            <td colspan="5" class="text-center">No sections found for this template.</td>
                                        </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<!-- HTML Preview Modals -->
@foreach($sections as $section)
<div class="modal fade" id="htmlModal{{ $section->id }}" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">HTML Code: {{ $section->name }}</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>HTML Code:</label>
                    <pre class="bg-light p-3 rounded"><code>{{ $section->html_code }}</code></pre>
                </div>
                @if($section->css_code)
                <div class="form-group">
                    <label>CSS Code:</label>
                    <pre class="bg-light p-3 rounded"><code>{{ $section->css_code }}</code></pre>
                </div>
                @endif
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endforeach
@endsection