@extends('agency.layouts.app')
@section('title', 'Satış Detayı – ' . $sale->sale_code)
@section('page_title', 'Satış Detayı')

@push('styles')
     <style>
          :root {
               --cp: #2563eb;
               --cp-light: #eff6ff;
               --text-main: #0f172a;
               --text-muted: #64748b;
               --border: #f1f5f9;
          }

          .det-wrap {
               display: grid;
               grid-template-columns: 1fr 320px;
               gap: 1.5rem;
               align-items: start;
          }

          @media(max-width:1000px) {
               .det-wrap {
                    grid-template-columns: 1fr;
               }
          }

          .det-card {
               background: #fff;
               border-radius: 16px;
               border: 1px solid var(--border);
               box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
               margin-bottom: 1.25rem;
               overflow: hidden;
          }

          .dch {
               display: flex;
               align-items: center;
               gap: .85rem;
               padding: 1rem 1.5rem;
               border-bottom: 1px solid var(--border);
               background: linear-gradient(to right, #fafbff, #fff);
          }

          .dch-icon {
               width: 38px;
               height: 38px;
               border-radius: 10px;
               display: flex;
               align-items: center;
               justify-content: center;
               font-size: 15px;
               flex-shrink: 0;
          }

          .dch-title {
               font-size: .9rem;
               font-weight: 700;
               color: var(--text-main);
          }

          .dcb {
               padding: 1.5rem;
          }

          .info-grid {
               display: grid;
               grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
               gap: 1rem;
          }

          .ii-label {
               font-size: .72rem;
               font-weight: 700;
               text-transform: uppercase;
               letter-spacing: .5px;
               color: #94a3b8;
               margin-bottom: 4px;
          }

          .ii-val {
               font-size: .88rem;
               color: var(--text-main);
               font-weight: 500;
          }

          .hero {
               background: linear-gradient(135deg, var(--cp) 0%, #1e40af 60%, #0369a1 100%);
               padding: 2rem 2rem 1.5rem;
               border-radius: 16px;
               color: #fff;
               margin-bottom: 1.5rem;
               position: relative;
               overflow: hidden;
          }

          .hero::before {
               content: '';
               position: absolute;
               top: -40px;
               right: -40px;
               width: 160px;
               height: 160px;
               background: rgba(255, 255, 255, .08);
               border-radius: 50%;
          }

          .hero::after {
               content: '';
               position: absolute;
               bottom: -30px;
               left: -20px;
               width: 100px;
               height: 100px;
               background: rgba(255, 255, 255, .05);
               border-radius: 50%;
          }

          .hero-code {
               font-size: .78rem;
               opacity: .75;
               font-family: monospace;
               margin-bottom: .4rem;
          }

          .hero-type {
               font-size: .82rem;
               font-weight: 700;
               background: rgba(255, 255, 255, .2);
               padding: 3px 12px;
               border-radius: 20px;
               display: inline-block;
               margin-bottom: .75rem;
          }

          .hero-product {
               font-size: 1.2rem;
               font-weight: 800;
               margin-bottom: .4rem;
          }

          .hero-meta {
               font-size: .82rem;
               opacity: .8;
               display: flex;
               gap: 1.5rem;
               flex-wrap: wrap;
          }

          .badge {
               display: inline-flex;
               align-items: center;
               padding: 3px 10px;
               border-radius: 20px;
               font-size: .73rem;
               font-weight: 700;
          }

          .b-potential { background: #f1f5f9; color: #64748b; }
          .b-offer_sent { background: #dbeafe; color: #1d4ed8; }
          .b-revised { background: #ede9fe; color: #7c3aed; }
          .b-confirmed { background: #d1fae5; color: #065f46; }
          .b-in_progress { background: #e0f2fe; color: #0369a1; }
          .b-completed { background: #f0fdf4; color: #166534; border: 1px solid #dcfce7; }
          .b-cancelled { background: #fee2e2; color: #991b1b; }
          .b-refunded { background: #ffedd5; color: #9a3412; }

          .bp-unpaid {
               background: #fee2e2;
               color: #b91c1c;
          }

          .bp-partial {
               background: #fef3c7;
               color: #b45309;
          }

          .bp-paid {
               background: #d1fae5;
               color: #059669;
          }

          .price-box {
               background: linear-gradient(135deg, #2563eb, #1e40af);
               border-radius: 14px;
               color: #fff;
               padding: 1.25rem;
          }

          .pr-row {
               display: flex;
               justify-content: space-between;
               font-size: .84rem;
               margin-bottom: .3rem;
          }

          .pr-total {
               font-size: 1.15rem;
               font-weight: 800;
          }

          .pr-div {
               border: none;
               border-top: 1px solid rgba(255, 255, 255, .2);
               margin: .65rem 0;
          }

          .side-btn {
               width: 100%;
               border: none;
               border-radius: 12px;
               padding: .75rem 1rem;
               font-size: .84rem;
               font-weight: 600;
               cursor: pointer;
               display: flex;
               align-items: center;
               gap: .75rem;
               margin-bottom: .6rem;
               text-decoration: none;
               transition: all .15s;
          }

          .side-btn:hover {
               filter: brightness(.93);
               transform: translateX(2px);
          }

          .sb-edit {
               background: #eff6ff;
               color: #2563eb;
          }

          .sb-confirm {
               background: #d1fae5;
               color: #059669;
          }

          .sb-cancel {
               background: #fee2e2;
               color: #dc2626;
          }

          .sb-back {
               background: #f1f5f9;
               color: #475569;
          }

          .sb-pay {
               background: #fef3c7;
               color: #b45309;
          }
     </style>
@endpush

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

          {{-- Breadcrumb --}}
          <div class="d-flex align-items-center gap-2 mb-3" style="font-size:.83rem;color:#94a3b8">
               <a href="{{ route('agency.sales.index') }}" style="color:#2563eb;text-decoration:none;font-weight:600"><i
                         class="fas fa-shopping-bag me-1"></i>Satışlar</a>
               <i class="fas fa-chevron-right" style="font-size:10px"></i>
               <span style="color:#0f172a;font-weight:600">{{ $sale->sale_code }}</span>
          </div>

          @if(session('success'))
               <div class="alert alert-success border-0 mb-3" style="border-radius:12px;font-size:.85rem"><i
                         class="fas fa-check-circle me-2"></i>{{ session('success') }}</div>
          @endif
          @if(session('error'))
               <div class="alert alert-danger border-0 mb-3" style="border-radius:12px;font-size:.85rem"><i
                         class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}</div>
          @endif

          {{-- Hero --}}
          <div class="hero">
               <div class="hero-code">📋 {{ $sale->sale_code }}</div>
               <div class="hero-type">{{ $sale->productType?->name ?? 'Manuel Satış' }}</div>
               <div class="hero-product">{{ $sale->reservable?->name ?? ($sale->product?->name ?? 'Ürün Seçilmemiş') }}
               </div>
               <div class="hero-meta">
                    <span><i class="fas fa-calendar me-1"></i>
                         {{ $sale->start_date->format('d.m.Y') }}{{ $sale->end_date ? ' – ' . $sale->end_date->format('d.m.Y') : '' }}</span>
                    <span><i class="fas fa-users me-1"></i> {{ $sale->total_participants }} Kişi</span>
                    @if($sale->assignedAgent)
                         <span><i class="fas fa-user-tie me-1"></i> {{ $sale->assignedAgent->full_name }}</span>
                    @endif
               </div>
               <div class="mt-3 d-flex gap-2 flex-wrap">
                    <span class="badge b-{{ $sale->status }}">{{ $sale->status_label }}</span>
                    <span class="badge bp-{{ $sale->payment_status }}">{{ $sale->payment_status_label }}</span>
                    <span class="badge"
                         style="background:rgba(255,255,255,.2);color:#fff;font-size:.72rem">{{ $sale->source }}</span>
               </div>
          </div>

          <div class="det-wrap">
               <div>

                    {{-- Ürün / Hizmet Bilgileri --}}
                    <div class="det-card">
                         <div class="dch">
                              <div class="dch-icon" style="background:#eff6ff;color:#2563eb"><i class="fas fa-box"></i>
                              </div>
                              <div class="dch-title">Ürün / Hizmet Bilgileri</div>
                         </div>
                         <div class="dcb">
                              <div class="info-grid">
                                   <div>
                                        <div class="ii-label">Hizmet Türü</div>
                                        <div class="ii-val">
                                             <span class="badge" style="background:var(--cp-light);color:var(--cp);padding:4px 10px">
                                                  {{ $sale->productType?->name ?? 'Manuel Giriş' }}
                                             </span>
                                        </div>
                                   </div>
                                   <div>
                                        <div class="ii-label">Ürün / Paket Adı</div>
                                        <div class="ii-val" style="font-weight:700">{{ $sale->reservable?->name ?? ($sale->product?->name ?? '—') }}</div>
                                   </div>
                                   @if($sale->product?->code)
                                   <div>
                                        <div class="ii-label">Ürün Kodu</div>
                                        <div class="ii-val">{{ $sale->product->code }}</div>
                                   </div>
                                   @endif
                                   <div>
                                        <div class="ii-label">Birim Fiyat</div>
                                        <div class="ii-val">{{ number_format($sale->unit_price, 2) }} {{ $sale->currency }}</div>
                                   </div>
                              </div>
                         </div>
                    </div>

                    {{-- Müşteri Bilgileri --}}
                    <div class="det-card">
                         <div class="dch">
                              <div class="dch-icon" style="background:#fce7f3;color:#db2777"><i class="fas fa-user"></i>
                              </div>
                              <div class="dch-title">Müşteri Bilgileri</div>
                         </div>
                         <div class="dcb">
                              <div class="info-grid">
                                   <div>
                                        <div class="ii-label">Adı Soyadı</div>
                                        <div class="ii-val">{{ $sale->customer?->full_name ?? '—' }}</div>
                                   </div>
                                   <div>
                                        <div class="ii-label">Telefon</div>
                                        <div class="ii-val">{{ $sale->customer?->phone ?? '—' }}</div>
                                   </div>
                                   <div>
                                        <div class="ii-label">E-posta</div>
                                        <div class="ii-val">{{ $sale->customer?->email ?? '—' }}</div>
                                   </div>
                                   <div>
                                        <div class="ii-label">Tip</div>
                                        <div class="ii-val">{{ $sale->customer?->customer_type_label ?? '—' }}</div>
                                   </div>
                              </div>
                              @if($sale->customer)
                                   <a href="{{ route('agency.customers.show', $sale->customer) }}"
                                        class="btn btn-sm text-white mt-3"
                                        style="border-radius:8px;background:#2563eb;font-size:.8rem">
                                        <i class="fas fa-user me-1"></i>Müşteri Kartını Aç
                                   </a>
                              @endif
                         </div>
                    </div>

                    {{-- Satış Detayları --}}
                    <div class="det-card">
                         <div class="dch">
                              <div class="dch-icon" style="background:#dbeafe;color:#2563eb"><i
                                        class="fas fa-info-circle"></i></div>
                              <div class="dch-title">Satış Detayları</div>
                         </div>
                         <div class="dcb">
                              <div class="info-grid">
                                   <div>
                                        <div class="ii-label">Başlangıç</div>
                                        <div class="ii-val">{{ $sale->start_date->format('d.m.Y') }}</div>
                                   </div>
                                   <div>
                                        <div class="ii-label">Bitiş</div>
                                        <div class="ii-val">{{ $sale->end_date?->format('d.m.Y') ?? '—' }}</div>
                                   </div>
                                   <div>
                                        <div class="ii-label">Alınış Saati</div>
                                        <div class="ii-val">{{ $sale->pickup_time?->format('d.m.Y H:i') ?? '—' }}</div>
                                   </div>
                                   <div>
                                        <div class="ii-label">Alınış Noktası</div>
                                        <div class="ii-val">{{ $sale->pickup_location ?? '—' }}</div>
                                   </div>
                                   <div>
                                        <div class="ii-label">Bırakılış</div>
                                        <div class="ii-val">{{ $sale->dropoff_location ?? '—' }}</div>
                                   </div>
                                   <div>
                                        <div class="ii-label">Uçuş No</div>
                                        <div class="ii-val">{{ $sale->flight_number ?? '—' }}</div>
                                   </div>
                                   <div>
                                        <div class="ii-label">Yetişkin</div>
                                        <div class="ii-val">{{ $sale->adult_count }}</div>
                                   </div>
                                   <div>
                                        <div class="ii-label">Çocuk</div>
                                        <div class="ii-val">{{ $sale->child_count }}</div>
                                   </div>
                                   <div>
                                        <div class="ii-label">Bebek</div>
                                        <div class="ii-val">{{ $sale->infant_count }}</div>
                                   </div>
                              </div>
                         </div>
                    </div>

                    {{-- Hizmet Özel Alanları --}}
                    @if($extraFields && (array) $sale->extra_data)
                         <div class="det-card">
                              <div class="dch">
                                   <div class="dch-icon" style="background:#e0f2fe;color:#0284c7"><i class="fas fa-sliders-h"></i>
                                   </div>
                                   <div class="dch-title">{{ $productType?->name }} Detayları</div>
                              </div>
                              <div class="dcb">
                                   <div class="info-grid">
                                        @foreach($extraFields as $field)
                                             @php $val = data_get($sale->extra_data, $field['key']); @endphp
                                             @if($val !== null && $val !== '')
                                                  <div>
                                                       <div class="ii-label">{{ $field['label'] }}</div>
                                                       <div class="ii-val">
                                                            @if($field['type'] === 'boolean') {{ $val ? 'Evet' : 'Hayır' }}
                                                            @elseif($field['type'] === 'select') {{ $field['options'][$val] ?? $val }}
                                                            @else {{ $val }}
                                                            @endif
                                                       </div>
                                                  </div>
                                             @endif
                                        @endforeach
                                   </div>
                              </div>
                         </div>
                    @endif

                    {{-- Notlar --}}
                    @if($sale->customer_note || $sale->internal_note)
                         <div class="det-card">
                              <div class="dch">
                                   <div class="dch-icon" style="background:#fef3c7;color:#d97706"><i
                                             class="fas fa-sticky-note"></i></div>
                                   <div class="dch-title">Notlar</div>
                              </div>
                              <div class="dcb">
                                   @if($sale->customer_note)
                                        <div class="mb-3">
                                             <div class="ii-label mb-1">Müşteri Notu</div>
                                             <div
                                                  style="background:#f8fafc;border:1px solid var(--border);border-radius:10px;padding:.85rem;font-size:.85rem;color:#475569;white-space:pre-wrap">
                                                  {{ $sale->customer_note }}</div>
                                        </div>
                                   @endif
                                   @if($sale->internal_note)
                                        <div>
                                             <div class="ii-label mb-1"><i class="fas fa-lock me-1"></i>Dahili Not</div>
                                             <div
                                                  style="background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:.85rem;font-size:.85rem;color:#475569;white-space:pre-wrap">
                                                  {{ $sale->internal_note }}</div>
                                        </div>
                                   @endif
                              </div>
                         </div>
                    @endif

               </div>

               {{-- SAĞ PANEL --}}
               <div>

                    {{-- Hızlı Eylemler --}}
                    <div class="det-card">
                         <div class="dch">
                              <div class="dch-icon" style="background:#fef3c7;color:#f59e0b"><i class="fas fa-bolt"></i>
                              </div>
                              <div class="dch-title">Hızlı Eylemler</div>
                         </div>
                         <div class="dcb">
                              <a href="{{ route('agency.sales.edit', $sale) }}" class="side-btn sb-edit"><i
                                        class="fas fa-pen-to-square"></i> Düzenle</a>

                              @if($sale->isPending())
                                   <form method="POST" action="{{ route('agency.sales.confirm', $sale) }}">
                                        @csrf
                                        <button type="submit" class="side-btn sb-confirm"><i class="fas fa-check-circle"></i>
                                             Onayla</button>
                                   </form>
                              @endif

                              @if(!$sale->isCancelled())
                                   <button class="side-btn sb-cancel" onclick="openCancelModal()"><i
                                             class="fas fa-times-circle"></i> İptal Et</button>
                              @endif

                              @if(!$sale->isPaid())
                                   <button class="side-btn sb-pay" onclick="openPayModal()"><i class="fas fa-credit-card"></i>
                                        Ödeme Ekle</button>
                              @endif

                              <a href="{{ route('agency.sales.index') }}" class="side-btn sb-back"><i
                                        class="fas fa-arrow-left"></i> Listeye Dön</a>

                              <form method="POST" action="{{ route('agency.sales.destroy', $sale) }}"
                                   onsubmit="return confirm('Bu satışı silmek istediğinize emin misiniz?')">
                                   @csrf @method('DELETE')
                                   <button type="submit" class="side-btn" style="background:#fee2e2;color:#dc2626"><i
                                             class="fas fa-trash"></i> Sil</button>
                              </form>
                         </div>
                    </div>

                    {{-- Ödeme Özeti --}}
                    <div class="det-card">
                         <div class="dch">
                              <div class="dch-icon" style="background:#d1fae5;color:#10b981"><i class="fas fa-lira-sign"></i>
                              </div>
                              <div class="dch-title">Ödeme Özeti</div>
                         </div>
                         <div class="dcb">
                              <div class="price-box">
                                   <div class="pr-row"><span>Ara
                                             Toplam</span><span>{{ number_format($sale->subtotal ?? $sale->total_amount, 2, '.', ',') }}
                                             {{ $sale->currency }}</span></div>
                                   @if($sale->discount_amount > 0)
                                        <div class="pr-row" style="color:#fde68a"><span>İndirim</span><span>-
                                                  {{ number_format($sale->discount_amount, 2, '.', ',') }}</span></div>
                                   @endif
                                   @if($sale->tax_amount > 0)
                                        <div class="pr-row"><span>KDV</span><span>+
                                                  {{ number_format($sale->tax_amount, 2, '.', ',') }}</span></div>
                                   @endif
                                   <hr class="pr-div">
                                   <div class="pr-row pr-total">
                                        <span>Toplam</span><span>{{ number_format($sale->total_amount, 2, '.', ',') }}
                                             {{ $sale->currency }}</span></div>
                                   <div class="pr-row" style="opacity:.85;color:#86efac">
                                        <span>Ödenen</span><span>{{ number_format($sale->paid_amount, 2, '.', ',') }}</span>
                                   </div>
                                   <div class="pr-row" style="color:#fda4af">
                                        <span>Kalan</span><span>{{ number_format($sale->remaining_amount, 2, '.', ',') }}</span>
                                   </div>
                              </div>
                         </div>
                    </div>

                    {{-- Audit --}}
                    <div class="det-card">
                         <div class="dch">
                              <div class="dch-icon" style="background:#f1f5f9;color:#94a3b8"><i class="fas fa-history"></i>
                              </div>
                              <div class="dch-title">Kayıt Bilgisi</div>
                         </div>
                         <div class="dcb">
                              <div class="info-grid" style="grid-template-columns:1fr">
                                   <div>
                                        <div class="ii-label">Oluşturan</div>
                                        <div class="ii-val">{{ $sale->creator?->full_name ?? '—' }}</div>
                                   </div>
                                   <div>
                                        <div class="ii-label">Oluşturulma</div>
                                        <div class="ii-val">{{ $sale->created_at->format('d.m.Y H:i') }}</div>
                                   </div>
                                   @if($sale->confirmed_at)
                                        <div>
                                             <div class="ii-label">Onaylanma</div>
                                             <div class="ii-val">{{ $sale->confirmed_at->format('d.m.Y H:i') }}</div>
                                        </div>
                                   @endif
                                   @if($sale->cancelled_at)
                                        <div>
                                             <div class="ii-label">İptal Tarihi</div>
                                             <div class="ii-val" style="color:#ef4444">
                                                  {{ $sale->cancelled_at->format('d.m.Y H:i') }}</div>
                                        </div>
                                        <div>
                                             <div class="ii-label">İptal Nedeni</div>
                                             <div class="ii-val">{{ $sale->cancellation_reason ?? '—' }}</div>
                                        </div>
                                   @endif
                              </div>
                         </div>
                    </div>

               </div>
          </div>{{-- det-wrap --}}

          {{-- İptal Modal --}}
          <div id="cancelModal"
               style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;align-items:center;justify-content:center">
               <div
                    style="background:#fff;border-radius:20px;padding:2rem;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,.2)">
                    <h6 style="font-weight:800;margin-bottom:1rem">Satışı İptal Et</h6>
                    <form method="POST" action="{{ route('agency.sales.cancel', $sale) }}">
                         @csrf
                         <textarea name="reason" rows="4" class="w-100"
                              style="border:1.5px solid #e2e8f0;border-radius:10px;padding:.75rem;font-size:.87rem;outline:none;resize:vertical"
                              placeholder="İptal nedeni (isteğe bağlı)…"></textarea>
                         <div class="d-flex justify-content-end gap-2 mt-3">
                              <button type="button" onclick="closeCancelModal()" class="btn btn-outline-secondary"
                                   style="border-radius:10px">Vazgeç</button>
                              <button type="submit" class="btn btn-danger" style="border-radius:10px">İptal Et</button>
                         </div>
                    </form>
               </div>
          </div>

          {{-- Ödeme Modal --}}
          <div id="payModal"
               style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;align-items:center;justify-content:center">
               <div
                    style="background:#fff;border-radius:20px;padding:2rem;width:100%;max-width:360px;box-shadow:0 20px 60px rgba(0,0,0,.2)">
                    <h6 style="font-weight:800;margin-bottom:1rem">Ödeme Ekle</h6>
                    <p style="font-size:.84rem;color:#64748b;margin-bottom:1rem">Kalan tutar:
                         <strong>{{ number_format($sale->remaining_amount, 2, '.', ',') }} {{ $sale->currency }}</strong>
                    </p>
                    <form method="POST" action="{{ route('agency.sales.payment', $sale) }}">
                         @csrf
                         <input type="number" step="0.01" name="amount" class="w-100"
                              style="border:1.5px solid #e2e8f0;border-radius:10px;padding:.75rem;font-size:.87rem;outline:none"
                              placeholder="Tutar" max="{{ $sale->remaining_amount }}" required>
                         <div class="d-flex justify-content-end gap-2 mt-3">
                              <button type="button" onclick="closePayModal()" class="btn btn-outline-secondary"
                                   style="border-radius:10px">Vazgeç</button>
                              <button type="submit" class="btn text-white"
                                   style="border-radius:10px;background:#10b981">Kaydet</button>
                         </div>
                    </form>
               </div>
          </div>

     </div>
@endsection

@push('scripts')
     <script>
          function openCancelModal() { document.getElementById('cancelModal').style.display = 'flex'; }
          function closeCancelModal() { document.getElementById('cancelModal').style.display = 'none'; }
          function openPayModal() { document.getElementById('payModal').style.display = 'flex'; }
          function closePayModal() { document.getElementById('payModal').style.display = 'none'; }
     </script>
@endpush