@extends('agency.layouts.app')

@section('title', 'Yeni Sözleşme Ekle')

@push('styles')
<style>
    .settings-icon-wrapper {
        width: 54px;
        height: 54px;
        background: white;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
        box-shadow: 0 10px 25px rgba(124, 58, 237, 0.1);
    }
    .fw-800 { font-weight: 800; }
    .header-divider {
        height: 3px;
        width: 60px;
        background: linear-gradient(to right, #7c3aed, transparent);
        border-radius: 10px;
    }
</style>
@endpush

@section('content')
<div class="container-fluid py-4">
    <!-- Header Section -->
    <div class="row mb-5">
        <div class="col-12">
            <div class="d-flex align-items-center gap-3 mb-2">
                <a href="{{ route('agency.settings.contracts.index') }}" class="btn btn-outline-secondary btn-sm px-3 py-2" style="border-radius: 12px; border-color: #e2e8f0; font-weight: 600;">
                    <i class="fas fa-arrow-left me-1"></i> Sözleşmelere Dön
                </a>
                <div class="settings-icon-wrapper ms-2" style="background-color: rgba(124, 58, 237, 0.1); color: #7c3aed;">
                    <i class="fas fa-plus"></i>
                </div>
                <div>
                    <h1 class="h3 fw-800 text-dark mb-0">Yeni Sözleşme Ekle</h1>
                    <p class="text-muted mb-0">Acenteniz için özel yasal sözleşme veya web sayfası politikası tanımlayın.</p>
                </div>
            </div>
            <div class="header-divider mt-4"></div>
        </div>
    </div>

    <!-- Form Container -->
    <div class="row g-4 justify-content-center">
        <div class="col-xl-9 col-lg-10">
            <div class="settings-card shadow-sm" style="background: white; border-radius: 20px; border: 1px solid rgba(0,0,0,0.03);">
                <div class="card-body p-4">
                    <form action="{{ route('agency.settings.contracts.store') }}" method="POST" enctype="multipart/form-data" id="contractForm">
                        @csrf

                        <!-- Logo / Header Image -->
                        <div class="mb-4">
                            <label class="form-label small fw-bold text-muted mb-1" style="font-size:0.75rem; text-transform:uppercase;">Sözleşme Logosu / Görseli (İsteğe Bağlı)</label>
                            <div class="d-flex align-items-center gap-3">
                                <div class="file-upload-preview border-dashed d-flex align-items-center justify-content-center" id="logoPreviewContainer" style="width: 100px; height: 60px; border-radius: 8px; border: 2px dashed #cbd5e1; background: #f8fafc; overflow: hidden; position: relative;">
                                    <span class="text-muted small" id="logoPreviewPlaceholder"><i class="fas fa-image fs-4"></i></span>
                                    <img id="logoPreview" src="" alt="Görsel Önizleme" class="img-fluid" style="display: none; height: 100%; width: 100%; object-fit: contain;">
                                </div>
                                <div class="flex-grow-1">
                                    <input type="file" name="logo" id="logoInput" class="form-control @error('logo') is-invalid @enderror" accept="image/*" style="border-radius: 8px;">
                                    <span class="text-muted small d-block mt-1">Önerilen boyut: Genişlik maksimum 300px. Maksimum 2MB limit.</span>
                                    @error('logo')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Çok Dilli Başlık + İçerik Editörü -->
                        @include('agency.settings.contracts.partials.multilang-editor', [
                            'contract' => null,
                            'languages' => $languages,
                            'primaryLanguage' => $primaryLanguage,
                            'translationsData' => [],
                        ])

                        <!-- Active Switch -->
                        <div class="form-check form-switch mb-4 mt-2">
                            <input class="form-check-input" type="checkbox" name="is_active" id="is_active" checked value="1" style="cursor: pointer; width: 2em; height: 1.1em;">
                            <label class="form-check-label fw-bold text-dark small ms-1" for="is_active" style="cursor: pointer;">Bu Sözleşmeyi Aktifleştir ve Yayınla</label>
                        </div>

                        <!-- Form Actions -->
                        <div class="d-flex justify-content-end gap-3 pt-3 border-top" style="border-top-color: rgba(0,0,0,0.04) !important;">
                            <a href="{{ route('agency.settings.contracts.index') }}" class="btn btn-light fw-bold px-4 py-2" style="border-radius: 10px;">Vazgeç</a>
                            <button type="submit" class="btn btn-primary fw-bold px-5 py-2" style="border-radius: 10px; background: linear-gradient(135deg, #7c3aed, #6d28d9); border: none;">
                                <i class="fas fa-save me-1"></i> Sözleşmeyi Kaydet
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Preview Modal -->
<div class="modal fade" id="previewModal" tabindex="-1" aria-labelledby="previewModalLabel" aria-hidden="true" style="z-index: 1070;">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content" style="border-radius: 20px; border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.15);">
            <div class="modal-header border-0 bg-light py-3" style="border-radius: 20px 20px 0 0;">
                <h5 class="modal-title fw-bold text-dark" id="previewModalLabel"><i class="fas fa-eye text-primary me-2"></i>Sözleşme Ön İzlemesi</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4" style="max-height: 70vh; overflow-y: auto;">
                <div class="text-center mb-4" id="modalLogoWrapper" style="display: none;">
                    <img id="modalLogo" src="" alt="Logo" style="max-height: 60px; object-fit: contain;">
                </div>
                <h3 class="fw-bold text-dark text-center mb-4" id="modalTitle">Sözleşme Başlığı</h3>
                <div class="contract-rendered-content" id="modalContent" style="line-height: 1.6; color: #334155;">
                    <!-- Rendered HTML will go here -->
                </div>
            </div>
            <div class="modal-footer border-0 bg-light py-2" style="border-radius: 0 0 20px 20px;">
                <button type="button" class="btn btn-sm btn-secondary fw-bold px-3 py-2" data-bs-dismiss="modal" style="border-radius: 8px;">Kapat</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Logo / görsel önizleme (içerik editörü partial içinde yönetilir)
    const logoInput = document.getElementById('logoInput');
    const logoPreview = document.getElementById('logoPreview');
    const logoPreviewPlaceholder = document.getElementById('logoPreviewPlaceholder');

    logoInput.addEventListener('change', function() {
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                logoPreview.src = e.target.result;
                logoPreview.style.display = 'block';
                logoPreviewPlaceholder.style.display = 'none';
            }
            reader.readAsDataURL(file);
        } else {
            logoPreview.src = '';
            logoPreview.style.display = 'none';
            logoPreviewPlaceholder.style.display = 'block';
        }
    });
</script>
@endpush