@extends('layout')

@section('page_title', 'Customer Details')

@section('content')
  <div class="header-actions">
    <h2>Customer Profile</h2>
    <div class="spacer"></div>
    <a class="btn btn-secondary" href="{{ route('customers.edit', $customer) }}">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
      Edit Customer
    </a>
    <a class="btn btn-secondary" href="{{ route('customers.index') }}">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
      Back to List
    </a>
  </div>

  <div class="grid">
    <!-- Customer Profile Card -->
    <div class="card" style="grid-column: span 8;">
      <div class="card-header">
        <h3>Customer Information</h3>
      </div>
      
      <div style="display: flex; gap: 20px; margin-bottom: 20px;">
        @if($customer->image_path)
          <img src="{{ asset('storage/' . $customer->image_path) }}" alt="{{ $customer->name }}" style="width: 120px; height: 120px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border);">
        @else
          <div style="width: 120px; height: 120px; border-radius: 8px; background: var(--accent); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 2rem;">
            {{ substr($customer->name, 0, 1) }}
          </div>
        @endif
        
        <div>
          <h2 style="margin: 0 0 10px 0;">{{ $customer->name }}</h2>
          <div style="display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 15px;">
            <div>
              <div class="stat-title">Phone</div>
              <div class="stat-value">{{ $customer->phone }}</div>
            </div>
            <div>
              <div class="stat-title">Email</div>
              <div class="stat-value">{{ $customer->email ?? '—' }}</div>
            </div>
            <div>
              <div class="stat-title">CNIC</div>
              <div class="stat-value">{{ $customer->cnic ?? '—' }}</div>
            </div>
          </div>
        </div>
      </div>
      
      <div style="margin-bottom: 15px;">
        <div class="stat-title">Address</div>
        <div>{{ $customer->address ?? '—' }}</div>
      </div>
      
      <!-- Customer Documents -->
      @if($customer->cnic_front_path || $customer->cnic_back_path)
        <div style="margin-top: 20px;">
          <h4 style="margin: 0 0 10px 0;">Identity Documents</h4>
          <div style="display: flex; gap: 15px;">
            @if($customer->cnic_front_path)
              <div>
                <div class="small text-muted">Front</div>
                <a href="{{ asset('storage/' . $customer->cnic_front_path) }}" target="_blank">
                  <img src="{{ asset('storage/' . $customer->cnic_front_path) }}" alt="CNIC Front" style="width: 100px; height: 60px; border: 1px solid var(--border); padding: 3px; border-radius: 4px;">
                </a>
              </div>
            @endif
            @if($customer->cnic_back_path)
              <div>
                <div class="small text-muted">Back</div>
                <a href="{{ asset('storage/' . $customer->cnic_back_path) }}" target="_blank">
                  <img src="{{ asset('storage/' . $customer->cnic_back_path) }}" alt="CNIC Back" style="width: 100px; height: 60px; border: 1px solid var(--border); padding: 3px; border-radius: 4px;">
                </a>
              </div>
            @endif
          </div>
        </div>
      @endif
    </div>
    
    <!-- Summary Card -->
    <div class="card" style="grid-column: span 4;">
      <div class="card-header">
        <h3>Summary</h3>
      </div>
      
      <div style="display: flex; flex-direction: column; gap: 15px;">
        <div>
          <div class="stat-title">Total Agreements</div>
          <div class="stat-value">{{ $customer->agreements_count }}</div>
        </div>
        
        <div>
          <div class="stat-title">Active Instalments</div>
          <div class="stat-value">
            {{ $customer->agreements->where('status', 'active')->count() }}
          </div>
        </div>
        
        <div>
          <div class="stat-title">Total Payments</div>
          <div class="stat-value">{{ $customer->payments_count }}</div>
        </div>
        
        <div>
          <div class="stat-title">Pending Payments</div>
          <div class="stat-value">
            {{ $customer->payments->where('status', 'pending')->count() }}
          </div>
        </div>
        
        <div>
          <div class="stat-title">Witness Provided</div>
          <div class="stat-value">
            @if($customer->witness_name)
              <span class="status status-paid">Yes</span>
            @else
              <span class="status">No</span>
            @endif
          </div>
        </div>
      </div>
    </div>
    
    <!-- Witness Information Card -->
    @if($customer->witness_name || $customer->witness_phone || $customer->witness_cnic || $customer->witness_address || $customer->witness_image_path)
      <div class="card" style="grid-column: span 12;">
        <div class="card-header">
          <h3>Witness Information</h3>
        </div>
        
        <div style="display: flex; gap: 20px;">
          @if($customer->witness_image_path)
            <img src="{{ asset('storage/' . $customer->witness_image_path) }}" alt="Witness Image" style="width: 100px; height: 100px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border);">
          @endif
          
          <div style="flex: 1;">
            <div class="grid">
              <div>
                <div class="stat-title">Name</div>
                <div>{{ $customer->witness_name ?? '—' }}</div>
              </div>
              <div>
                <div class="stat-title">Phone</div>
                <div>{{ $customer->witness_phone ?? '—' }}</div>
              </div>
              <div>
                <div class="stat-title">CNIC</div>
                <div>{{ $customer->witness_cnic ?? '—' }}</div>
              </div>
              <div>
                <div class="stat-title">Address</div>
                <div>{{ $customer->witness_address ?? '—' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    @endif
  </div>

  <!-- Payment History Card -->
  <div class="card" style="margin-top: 20px;">
    <div class="card-header">
      <h3>Payment History</h3>
    </div>
    
    @if($customer->payments->isEmpty())
      <p class="text-muted">No payment history available.</p>
    @else
      <div class="table-responsive">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>Payment ID</th>
              <th>Agreement ID</th>
              <th>Product</th>
              <th>Amount</th>
              <th>Due Date</th>
              <th>Status</th>
              <th>Paid Date</th>
            </tr>
          </thead>
          <tbody>
            @foreach($customer->payments->sortByDesc('due_date') as $payment)
              <tr>
                <td>{{ $payment->id }}</td>
                <td>
                  <a href="{{ route('agreements.show', $payment->agreement) }}">#{{ $payment->agreement->id }}</a>
                </td>
                <td>{{ optional($payment->agreement->product)->name ?? '—' }}</td>
                <td>{{ $currency }}{{ number_format($payment->amount, 2) }}</td>
                <td>{{ $payment->due_date->format('M d, Y') }}</td>
                <td>
                  @if($payment->status === 'paid')
                    <span class="status status-paid">Paid</span>
                  @else
                    <span class="status status-pending">Pending</span>
                  @endif
                </td>
                <td>
                  @if($payment->paid_at)
                    {{ $payment->paid_at->format('M d, Y') }}
                  @else
                    —
                  @endif
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    @endif
  </div>

  <!-- Agreements Card -->
  <div class="card" style="margin-top: 20px;">
    <div class="card-header">
      <h3>Instalments</h3>
    </div>
    
    @if($customer->agreements->isEmpty())
      <p class="text-muted">No instalments found for this customer.</p>
    @else
      <div class="table-responsive">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>ID</th>
              <th>Product</th>
              <th>Total Amount</th>
              <th>Down Payment</th>
              <th>Instalments</th>
              <th>Status</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            @foreach($customer->agreements as $a)
              <tr>
                <td>{{ $a->id }}</td>
                <td>{{ optional($a->product)->name ?? '—' }}</td>
                <td>{{ $currency }}{{ number_format($a->total_amount, 2) }}</td>
                <td>{{ $currency }}{{ number_format($a->down_payment, 2) }}</td>
                <td>{{ $a->instalments_count }} × {{ $currency }}{{ number_format($a->instalment_amount, 2) }}</td>
                <td>
                  @if($a->status === 'completed')
                    <span class="status status-paid">Completed</span>
                  @elseif($a->status === 'active')
                    <span class="status status-pending">Active</span>
                  @else
                    <span class="status">Draft</span>
                  @endif
                </td>
                <td>
                  <a class="btn btn-sm btn-secondary" href="{{ route('agreements.show', $a) }}">View</a>
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    @endif
  </div>
@endsection