@extends('agency.layouts.app')

@section('title', 'Sözleşme Yönetimi')

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastr@2.1.4/build/toastr.min.css">
<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;
    }
    .stats-mini-card {
        background: white;
        border: 1px solid rgba(0,0,0,0.03);
        border-radius: 12px;
        padding: 10px 18px;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.01), 0 2px 4px -1px rgba(0,0,0,0.01);
    }
    .settings-card {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .settings-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.05) !important;
        border-color: rgba(124, 58, 237, 0.15) !important;
    }
    .contract-logo-preview {
        height: 45px;
        display: flex;
        align-items: center;
    }
</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') }}" 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> Ayarlara Dön
                </a>
                <div class="settings-icon-wrapper ms-2">
                    <i class="fas fa-file-contract text-primary"></i>
                </div>
                <div>
                    <h1 class="h3 fw-800 text-dark mb-0">Sözleşme Yönetimi</h1>
                    <p class="text-muted mb-0">Acentenizin internet sitesinde yayınlanacak yasal sözleşmeleri ve politikaları yönetin.</p>
                </div>
            </div>
            <div class="header-divider mt-4"></div>
        </div>
    </div>

    <!-- Stats & Action Toolbar -->
    <div class="row g-4 mb-4">
        <div class="col-12 d-flex flex-wrap justify-content-between align-items-center gap-3">
            <div class="d-flex align-items-center gap-4">
                <div class="stats-mini-card">
                    <span class="text-muted small d-block">Toplam Sözleşme</span>
                    <span class="fw-bold fs-5 text-dark">{{ $stats['total'] }}</span>
                </div>
                <div class="stats-mini-card">
                    <span class="text-muted small d-block">Aktif Sözleşme</span>
                    <span class="fw-bold fs-5 text-success">{{ $stats['active'] }}</span>
                </div>
            </div>

            <div class="d-flex align-items-center gap-2">
                <div class="input-group input-group-sm shadow-sm" style="border-radius: 10px; overflow: hidden; border: 1px solid #e2e8f0; width: 250px;">
                    <span class="input-group-text border-0 bg-white"><i class="fas fa-search text-muted"></i></span>
                    <input type="text" class="form-control border-0 ps-0" id="contractSearch" placeholder="Sözleşme ara..." style="outline: none; box-shadow: none;">
                </div>
                <a href="{{ route('agency.settings.contracts.create') }}" class="btn btn-sm btn-primary fw-bold py-2 px-3 shadow-sm" style="border-radius: 10px; background: linear-gradient(135deg, #7c3aed, #6d28d9); border: none;">
                    <i class="fas fa-plus me-1"></i> Yeni Sözleşme Ekle
                </a>
            </div>
        </div>
    </div>

    <!-- Contracts Listing -->
    <div class="row g-4" id="contractsGrid">
        @forelse($contracts as $contract)
            <div class="col-xl-4 col-md-6 contract-card-wrapper" data-title="{{ strtolower($contract->title) }}">
                <div class="settings-card shadow-sm h-100" style="background: white; border-radius: 20px; border: 1px solid rgba(0,0,0,0.03);">
                    <div class="card-body p-4 d-flex flex-column justify-content-between">
                        <div>
                            <!-- Header Info -->
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div class="contract-logo-preview">
                                    @if($contract->logo)
                                        <img src="{{ asset('storage/' . $contract->logo) }}" alt="Logo" class="img-fluid rounded" style="max-height: 40px; object-fit: contain;">
                                    @else
                                        <div class="avatar-circle-sm bg-soft-primary text-primary" style="background-color: rgba(124, 58, 237, 0.1); color: #7c3aed; width: 45px; height: 45px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem;">
                                            <i class="fas fa-file-alt"></i>
                                        </div>
                                    @endif
                                </div>
                                <div class="d-flex gap-1">
                                    <span class="badge fw-bold px-2 py-1" style="font-size: 0.65rem; border-radius: 6px; background-color: rgba(124, 58, 237, 0.1); color: #7c3aed;" title="Toplam dil sayısı (ana metin + çeviriler)">
                                        <i class="fas fa-language me-1"></i>{{ 1 + $contract->translations_count }} Dil
                                    </span>
                                    @if($contract->is_system)
                                        <span class="badge bg-soft-secondary text-secondary fw-bold px-2 py-1" style="font-size: 0.65rem; border-radius: 6px; background-color: rgba(107, 114, 128, 0.1);">Sistem</span>
                                    @else
                                        <span class="badge bg-soft-info text-info fw-bold px-2 py-1" style="font-size: 0.65rem; border-radius: 6px; background-color: rgba(14, 165, 233, 0.1);">Özel</span>
                                    @endif
                                </div>
                            </div>

                            <!-- Title & Slug -->
                            <h4 class="fw-bold text-dark mb-1" style="font-size: 1.1rem;">{{ $contract->title }}</h4>
                            <span class="text-muted small d-block mb-3">Slug: <code class="text-secondary">{{ $contract->slug }}</code></span>
                            
                            <!-- Snippet of content -->
                            <p class="text-muted small mb-4" style="display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; height: 4.5em;">
                                {{ strip_tags($contract->content) }}
                            </p>
                        </div>

                        <!-- Footer Action & Status Toggle -->
                        <div class="d-flex justify-content-between align-items-center pt-3 border-top" style="border-top-color: rgba(0,0,0,0.04) !important;">
                            <!-- Active Status Toggle -->
                            <div class="form-check form-switch mb-0">
                                <input class="form-check-input status-toggle-btn" type="checkbox" role="switch" 
                                       data-id="{{ $contract->id }}" 
                                       id="toggle_active_{{ $contract->id }}" 
                                       {{ $contract->is_active ? 'checked' : '' }} 
                                       style="cursor: pointer; width: 1.8em; height: 1em;">
                                <label class="form-check-label small text-muted ms-1" for="toggle_active_{{ $contract->id }}">
                                    {{ $contract->is_active ? 'Aktif' : 'Pasif' }}
                                </label>
                            </div>

                            <!-- Actions -->
                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-sm btn-outline-info px-2.5 py-1" onclick="showSavedPreview({{ json_encode($contract->title) }}, {{ json_encode($contract->content) }}, {{ json_encode($contract->logo ? asset('storage/' . $contract->logo) : null) }})" style="border-radius: 8px;" title="Ön İzle">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <a href="{{ route('agency.settings.contracts.edit', $contract->id) }}" class="btn btn-sm btn-outline-primary px-2.5 py-1" style="border-radius: 8px;" title="Düzenle">
                                    <i class="fas fa-edit"></i>
                                </a>
                                @if(!$contract->is_system)
                                    <button type="button" class="btn btn-sm btn-outline-danger px-2.5 py-1" onclick="deleteContract({{ $contract->id }})" style="border-radius: 8px;" title="Sil">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12 text-center text-muted py-5">
                <i class="fas fa-file-signature d-block fs-1 mb-2 text-light"></i>
                Henüz bir sözleşme oluşturulmamış. Yeni bir tane ekleyerek başlayın.
            </div>
        @endforelse
    </div>
</div>

<!-- Hidden Delete Form -->
<form id="delete-contract-form" action="" method="POST" style="display: none;">
    @csrf
    @method('DELETE')
</form>


<!-- 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 src="https://cdn.jsdelivr.net/npm/toastr@2.1.4/toastr.min.js"></script>
<script>
    // Live Search
    document.getElementById('contractSearch').addEventListener('input', function() {
        const query = this.value.toLowerCase().trim();
        const cards = document.querySelectorAll('.contract-card-wrapper');
        cards.forEach(card => {
            const title = card.getAttribute('data-title');
            if (title.includes(query)) {
                card.style.setProperty('display', '', 'important');
            } else {
                card.style.setProperty('display', 'none', 'important');
            }
        });
    });

    // Delete Contract Confirmation
    function deleteContract(id) {
        Swal.fire({
            title: 'Emin misiniz?',
            text: "Bu sözleşmeyi kalıcı olarak silmek istediğinize emin misiniz?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#ef4444',
            cancelButtonColor: '#6b7280',
            confirmButtonText: 'Evet, Sil!',
            cancelButtonText: 'Vazgeç'
        }).then((result) => {
            if (result.isConfirmed) {
                const form = document.getElementById('delete-contract-form');
                form.action = `/agency/settings/contracts/${id}`;
                form.submit();
            }
        });
    }

    // Toggle Active AJAX
    document.querySelectorAll('.status-toggle-btn').forEach(toggle => {
        toggle.addEventListener('change', function() {
            const id = this.getAttribute('data-id');
            const label = this.nextElementSibling;
            
            fetch(`/agency/settings/contracts/${id}/toggle-active`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    label.textContent = data.is_active ? 'Aktif' : 'Pasif';
                    if (typeof toastr !== 'undefined') {
                        toastr.success(data.message || 'Durum güncellendi.');
                    } else {
                        Swal.fire('Başarılı', data.message || 'Durum güncellendi.', 'success');
                    }
                } else {
                    this.checked = !this.checked;
                    if (typeof toastr !== 'undefined') {
                        toastr.error(data.message || 'Bir hata oluştu.');
                    } else {
                        Swal.fire('Hata', data.message || 'Bir hata oluştu.', 'error');
                    }
                }
            })
            .catch(err => {
                this.checked = !this.checked;
                if (typeof toastr !== 'undefined') {
                    toastr.error('İşlem başarısız oldu.');
                } else {
                    Swal.fire('Hata', 'İşlem başarısız oldu.', 'error');
                }
                console.error(err);
            });
        });
    });
    // Preview Contract
    function showSavedPreview(title, content, logoUrl) {
        document.getElementById('modalTitle').textContent = title;
        const logoWrapper = document.getElementById('modalLogoWrapper');
        const logoImg = document.getElementById('modalLogo');
        if (logoUrl) {
            logoImg.src = logoUrl;
            logoWrapper.style.display = 'block';
        } else {
            logoWrapper.style.display = 'none';
        }
        document.getElementById('modalContent').innerHTML = content || '<p class="text-muted text-center">İçerik boş.</p>';
        
        const myModal = new bootstrap.Modal(document.getElementById('previewModal'));
        myModal.show();
    }
</script>
@endpush