@extends('agency.layouts.app')
@section('title', 'İptal ve İadeler')
@section('page_title', 'İptal ve İadeler')

@push('styles')
    <style>
        :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;
        }

        .page-header { margin-bottom: 1.5rem }
        .page-header h4 { font-size:1.6rem; font-weight:900; color:var(--text-main); margin:0 0 0.2rem; letter-spacing:-0.5px }
        .page-header p { font-size:0.85rem; color:var(--text-muted); margin:0; font-weight:500 }

        .res-card { background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.04) }
        .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) }
        .tb-reset-btn { width:36px; height:36px; border-radius:10px; border:1px solid var(--border); background:#fff; color:var(--danger); display:flex; align-items:center; justify-content:center; text-decoration:none; transition:all 0.2s }
        .tb-reset-btn:hover { background:#fef2f2; border-color:#fecaca }

        .res-table { width:100%; border-collapse:collapse }
        .res-table thead th { padding:0.75rem 1rem; font-size:0.72rem; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); border-bottom:1px solid var(--border); background:var(--surface) }
        .res-table tbody tr { border-bottom:1px solid #f8fafc; transition:background 0.15s }
        .res-table tbody tr:hover { background:#f0f7ff }
        .res-table tbody tr td { padding:0.9rem 1rem; vertical-align:middle }
        .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 }
        .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 }
        .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) }
        .empty-state { text-align:center; padding:3rem }
        .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 }

        .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">

        @include('agency.sales.partials.sales_nav_tabs')

        <div class="page-header fade-in-up">
            <h4><i class="fas fa-undo me-2" style="color:#ef4444"></i>İptal ve İadeler</h4>
            <p>İptal edilen veya iade yapılan satış kayıtları</p>
        </div>

        <div class="fade-in-up" style="animation-delay:0.1s">
            @php
                $statusFilters = [
                    'cancelled' => 'İptal Edildi',
                    'refunded' => 'İade Edildi',
                ];
            @endphp
            @include('agency.sales.partials.shared_list', ['statusFilters' => $statusFilters])
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            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