@if(session()->has('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@elseif(session()->has('error'))
    <div class="alert alert-danger">
        {{ session('error') }}
    </div>
@endif

<div class="row mb-3">
    <div class="col-md-12">
        <label for="title" class="form-label">
            {{ __('views.email_company.email_title') }}
        </label>
        <input type="text"
               wire:model="title"
               id="title"
               class="form-control @error('title') is-invalid @enderror"
               placeholder="{{ __('views.email_company.email_title_placeholder') }}">
        @error('title')
        <div class="invalid-feedback">{{ $message }}</div>
        @enderror
        <small class="text-muted">{{ __('views.email_company.email_title_hint') }}</small>
    </div>
</div>

{{-- Información sobre la construcción del mensaje --}}
<div class="alert alert-info mb-3">
    <i class="fas fa-info-circle"></i>
    <strong>{{ __('views.email_company.message_construction') }}</strong>
    <p class="mb-0 mt-1">{{ __('views.email_company.message_construction_desc') }}</p>
    <ol class="mt-2 mb-0">
        <li><strong>Header</strong> - {{ __('views.email_company.header_description') }}</li>
        <li><strong>Body</strong> - {{ __('views.email_company.body_description') }}</li>
        <li><strong>Footer</strong> - {{ __('views.email_company.footer_description') }}</li>
    </ol>
</div>

<div class="row mb-3">
    <div class="col-md-4">
        <label for="headerConstructor" class="form-label">
            {{ __('views.email_company.header_constructor') }}
        </label>
        <div class="input-group">
            <select wire:model.live="headerConstructorId"
                    id="headerConstructor"
                    class="form-select @error('headerConstructorId') is-invalid @enderror">
                <option value="">{{ __('views.email_company.select_header') }}</option>
                @foreach($headerConstructors as $constructor)
                    <option value="{{ $constructor['id'] }}">
                        {{ $constructor['name'] }}
                    </option>
                @endforeach
            </select>
            @if($headerConstructorId)
                <button type="button"
                        class="btn btn-outline-primary"
                        onclick="window.open('{{ config('app.url') . '/admin/email/constructors/edit/' . $headerConstructorId }}', '_blank')"
                        title="{{ __('views.email_company.edit_constructor') }}">
                    <i class="fas fa-eye"></i>
                </button>
            @endif
        </div>

        @if($headerConstructorId)
            @php
                $selectedHeader = collect($headerConstructors)->firstWhere('id', $headerConstructorId);
            @endphp
            @if($selectedHeader && !empty($selectedHeader['description']))
                <div class="mt-2 p-2 bg-light rounded border-start border-primary border-3">
                    <small class="text-muted d-block">
                        <i class="fas fa-info-circle me-1 text-primary"></i>
                        <strong>{{ __('views.email_company.description') }}</strong>
                    </small>
                    <small class="text-secondary d-block mt-1">
                        {{ Str::limit($selectedHeader['description'], 100) }}
                    </small>
                </div>
            @endif
        @endif

        @error('headerConstructorId')
        <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-md-4">
        <label for="bodyConstructor" class="form-label">
            {{ __('views.email_company.body_constructor') }}
        </label>
        <div class="input-group">
            <select wire:model.live="bodyConstructorId"
                    id="bodyConstructor"
                    class="form-select @error('bodyConstructorId') is-invalid @enderror">
                <option value="">{{ __('views.email_company.select_body') }}</option>
                @foreach($bodyConstructors as $constructor)
                    <option value="{{ $constructor['id'] }}">
                        {{ $constructor['name'] }}
                    </option>
                @endforeach
            </select>
            @if($bodyConstructorId)
                <button type="button"
                        class="btn btn-outline-primary"
                        onclick="window.open('{{ config('app.url') . '/admin/email/constructors/edit/' . $bodyConstructorId }}', '_blank')"
                        title="{{ __('views.email_company.edit_constructor') }}">
                    <i class="fas fa-eye"></i>
                </button>
            @endif
        </div>

        @if($bodyConstructorId)
            @php
                $selectedBody = collect($bodyConstructors)->firstWhere('id', $bodyConstructorId);
            @endphp
            @if($selectedBody && !empty($selectedBody['description']))
                <div class="mt-2 p-2 bg-light rounded border-start border-success border-3">
                    <small class="text-muted d-block">
                        <i class="fas fa-info-circle me-1 text-success"></i>
                        <strong>{{ __('views.email_company.description') }}</strong>
                    </small>
                    <small class="text-secondary d-block mt-1">
                        {{ Str::limit($selectedBody['description'], 100) }}
                    </small>
                </div>
            @endif
        @endif

        @error('bodyConstructorId')
        <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-md-4">
        <label for="footerConstructor" class="form-label">
            {{ __('views.email_company.footer_constructor') }}
        </label>
        <div class="input-group">
            <select wire:model.live="footerConstructorId"
                    id="footerConstructor"
                    class="form-select @error('footerConstructorId') is-invalid @enderror">
                <option value="">{{ __('views.email_company.select_footer') }}</option>
                @foreach($footerConstructors as $constructor)
                    <option value="{{ $constructor['id'] }}">
                        {{ $constructor['name'] }}
                    </option>
                @endforeach
            </select>
            @if($footerConstructorId)
                <button type="button"
                        class="btn btn-outline-primary"
                        onclick="window.open('{{ config('app.url') . '/admin/email/constructors/edit/' . $footerConstructorId }}', '_blank')"
                        title="{{ __('views.email_company.edit_constructor') }}">
                    <i class="fas fa-eye"></i>
                </button>
            @endif
        </div>

        @if($footerConstructorId)
            @php
                $selectedFooter = collect($footerConstructors)->firstWhere('id', $footerConstructorId);
            @endphp
            @if($selectedFooter && !empty($selectedFooter['description']))
                <div class="mt-2 p-2 bg-light rounded border-start border-success border-3">
                    <small class="text-muted d-block">
                        <i class="fas fa-info-circle me-1 text-success"></i>
                        <strong>{{ __('views.email_company.description') }}</strong>
                    </small>
                    <small class="text-secondary d-block mt-1">
                        {{ Str::limit($selectedFooter['description'], 100) }}
                    </small>
                </div>
            @endif
        @endif

        @error('footerConstructorId')
        <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>
</div>

<div class="alert alert-secondary mt-3">
    <i class="fas fa-lightbulb"></i>
    <strong>{{ __('views.email_company.tip_title') }}</strong>
    <p class="mb-0 mt-1">
        {{ __('views.email_company.tip_text') }}
    </p>
</div>

<style>
    .border-start-primary {
        border-left-color: #0d6efd !important;
    }
    .border-start-success {
        border-left-color: #198754 !important;
    }
    .border-start-warning {
        border-left-color: #ffc107 !important;
    }
    .bg-light {
        background-color: #f8f9fa !important;
    }
    .mt-2 {
        margin-top: 0.5rem;
    }
    .p-2 {
        padding: 0.5rem;
    }
    .rounded {
        border-radius: 0.375rem;
    }
    .border-3 {
        border-width: 3px !important;
    }
</style>