@extends('agency.layouts.app')
@section('title', 'Satış Yönetimi')
@section('page_title', 'Satış Başlangıç Ekranı')

@push('styles')
    <style>
        /* ─── DESIGN TOKENS ──────────────────────────────────────────────── */
        :root {
            --cp: #2563eb;
            --cp-dark: #1e40af;
            --cp-light: #eff6ff;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --text-main: #0f172a;
            --text-muted: #64748b;
            --border: #e2e8f0;
            --surface: #f8fafc;
        }

        /* ─── HEADER ─────────────────────────────────────────────────────── */
        .sales-page-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 2rem;
            gap: 1.5rem;
            flex-wrap: wrap;
        }

        .sales-page-header-left {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .header-back-btn {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: #fff;
            border: 1px solid var(--border);
            color: var(--cp);
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
            transition: all 0.2s;
            flex-shrink: 0;
        }

        .header-back-btn:hover {
            background: var(--cp-light);
            border-color: var(--cp);
            transform: translateY(-1px);
        }

        .header-title-group h4 {
            font-size: 1.9rem;
            font-weight: 900;
            color: var(--text-main);
            margin: 0 0 0.2rem;
            letter-spacing: -0.5px;
            line-height: 1.1;
        }

        .header-title-group p {
            font-size: 0.875rem;
            color: var(--text-muted);
            margin: 0;
            font-weight: 500;
        }

        .header-new-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: linear-gradient(135deg, var(--cp) 0%, var(--cp-dark) 100%);
            color: #fff;
            border: none;
            border-radius: 12px;
            padding: 0.6rem 1.4rem;
            font-weight: 700;
            font-size: 0.85rem;
            text-decoration: none;
            box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
            transition: all 0.2s;
            margin-top: 0.5rem;
        }

        .header-new-btn:hover {
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(37, 99, 235, 0.45);
        }

        /* ─── FILTER BAR ─────────────────────────────────────────────────── */
        .filter-pill-bar {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 0.6rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }

        .period-toggle {
            display: flex;
            background: var(--surface);
            border-radius: 10px;
            padding: 3px;
            gap: 2px;
        }

        .period-btn {
            padding: 0.35rem 0.9rem;
            border-radius: 8px;
            font-size: 0.78rem;
            font-weight: 700;
            border: none;
            cursor: pointer;
            transition: all 0.2s;
            color: var(--text-muted);
            background: transparent;
        }

        .period-btn.active {
            background: #fff;
            color: var(--cp);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        }

        .period-btn:hover:not(.active) {
            color: var(--cp);
        }

        .filter-select {
            background: var(--surface);
            border: 1px solid transparent;
            border-radius: 10px;
            padding: 0.35rem 0.75rem;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-main);
            outline: none;
            cursor: pointer;
            transition: all 0.2s;
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 8px center;
            padding-right: 2rem;
        }

        .filter-select:hover,
        .filter-select:focus {
            border-color: rgba(37, 99, 235, 0.3);
            background-color: var(--cp-light);
            color: var(--cp);
        }

        .filter-divider {
            width: 1px;
            height: 22px;
            background: var(--border);
            margin: 0 2px;
        }



        /* ─── SECTION HEADER ─────────────────────────────────────────────── */
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.25rem;
        }

        .section-title-wrap {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .section-title-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: var(--cp-light);
            color: var(--cp);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
        }

        .section-title {
            font-size: 1.15rem;
            font-weight: 800;
            color: var(--text-main);
            margin: 0;
        }

        /* ─── LIST VIEW TABLE ────────────────────────────────────────────── */
        .res-card {
            background: #fff;
            border-radius: 20px;
            border: 1px solid var(--border);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            overflow: hidden;
        }

        /* Filter toolbar inside list */
        .tb-bar {
            background: var(--surface);
            border-bottom: 1px solid var(--border);
            padding: 1rem 1.25rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .tb-search {
            position: relative;
            flex: 1;
            min-width: 200px;
        }

        .tb-search i {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            font-size: 0.85rem;
            pointer-events: none;
        }

        .tb-search input {
            width: 100%;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 0.5rem 0.75rem 0.5rem 2.2rem;
            font-size: 0.85rem;
            font-weight: 500;
            outline: none;
            transition: border-color 0.2s;
        }

        .tb-search input:focus {
            border-color: var(--cp);
        }

        .tb-filter-select {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 0.5rem 2rem 0.5rem 0.75rem;
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--text-main);
            outline: none;
            cursor: pointer;
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 8px center;
            transition: border-color 0.2s;
        }

        .tb-filter-select:focus {
            border-color: var(--cp);
        }

        /* Table */
        .res-table {
            margin: 0;
        }

        .res-table thead tr th {
            background: var(--surface);
            padding: 0.9rem 1rem;
            border-bottom: 1px solid var(--border);
            font-size: 0.72rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: var(--text-muted);
            white-space: nowrap;
        }

        .res-table tbody tr {
            border-bottom: 1px solid #f8fafc;
            transition: background 0.15s;
            cursor: pointer;
        }

        .res-table tbody tr:last-child {
            border-bottom: none;
        }

        .res-table tbody tr:hover {
            background: #f0f7ff;
        }

        .res-table tbody tr td {
            padding: 0.9rem 1rem;
            vertical-align: middle;
        }

        /* Customer avatar */
        .cust-avatar {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            background: var(--cp-light);
            color: var(--cp);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 0.85rem;
            flex-shrink: 0;
            letter-spacing: -0.5px;
        }

        /* Status / Service badges */
        .svc-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 4px 10px;
            border-radius: 7px;
            font-size: 0.73rem;
            font-weight: 700;
            background: rgba(99, 102, 241, 0.08);
            color: #6366f1;
            border: 1px solid rgba(99, 102, 241, 0.12);
        }

        .sale-status-badge {
            display: inline-block;
            padding: 4px 11px;
            border-radius: 8px;
            font-size: 0.73rem;
            font-weight: 700;
        }

        /* Action buttons */
        .tbl-action-btn {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: #fff;
            color: var(--text-muted);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.78rem;
            text-decoration: none;
            transition: all 0.2s;
        }

        .tbl-action-btn:hover {
            background: var(--cp-light);
            color: var(--cp);
            border-color: rgba(37, 99, 235, 0.25);
        }

        .tbl-action-btn.eye:hover {
            color: var(--cp);
        }

        .tbl-action-btn.edit:hover {
            color: #8b5cf6;
            background: #f5f3ff;
            border-color: rgba(139, 92, 246, 0.25);
        }

        /* Pagination */
        .pagination-wrap {
            padding: 1rem 1.25rem;
            border-top: 1px solid var(--border);
        }

        /* Empty state */
        .empty-state {
            padding: 4rem 2rem;
            text-align: center;
        }

        .empty-state-icon {
            width: 80px;
            height: 80px;
            border-radius: 24px;
            background: var(--surface);
            color: #cbd5e1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            margin: 0 auto 1.25rem;
        }

        .empty-state h5 {
            font-weight: 700;
            color: var(--text-main);
            margin-bottom: 0.4rem;
        }

        .empty-state p {
            color: var(--text-muted);
            font-size: 0.875rem;
            margin: 0;
        }

        /* ─── ALERT ──────────────────────────────────────────────────────── */
        .toast-alert {
            border-radius: 16px;
            border: none;
            padding: 1rem 1.5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
            margin-bottom: 1.5rem;
        }

        .toast-alert-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        /* ─── FADE-IN ANIMATION ──────────────────────────────────────────── */
        .fade-in-up {
            animation: fadeInUp 0.35s ease both;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(12px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid py-4">

        {{-- ═══ NAV TABS ═══════════════════════════════════════════════════════ --}}
        @include('agency.sales.partials.sales_nav_tabs')

        {{-- ═══ HEADER ═══════════════════════════════════════════════════════ --}}
        <div class="sales-page-header fade-in-up">
            <div class="sales-page-header-left">
                @if($view === 'list')
                    <a href="{{ route('agency.sales.index', request()->only(['year', 'month', 'period', 'target_type'])) }}"
                        class="header-back-btn">
                        <i class="fas fa-chevron-left"></i>
                    </a>
                @endif
                <div class="header-title-group">
                    <h4>
                        @if($view === 'list')
                            @php $pt = $productTypes->find(request('product_type_id')); @endphp
                            {{ $pt ? $pt->name . ' Satışları' : 'Satış Listesi' }}
                        @else
                            Satış Başlangıç Ekranı
                        @endif
                    </h4>
                    <p>
                        @if($view === 'list')
                            Seçili ürün grubuna ait tüm satış hareketleri
                        @else
                            Tüm ciro, hedef ve satış verilerinizi yönetin
                        @endif
                    </p>
                    @if($view === 'list')
                        <a href="{{ route('agency.sales.create', ['product_type_id' => request('product_type_id')]) }}"
                            class="header-new-btn">
                            <i class="fas fa-plus"></i>
                            Yeni {{ $pt ? $pt->name : 'Satış' }} Ekle
                        </a>
                    @else
                        <button type="button" class="header-new-btn" onclick="openQuickView('{{ route('agency.sales.quick-create') }}')">
                            <i class="fas fa-plus"></i>
                            Satış Oluştur
                        </button>
                    @endif
                </div>
            </div>

            {{-- Filter Bar (only on dashboard view) --}}
            @if($view !== 'list')
            <form action="" method="GET" id="filterForm" class="filter-pill-bar">
                <input type="hidden" name="view" value="{{ $view }}">
                @if(request()->has('product_type_id'))
                    <input type="hidden" name="product_type_id" value="{{ request('product_type_id') }}">
                @endif

                {{-- Period Toggle --}}
                <div class="period-toggle">
                    <button type="submit" name="period" value="year"
                        class="period-btn {{ $targetPeriod === 'year' ? 'active' : '' }}">
                        <i class="fas fa-calendar-alt me-1"></i> Yıllık
                    </button>
                    <button type="submit" name="period" value="month"
                        class="period-btn {{ $targetPeriod === 'month' ? 'active' : '' }}">
                        <i class="fas fa-calendar-day me-1"></i> Aylık
                    </button>
                </div>

                @if($targetPeriod === 'month')
                    <select name="month" class="filter-select" onchange="this.form.submit()" style="width: 125px;">
                        @foreach(range(1, 12) as $m)
                            <option value="{{ $m }}" {{ $currentMonth == $m ? 'selected' : '' }}>
                                {{ \Carbon\Carbon::create(null, $m)->translatedFormat('F') }}
                            </option>
                        @endforeach
                    </select>
                @endif

                <select name="year" class="filter-select" onchange="this.form.submit()" style="width: 90px;">
                    @for($y = date('Y') + 1; $y >= 2024; $y--)
                        <option value="{{ $y }}" {{ $currentYear == $y ? 'selected' : '' }}>{{ $y }}</option>
                    @endfor
                </select>

                <div class="filter-divider"></div>

                <select name="target_type" class="filter-select" onchange="this.form.submit()" style="width: 130px;">
                    <option value="revenue" {{ $targetType === 'revenue' ? 'selected' : '' }}>💰 Ciro Bazlı</option>
                    <option value="quantity" {{ $targetType === 'quantity' ? 'selected' : '' }}>📦 Adet Bazlı</option>
                </select>
            </form>
            @endif
        </div>

        {{-- ═══ FLASH MESSAGES ════════════════════════════════════════════════ --}}
        @if(session('success'))
            <div class="toast-alert alert-success fade-in-up" style="background: #f0fdf4;">
                <div class="toast-alert-icon" style="background: rgba(16,185,129,0.15);">
                    <i class="fas fa-check text-success"></i>
                </div>
                <div style="font-weight: 600; color: #065f46; flex:1;">{{ session('success') }}</div>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif
        @if(session('error'))
            <div class="toast-alert alert-danger fade-in-up" style="background: #fef2f2;">
                <div class="toast-alert-icon" style="background: rgba(239,68,68,0.15);">
                    <i class="fas fa-times text-danger"></i>
                </div>
                <div style="font-weight: 600; color: #991b1b; flex:1;">{{ session('error') }}</div>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif



        {{-- ═══ DYNAMIC VIEW CONTENT ══════════════════════════════════════════ --}}
        <div class="fade-in-up" style="animation-delay:0.1s">
            @if($view === 'list')
                @include('agency.sales.partials.list_view')
            @else
                @include('agency.sales.partials.target_section')
            @endif
        </div>

        @if($view !== 'list')
            {{-- Hedef Ayarları Modalı --}}
            @include('agency.sales.partials.target_modal')
        @endif

    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Row click → quick-view / show
            document.querySelectorAll('.sale-row').forEach(row => {
                row.addEventListener('click', function (e) {
                    if (e.target.closest('a') || e.target.closest('button')) return;
                    const id = this.dataset.id;
                    if (id && typeof openSaleDrawer === 'function') {
                        openSaleDrawer(id);
                    } else if (id) {
                        window.location.href = `/agency/sales/${id}`;
                    }
                });
            });
        });
    </script>
@endpush