@extends('home_layout.master_sidebar')

@section('page_styles')
    <style>
        .email-templates-container {
            max-width: 900px;
            margin: 40px auto;
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .nav-tabs .nav-link {
            font-weight: 500;
            color: #555;
        }
        .nav-tabs .nav-link.active {
            color: #09e5ab;
            border-color: #09e5ab;
        }
        .template-preview {
            background: #f8f8f8;
            padding: 15px;
            border-radius: 4px;
            font-family: monospace;
            white-space: pre-wrap;
            margin-bottom: 15px;
        }
        .form-group textarea {
            font-family: monospace;
        }
    </style>
@stop

@section('breadcrumbs')
    @include('home_layout.breadcrumb', [
       'title' => 'Email Templates',
       'breadcrumbs' => [
           ['title' => 'Home', 'link' => '#'],
           ['title' => 'Company', 'link' => route('company.settings')],
           ['title' => 'Email Templates', 'link' => '#']
       ]
    ])
@stop

@section('content')
    <div class="email-templates-container">
        <h3>Email Templates</h3>
        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        <form action="{{ route('company.email-templates.update') }}" method="POST">
            @csrf
            <ul class="nav nav-tabs" id="templateTab" role="tablist">
                @foreach($emailTemplates as $key => $template)
                    <li class="nav-item" role="presentation">
                        <a class="nav-link @if($loop->first) active @endif" id="{{ $key }}-tab" data-toggle="tab" href="#{{ $key }}" role="tab" aria-controls="{{ $key }}" aria-selected="@if($loop->first) true @else false @endif">
                            {{ ucwords(str_replace('-', ' ', $key)) }}
                        </a>
                    </li>
                @endforeach
            </ul>
            <div class="tab-content" id="templateTabContent" style="margin-top:20px;">
                @foreach($emailTemplates as $key => $template)
                    <div class="tab-pane fade @if($loop->first) show active @endif" id="{{ $key }}" role="tabpanel" aria-labelledby="{{ $key }}-tab">
                        <div class="form-group">
                            <label for="subject_{{ $key }}">Subject</label>
                            <input type="text" class="form-control" id="subject_{{ $key }}" name="templates[{{ $key }}][subject]" value="{{ $template->subject }}">
                        </div>
                        <div class="form-group">
                            <label for="content_{{ $key }}">Template Content</label>
                            <textarea class="form-control" id="content_{{ $key }}" name="templates[{{ $key }}][content]" rows="8">{{ $template->content }}</textarea>
                        </div>
                        <div>
                            <strong>Preview:</strong>
                            <div class="template-preview">
                                {!! $template->content !!}
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <button type="submit" class="btn btn-primary mt-3">Save Email Templates</button>
        </form>
    </div>
@stop

@section('page_scripts')
    <script>
        $(document).ready(function(){
            $('#templateTab a').on('click', function (e) {
                e.preventDefault();
                $(this).tab('show');
            });
        });
    </script>
@stop