@extends('agency.layouts.app')
@section('title', 'Satış Yönetimi')
@section('page_title', 'Satış Dashboard')

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

          /* View Selector Nav */
          .view-nav {
               display: flex;
               gap: 0.5rem;
               background: #f1f5f9;
               padding: 0.4rem;
               border-radius: 14px;
               width: fit-content;
          }

          .view-nav-link {
               padding: 0.5rem 1.25rem;
               border-radius: 10px;
               font-weight: 700;
               font-size: 0.85rem;
               color: #64748b;
               text-decoration: none;
               transition: all 0.2s;
               display: flex;
               align-items: center;
               gap: 0.6rem;
          }

          .view-nav-link:hover {
               color: var(--cp);
               background: rgba(37, 99, 235, 0.05);
          }

          .view-nav-link.active {
               background: #fff;
               color: var(--cp);
               box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
          }

          /* Global Styles for partials */
          .stat-grid {
               display: grid;
               grid-template-columns: repeat(5, 1fr);
               gap: 1.25rem;
          }

          @media(max-width:1200px) {
               .stat-grid {
                    grid-template-columns: repeat(3, 1fr);
               }
          }

          @media(max-width:768px) {
               .stat-grid {
                    grid-template-columns: repeat(2, 1fr);
               }
          }

          @media(max-width:480px) {
               .stat-grid {
                    grid-template-columns: 1fr;
               }
          }

          .stat-card {
               background: #fff;
               border-radius: 20px;
               border: 1px solid var(--border);
               padding: 1.5rem;
               box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
               display: flex;
               flex-direction: column;
               gap: 0.75rem;
               transition: all 0.3s ease;
               position: relative;
               overflow: hidden;
          }

          .stat-card:hover {
               transform: translateY(-5px);
               box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
          }

          .stat-icon {
               width: 44px;
               height: 44px;
               border-radius: 12px;
               display: flex;
               align-items: center;
               justify-content: center;
               font-size: 1.1rem;
          }

          .stat-val {
               font-size: 1.5rem;
               font-weight: 800;
               color: var(--text-main);
               line-height: 1.1;
          }

          .stat-lbl {
               font-size: .8rem;
               color: var(--text-muted);
               font-weight: 600;
               text-transform: uppercase;
               letter-spacing: 0.5px;
          }

          .product-type-grid {
               display: grid;
               grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
               gap: 1.5rem;
               margin-top: 1rem;
          }

          .product-type-card {
               background: #fff;
               border-radius: 24px;
               border: 1px solid var(--border);
               padding: 2rem;
               display: flex;
               flex-direction: column;
               align-items: center;
               text-align: center;
               box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
               transition: all 0.3s;
          }

          .product-type-card:hover {
               transform: translateY(-5px);
               border-color: var(--cp);
               shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
          }

          .product-type-icon-wrapper {
               width: 70px;
               height: 70px;
               border-radius: 20px;
               background: var(--cp-light);
               color: var(--cp);
               display: flex;
               align-items: center;
               justify-content: center;
               font-size: 2rem;
               margin-bottom: 1.25rem;
          }

          .product-type-name {
               font-size: 1.3rem;
               font-weight: 800;
               color: var(--text-main);
               margin-bottom: 0.5rem;
          }

          .product-type-desc {
               font-size: 0.9rem;
               color: var(--text-muted);
               line-height: 1.4;
               margin-bottom: 1.5rem;
          }

          .product-type-footer {
               margin-top: 1.5rem;
               display: flex;
               gap: 0.75rem;
               width: 100%;
               z-index: 2;
          }

          .product-type-btn {
               flex: 1;
               padding: 0.6rem;
               border-radius: 12px;
               font-weight: 700;
               font-size: 0.8rem;
               text-decoration: none;
               transition: all 0.3s ease;
               display: flex;
               align-items: center;
               justify-content: center;
               gap: 0.5rem;
          }

          .btn-new {
               background: var(--cp);
               color: #fff;
               box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
               height: 100%;
          }

          .btn-list {
               background: var(--cp-light);
               color: var(--cp);
          }

          .btn-kanban {
               background: #f8fafc;
               color: #64748b;
               border: 1px solid #f1f5f9;
          }

          .btn-kanban:hover {
               background: #fff;
               color: var(--cp);
               border-color: var(--cp);
          }

          .section-header {
               display: flex;
               justify-content: space-between;
               align-items: center;
               margin-bottom: 1.5rem;
               margin-top: 2rem;
          }

          .section-title {
               font-size: 1.3rem;
               font-weight: 800;
               color: var(--text-main);
               margin: 0;
               display: flex;
               align-items: center;
               gap: 0.75rem;
          }

          .section-line {
               height: 4px;
               width: 35px;
               background: var(--cp);
               border-radius: 2px;
               margin-top: 4px;
          }

          .res-card {
               background: #fff;
               border-radius: 20px;
               border: 1px solid var(--border);
               box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
               overflow: hidden;
          }

          .res-table th {
               background: #fcfdfe;
               padding: 1.25rem 1rem;
               border-bottom: 1px solid #f1f5f9;
               font-size: 0.8rem;
               letter-spacing: 0.5px;
          }

          .tb-bar {
               background: #fff;
               border-radius: 18px;
               border: 1px solid var(--border);
               padding: 1.1rem;
               margin-bottom: 1.5rem;
          }

          .badge {
               border-radius: 8px;
               padding: 5px 12px;
               font-weight: 700;
               font-size: 0.75rem;
          }

          .btn-primary-gradient {
               background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
               color: #fff;
               border: none;
               border-radius: 12px;
               padding: 0.7rem 1.5rem;
               font-weight: 700;
               box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
               text-decoration: none;
               display: inline-flex;
               align-items: center;
          }

          .btn-primary-gradient:hover {
               color: #fff;
               transform: translateY(-1px);
               box-shadow: 0 6px 15px rgba(37, 99, 235, 0.35);
          }

          /* Kanban Specific Styles */
          .kanban-wrapper {
               overflow-x: auto;
               padding-bottom: 2rem;
          }

          .kanban-board {
               display: flex;
               gap: 1.5rem;
               min-height: 70vh;
               align-items: flex-start;
          }

          .kanban-col {
               background: #f8fafc;
               border-radius: 16px;
               min-width: 300px;
               width: 300px;
               display: flex;
               flex-direction: column;
               overflow: hidden;
               border: 1px solid #e2e8f0;
          }

          .kanban-header {
               padding: 1.25rem;
               border-top: 4px solid var(--cp);
               background: #fff;
               border-bottom: 1px dashed #e2e8f0;
          }

          .kanban-title {
               font-size: .85rem;
               font-weight: 800;
               color: var(--text-main);
               margin: 0;
               text-transform: uppercase;
               letter-spacing: 0.5px;
          }

          .kanban-count {
               background: #f1f5f9;
               color: #64748b;
               font-size: .75rem;
               font-weight: 700;
               padding: 2px 8px;
               border-radius: 6px;
          }

          .kanban-total {
               font-size: .95rem;
               font-weight: 800;
               color: var(--cp);
               margin-top: 4px;
          }

          .kanban-body {
               padding: 1rem;
               flex: 1;
               overflow-y: auto;
               display: flex;
               flex-direction: column;
               gap: 1rem;
          }

          .kanban-add-btn {
               border: 1px dashed #cbd5e1;
               border-radius: 12px;
               padding: .75rem;
               color: #94a3b8;
               font-size: .85rem;
               font-weight: 700;
               text-align: center;
               text-decoration: none;
               transition: all 0.2s;
               background: #fff;
          }

          .kanban-add-btn:hover {
               border-color: var(--cp);
               color: var(--cp);
               background: var(--cp-light);
          }

          .kanban-item {
               background: #fff;
               border-radius: 14px;
               padding: 1rem;
               border: 1px solid #e2e8f0;
               box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
               transition: all 0.2s;
               cursor: pointer;
               position: relative;
          }

          .kanban-item:hover {
               transform: translateY(-3px);
               box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
               border-color: var(--cp);
          }

          .kanban-item-code {
               font-size: .75rem;
               font-weight: 700;
               color: var(--cp);
               margin-bottom: .25rem;
          }

          .kanban-item-customer {
               font-size: .9rem;
               font-weight: 800;
               color: var(--text-main);
               display: block;
               margin-bottom: .5rem;
          }

          .kanban-item-footer {
               border-top: 1px solid #f1f5f9;
               padding-top: .75rem;
               margin-top: .75rem;
               display: flex;
               justify-content: space-between;
               align-items: center;
          }

          .kanban-item-meta {
               font-size: .75rem;
               color: var(--text-muted);
               font-weight: 500;
          }

          .kanban-item-price {
               font-size: .85rem;
               font-weight: 800;
               color: var(--text-main);
          }
     </style>
@endpush

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

          {{-- 1. Üst Başlık ve Görünüm Seçici --}}
          <div class="d-flex justify-content-between align-items-center mb-5">
               <div class="d-flex align-items-center gap-4">
                    @if($view === 'list')
                         <a href="{{ route('agency.sales.index', request()->only(['year', 'month', 'period', 'target_type'])) }}"
                              class="btn btn-white shadow-sm d-flex align-items-center justify-content-center"
                              style="width: 45px; height: 45px; border-radius: 12px; color: var(--cp);">
                              <i class="fas fa-chevron-left"></i>
                         </a>
                    @endif
                    <div>
                         <div class="d-flex align-items-center gap-3">
                              <h4
                                   style="font-weight:900; color:var(--text-main); margin:0; font-size: 2.2rem; letter-spacing: -0.5px;">
                                   @if($view === 'list')
                                        @php $pt = $productTypes->find(request('product_type_id')); @endphp
                                        {{ $pt ? $pt->name : 'Satış Listesi' }}
                                   @else
                                        Satış Dashboard
                                   @endif
                              </h4>
                              @if($view === 'list')
                                   <a href="{{ route('agency.sales.create', ['product_type_id' => request('product_type_id')]) }}"
                                        class="btn-primary-gradient" style="font-size: 0.85rem; padding: 0.6rem 1.5rem;">
                                        <i class="fas fa-plus me-2"></i> Yeni {{ $pt ? $pt->name : 'Satış' }} Satışı
                                   </a>
                              @endif
                         </div>
                         <p class="text-muted mb-0">
                              @if($view === 'list')
                                   Seçili ürün grubuna ait tüm satış hareketleri listeleniyor.
                              @else
                                   Tüm ciro ve satış hedeflerinizi buradan yönetin.
                              @endif
                         </p>
                    </div>
               </div>

               <div class="filter-bar p-2 bg-white shadow-sm d-flex gap-2 align-items-center"
                    style="border-radius: 16px; border: 1px solid #f1f5f9;">
                    <form action="" method="GET" class="d-flex gap-2 align-items-center" id="filterForm">
                         <input type="hidden" name="view" value="{{ $view }}">

                         <div class="d-flex bg-light p-1" style="border-radius: 10px;">
                              <button type="submit" name="period" value="year"
                                   class="btn btn-sm px-3 {{ $targetPeriod === 'year' ? 'btn-white shadow-xs fw-bold text-primary' : 'btn-link text-muted text-decoration-none' }}"
                                   style="border-radius: 8px; font-size: 0.75rem;">Yıllık</button>
                              <button type="submit" name="period" value="month"
                                   class="btn btn-sm px-3 {{ $targetPeriod === 'month' ? 'btn-white shadow-xs fw-bold text-primary' : 'btn-link text-muted text-decoration-none' }}"
                                   style="border-radius: 8px; font-size: 0.75rem;">Aylık</button>
                         </div>

                         @if($targetPeriod === 'month')
                              <select name="month" class="form-select form-select-sm border-0 bg-light px-3"
                                   style="border-radius: 10px; width: 130px; font-weight: 600;" onchange="this.form.submit()">
                                   @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="form-select form-select-sm border-0 bg-light px-3"
                              style="border-radius: 10px; width: 100px; font-weight: 600;" onchange="this.form.submit()">
                              @for($y = date('Y') + 1; $y >= 2024; $y--)
                                   <option value="{{ $y }}" {{ $currentYear == $y ? 'selected' : '' }}>{{ $y }}</option>
                              @endfor
                         </select>

                         <div class="vr mx-1" style="height: 20px; opacity: 0.1;"></div>

                         <select name="target_type" class="form-select form-select-sm border-0 bg-light px-3"
                              style="border-radius: 10px; width: 140px; font-weight: 600;" onchange="this.form.submit()">
                              <option value="revenue" {{ $targetType === 'revenue' ? 'selected' : '' }}>Ciro Bazlı</option>
                              <option value="quantity" {{ $targetType === 'quantity' ? 'selected' : '' }}>Adet Bazlı</option>
                         </select>
                    </form>
               </div>
          </div>



          {{-- 3. Bildirimler --}}
          @if(session('success'))
               <div class="alert alert-success border-0 shadow-sm mb-5 d-flex align-items-center"
                    style="border-radius:18px; padding: 1.25rem 2rem;">
                    <div
                         style="width:40px;height:40px;background:rgba(16,185,129,0.15);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:1rem">
                         <i class="fas fa-check text-success"></i>
                    </div>
                    <div style="font-weight:600;">{{ session('success') }}</div>
                    <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
               </div>
          @endif

          {{-- 4. Dinamik Görünüm İçeriği --}}
          <div class="view-content fade-in">
               @if($view === 'list')
                    @include('agency.sales.partials.list_view')
               @else
                    @include('agency.sales.partials.target_section')
               @endif
          </div>

     </div>
@endsection

@push('scripts')
     <script>
          // Kanban scroll ayarları veya diğer dinamik işlemler
          document.addEventListener('DOMContentLoaded', function () {
               const viewContent = document.querySelector('.view-content');
               if (viewContent) viewContent.style.opacity = '1';

               // Kanban Drag-to-Scroll Logic
               const slider = document.querySelector('.kanban-wrapper');
               if (slider) {
                    let isDown = false;
                    let startX;
                    let scrollLeft;

                    slider.addEventListener('mousedown', (e) => {
                         if (e.target.closest('.kanban-item') || e.target.closest('button') || e.target.closest('a')) return;
                         isDown = true;
                         slider.classList.add('active-grab');
                         startX = e.pageX - slider.offsetLeft;
                         scrollLeft = slider.scrollLeft;
                    });
                    slider.addEventListener('mouseleave', () => {
                         isDown = false;
                         slider.classList.remove('active-grab');
                    });
                    slider.addEventListener('mouseup', () => {
                         isDown = false;
                         slider.classList.remove('active-grab');
                    });
                    slider.addEventListener('mousemove', (e) => {
                         if (!isDown) return;
                         e.preventDefault();
                         const x = e.pageX - slider.offsetLeft;
                         const walk = (x - startX) * 2; // Kaydırma hızı çarpanı
                         slider.scrollLeft = scrollLeft - walk;
                    });
               }
          });
     </script>
     <style>
          .fade-in {
               opacity: 0;
               transition: opacity 0.4s ease-in-out;
          }

          .kanban-wrapper {
               cursor: grab;
               user-select: none;
          }

          .kanban-wrapper.active-grab {
               cursor: grabbing;
          }

          .kanban-wrapper::-webkit-scrollbar {
               height: 8px;
          }

          .kanban-wrapper::-webkit-scrollbar-thumb {
               background: #cbd5e1;
               border-radius: 10px;
          }

          .kanban-wrapper::-webkit-scrollbar-track {
               background: transparent;
          }
     </style>
@endpush