@extends('layouts.app')

@section('title', 'إدارة الإيرادات')
@section('page_title', 'إدارة الإيرادات')

@section('content')
<!-- Filters Section -->
<div class="row mb-3">
  <div class="col-12">
    <div class="card">
      <div class="card-body">
        <form method="GET" action="{{ route('admin.revenue') }}" class="row g-3 align-items-end">
          <div class="col-md-3">
            <label class="form-label mb-1">من تاريخ</label>
            <input type="date" class="form-control" name="start_date" value="{{ $startDate }}">
          </div>
          <div class="col-md-3">
            <label class="form-label mb-1">إلى تاريخ</label>
            <input type="date" class="form-control" name="end_date" value="{{ $endDate }}">
          </div>
          <div class="col-md-3">
            <label class="form-label mb-1">موظف الاستقبال</label>
            <select class="form-select" name="receptionist_id">
              <option value="">الكل</option>
              @foreach($receptionists as $r)
                <option value="{{ $r->id }}" {{ $receptionistId == $r->id ? 'selected' : '' }}>{{ $r->name }}</option>
              @endforeach
            </select>
          </div>
          <div class="col-md-3">
            <div class="d-flex gap-2">
              <button class="btn btn-outline-primary" type="submit"><i class="fas fa-filter me-1"></i>تصفية</button>
              <a href="{{ route('admin.revenue') }}" class="btn btn-light"><i class="fas fa-undo me-1"></i>إعادة تعيين</a>
              <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addPaymentModal">
                <i class="fas fa-plus me-1"></i>دفعة جديدة
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Summary Cards -->
<div class="row mb-4">
  <div class="col-md-3">
    <div class="card bg-success text-white">
      <div class="card-body">
        <div class="d-flex justify-content-between">
          <div>
            <h6 class="card-title">إجمالي نقدي</h6>
            <h4 class="mb-0">{{ number_format($overallTotals->total_cash ?? 0, 2) }} ج.م</h4>
          </div>
          <div class="align-self-center">
            <i class="fas fa-money-bill-wave fa-2x"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card bg-info text-white">
      <div class="card-body">
        <div class="d-flex justify-content-between">
          <div>
            <h6 class="card-title">إجمالي تحويلات</h6>
            <h4 class="mb-0">{{ number_format($overallTotals->total_transfer ?? 0, 2) }} ج.م</h4>
          </div>
          <div class="align-self-center">
            <i class="fas fa-university fa-2x"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card bg-warning text-white">
      <div class="card-body">
        <div class="d-flex justify-content-between">
          <div>
            <h6 class="card-title">إجمالي كروت</h6>
            <h4 class="mb-0">{{ number_format($overallTotals->total_card ?? 0, 2) }} ج.م</h4>
          </div>
          <div class="align-self-center">
            <i class="fas fa-credit-card fa-2x"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card bg-primary text-white">
      <div class="card-body">
        <div class="d-flex justify-content-between">
          <div>
            <h6 class="card-title">المجموع الكلي</h6>
            <h4 class="mb-0">{{ number_format($overallTotals->grand_total ?? 0, 2) }} ج.م</h4>
          </div>
          <div class="align-self-center">
            <i class="fas fa-chart-line fa-2x"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Daily Summaries -->
@if($dailySummaries->count() > 0)
<div class="card mb-4">
  <div class="card-header">
    <h5 class="mb-0">ملخص يومي</h5>
  </div>
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-striped mb-0">
        <thead class="table-dark">
          <tr>
            <th>التاريخ</th>
            <th>موظف الاستقبال</th>
            <th>نقدي</th>
            <th>تحويلات</th>
            <th>كروت</th>
            <th>المجموع</th>
            <th>عدد المدفوعات</th>
            <th>حالة التسليم</th>
            <th>الإجراءات</th>
          </tr>
        </thead>
        <tbody>
          @foreach($dailySummaries as $date => $receptionistSummaries)
            @foreach($receptionistSummaries as $receptionistId => $statusSummaries)
              @foreach($statusSummaries as $summary)
                <tr>
                  <td>{{ Carbon\Carbon::parse($date)->format('Y-m-d') }}</td>
                  <td>
                    @php
                      $receptionist = $receptionists->find($receptionistId);
                    @endphp
                    {{ $receptionist->name ?? 'غير محدد' }}
                  </td>
                  <td class="text-success fw-bold">{{ number_format($summary->cash_total, 2) }}</td>
                  <td class="text-info fw-bold">{{ number_format($summary->transfer_total, 2) }}</td>
                  <td class="text-warning fw-bold">{{ number_format($summary->card_total, 2) }}</td>
                  <td class="text-primary fw-bold">{{ number_format($summary->daily_total, 2) }}</td>
                  <td>{{ $summary->payment_count }}</td>
                  <td>
                    @if($summary->handover_status === 'pending')
                      <span class="badge bg-warning">في الانتظار</span>
                    @else
                      <span class="badge bg-success">مؤكد</span>
                    @endif
                  </td>
                  <td>
                    @if($summary->handover_status === 'pending')
                      <button class="btn btn-sm btn-outline-success" onclick="confirmDailyHandover('{{ $date }}', {{ $receptionistId }})">
                        <i class="fas fa-check me-1"></i>تأكيد التسليم
                      </button>
                    @endif
                  </td>
                </tr>
              @endforeach
            @endforeach
          @endforeach
        </tbody>
      </table>
    </div>
  </div>
</div>
@endif

<!-- Payments List -->
<div class="card">
  <div class="card-header d-flex justify-content-between align-items-center">
    <h5 class="mb-0">قائمة المدفوعات</h5>
    <div>
      <button class="btn btn-outline-secondary btn-sm" onclick="exportData()">
        <i class="fas fa-download me-1"></i>تصدير
      </button>
    </div>
  </div>
  <div class="card-body p-0">
    <div class="table-responsive" style="max-height: 60vh; overflow-y: auto;">
      <table class="table table-striped table-hover mb-0">
        <thead class="table-dark sticky-top">
          <tr>
            <th>
              <input type="checkbox" id="selectAll" onchange="toggleSelectAll()">
            </th>
            <th>التاريخ</th>
            <th>الوقت</th>
            <th>المريض</th>
            <th>المبلغ</th>
            <th>طريقة الدفع</th>
            <th>مسجل بواسطة</th>
            <th>حالة التسليم</th>
            <th>ملاحظات</th>
            <th>الإجراءات</th>
          </tr>
        </thead>
        <tbody>
          @forelse($payments as $payment)
            <tr>
              <td>
                <input type="checkbox" class="payment-checkbox" value="{{ $payment->id }}">
              </td>
              <td>{{ $payment->payment_date->format('Y-m-d') }}</td>
              <td>{{ $payment->payment_time->format('H:i') }}</td>
              <td>
                <strong>{{ $payment->patient->name }}</strong>
                @if($payment->patient->mobile)
                  <br><small class="text-muted">{{ $payment->patient->mobile }}</small>
                @endif
              </td>
              <td class="fw-bold text-success">{{ number_format($payment->amount, 2) }} ج.م</td>
              <td>
                @switch($payment->payment_method)
                  @case('cash')
                    <span class="badge bg-success">نقدي</span>
                    @break
                  @case('bank_transfer')
                    <span class="badge bg-info">تحويل بنكي</span>
                    @break
                  @case('card')
                    <span class="badge bg-warning">كارت</span>
                    @break
                @endswitch
              </td>
              <td>{{ $payment->recordedBy->name }}</td>
              <td>
                @if($payment->handover_status === 'pending')
                  <span class="badge bg-warning">في الانتظار</span>
                @else
                  <span class="badge bg-success">مؤكد</span>
                  @if($payment->confirmedBy)
                    <br><small class="text-muted">بواسطة: {{ $payment->confirmedBy->name }}</small>
                  @endif
                @endif
              </td>
              <td>
                @if($payment->notes)
                  <small>{{ Str::limit($payment->notes, 50) }}</small>
                @endif
                @if($payment->admin_notes)
                  <br><small class="text-primary">{{ Str::limit($payment->admin_notes, 50) }}</small>
                @endif
              </td>
              <td>
                @if($payment->handover_status === 'pending')
                  <button class="btn btn-sm btn-outline-success" onclick="confirmPayment({{ $payment->id }})">
                    <i class="fas fa-check"></i>
                  </button>
                @endif
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="10" class="text-center py-4">
                <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                <p class="text-muted">لا توجد مدفوعات في الفترة المحددة</p>
              </td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>
  @if($payments->hasPages())
    <div class="card-footer">
      {{ $payments->withQueryString()->links() }}
    </div>
  @endif
</div>

<!-- Bulk Actions -->
@if($payments->count() > 0)
<div class="mt-3">
  <button class="btn btn-success" onclick="bulkConfirm()" id="bulkConfirmBtn" style="display: none;">
    <i class="fas fa-check-double me-1"></i>تأكيد المحدد
  </button>
</div>
@endif

<!-- Add Payment Modal -->
<div class="modal fade" id="addPaymentModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">إضافة دفعة جديدة</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form id="addPaymentForm">
        @csrf
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">المريض <span class="text-danger">*</span></label>
            <div class="position-relative">
              <input type="text" class="form-control patient-search" placeholder="ابحث بالاسم أو رقم الهاتف...">
              <input type="hidden" name="patient_id" required>
              <div class="patient-dropdown position-absolute w-100 bg-white border rounded shadow-sm" style="top: 100%; z-index: 1000; display: none; max-height: 200px; overflow-y: auto;"></div>
            </div>
          </div>
          
          <div class="mb-3">
            <label class="form-label">المبلغ <span class="text-danger">*</span></label>
            <input type="number" class="form-control" name="amount" step="0.01" min="0" required>
          </div>
          
          <div class="mb-3">
            <label class="form-label">طريقة الدفع <span class="text-danger">*</span></label>
            <select class="form-select" name="payment_method" required>
              <option value="cash">نقدي</option>
              <option value="bank_transfer">تحويل بنكي</option>
              <option value="card">كارت</option>
            </select>
          </div>
          
          <div class="mb-3">
            <label class="form-label">تاريخ الدفع</label>
            <input type="date" class="form-control" name="payment_date" value="{{ now()->format('Y-m-d') }}">
          </div>
          
          <div class="mb-3">
            <label class="form-label">ملاحظات</label>
            <textarea class="form-control" name="notes" rows="3" placeholder="ملاحظات اختيارية..."></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
          <button type="submit" class="btn btn-success">حفظ الدفعة</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Confirm Payment Modal -->
<div class="modal fade" id="confirmPaymentModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">تأكيد تسليم الدفعة</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form id="confirmPaymentForm">
        @csrf
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">ملاحظات الإدارة</label>
            <textarea class="form-control" name="admin_notes" rows="3" placeholder="ملاحظات اختيارية حول التسليم..."></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
          <button type="submit" class="btn btn-success">تأكيد التسليم</button>
        </div>
      </form>
    </div>
  </div>
</div>

@endsection

@push('scripts')
<script>
// Patient search data
const patientsData = @json($patients->map(function($p) { 
  return [
    'id' => $p->id, 
    'name' => $p->name, 
    'phone' => $p->mobile ?? null
  ]; 
}));

let currentPaymentId = null;

$(function(){
  // Initialize patient search
  initPatientSearch($('#addPaymentModal'));
  
  // Add payment form submission
  $('#addPaymentForm').on('submit', function(e){
    e.preventDefault();
    const data = $(this).serialize();
    
    $.post(`{{ route('admin.revenue.store') }}`, data)
      .done(function(response) {
        $('#addPaymentModal').modal('hide');
        showAlert('success', response.message);
        setTimeout(() => window.location.reload(), 1000);
      })
      .fail(function(xhr) {
        const errorMsg = xhr.responseJSON?.message || 'حدث خطأ أثناء حفظ الدفعة';
        showAlert('error', errorMsg);
      });
  });
  
  // Confirm payment form submission
  $('#confirmPaymentForm').on('submit', function(e){
    e.preventDefault();
    if (!currentPaymentId) return;
    
    const data = $(this).serialize();
    
    $.post(`/admin/revenue/${currentPaymentId}/confirm`, data)
      .done(function(response) {
        $('#confirmPaymentModal').modal('hide');
        showAlert('success', response.message);
        setTimeout(() => window.location.reload(), 1000);
      })
      .fail(function(xhr) {
        const errorMsg = xhr.responseJSON?.message || 'حدث خطأ أثناء التأكيد';
        showAlert('error', errorMsg);
      });
  });
});

// Patient search functionality (reused from appointments)
function initPatientSearch(container) {
  const searchInput = container.find('.patient-search');
  const hiddenInput = container.find('input[name="patient_id"]');
  const dropdown = container.find('.patient-dropdown');
  
  searchInput.on('input', function() {
    const query = $(this).val().toLowerCase();
    if (query.length < 2) {
      dropdown.hide();
      return;
    }
    
    const filtered = patientsData.filter(p => {
      const nameMatch = p.name && p.name.toLowerCase().includes(query);
      const phoneMatch = p.phone && p.phone.toString().toLowerCase().includes(query);
      return nameMatch || phoneMatch;
    });
    
    if (filtered.length === 0) {
      dropdown.html('<div class="patient-option">لا توجد نتائج</div>').show();
      return;
    }
    
    let html = '';
    filtered.forEach(patient => {
      html += `<div class="patient-option" data-id="${patient.id}" data-name="${patient.name}">
        <strong>${patient.name}</strong>
        ${patient.phone ? `<br><small class="text-muted">${patient.phone}</small>` : ''}
      </div>`;
    });
    
    dropdown.html(html).show();
  });
  
  dropdown.on('click', '.patient-option', function() {
    const id = $(this).data('id');
    const name = $(this).data('name');
    
    if (id) {
      hiddenInput.val(id);
      searchInput.val(name);
    }
    dropdown.hide();
  });
  
  // Hide dropdown when clicking outside
  $(document).on('click', function(e) {
    if (!container.is(e.target) && container.has(e.target).length === 0) {
      dropdown.hide();
    }
  });
}

function confirmPayment(paymentId) {
  currentPaymentId = paymentId;
  $('#confirmPaymentModal').modal('show');
}

function confirmDailyHandover(date, receptionistId) {
  if (confirm('هل تريد تأكيد تسليم جميع مدفوعات هذا اليوم؟')) {
    // Get all payment IDs for this date and receptionist
    const paymentIds = [];
    // This would need to be implemented based on the data structure
    
    $.post(`{{ route('admin.revenue.bulk-confirm') }}`, {
      payment_ids: paymentIds,
      _token: '{{ csrf_token() }}'
    })
    .done(function(response) {
      showAlert('success', response.message);
      setTimeout(() => window.location.reload(), 1000);
    })
    .fail(function(xhr) {
      const errorMsg = xhr.responseJSON?.message || 'حدث خطأ أثناء التأكيد';
      showAlert('error', errorMsg);
    });
  }
}

function toggleSelectAll() {
  const selectAll = document.getElementById('selectAll');
  const checkboxes = document.querySelectorAll('.payment-checkbox');
  
  checkboxes.forEach(checkbox => {
    checkbox.checked = selectAll.checked;
  });
  
  updateBulkActions();
}

function updateBulkActions() {
  const checkedBoxes = document.querySelectorAll('.payment-checkbox:checked');
  const bulkBtn = document.getElementById('bulkConfirmBtn');
  
  if (checkedBoxes.length > 0) {
    bulkBtn.style.display = 'inline-block';
  } else {
    bulkBtn.style.display = 'none';
  }
}

function bulkConfirm() {
  const checkedBoxes = document.querySelectorAll('.payment-checkbox:checked');
  const paymentIds = Array.from(checkedBoxes).map(cb => cb.value);
  
  if (paymentIds.length === 0) return;
  
  if (confirm(`هل تريد تأكيد ${paymentIds.length} دفعة محددة؟`)) {
    $.post(`{{ route('admin.revenue.bulk-confirm') }}`, {
      payment_ids: paymentIds,
      _token: '{{ csrf_token() }}'
    })
    .done(function(response) {
      showAlert('success', response.message);
      setTimeout(() => window.location.reload(), 1000);
    })
    .fail(function(xhr) {
      const errorMsg = xhr.responseJSON?.message || 'حدث خطأ أثناء التأكيد';
      showAlert('error', errorMsg);
    });
  }
}

function exportData() {
  const params = new URLSearchParams(window.location.search);
  window.open(`{{ route('admin.revenue.export') }}?${params.toString()}`, '_blank');
}

function showAlert(type, message) {
  const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
  const alertHtml = `
    <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
      ${message}
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  `;
  
  // Insert at top of content
  $('.content-wrapper').prepend(alertHtml);
  
  // Auto dismiss after 5 seconds
  setTimeout(() => {
    $('.alert').alert('close');
  }, 5000);
}

// Update bulk actions when checkboxes change
$(document).on('change', '.payment-checkbox', updateBulkActions);
</script>

<style>
/* Patient Search Styles */
.patient-option {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}
.patient-option:hover {
  background-color: #f8f9fa;
}
.patient-option:last-child {
  border-bottom: none;
}
</style>
@endpush