@extends('layout')

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

@section('content')
  <div class="header-actions">
    <h2>Edit Customer</h2>
    <div class="spacer"></div>
    <a class="btn btn-secondary" href="{{ route('customers.show', $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"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
      View Profile
    </a>
  </div>

  <div class="card">
    <div class="card-header">
      <h3>Customer Information</h3>
    </div>
    
    <form method="post" action="{{ route('customers.update', $customer) }}" enctype="multipart/form-data">
      @csrf
      @method('PUT')
      
      <div class="grid">
        <div>
          <label for="name">Full Name *</label>
          <input id="name" name="name" value="{{ old('name', $customer->name) }}" required>
        </div>
        
        <div>
          <label for="phone">Phone Number *</label>
          <input id="phone" name="phone" value="{{ old('phone', $customer->phone) }}" required>
        </div>
        
        <div>
          <label for="email">Email Address</label>
          <input id="email" name="email" type="email" value="{{ old('email', $customer->email) }}">
        </div>
        
        <div>
          <label for="cnic">CNIC Number</label>
          <input id="cnic" name="cnic" value="{{ old('cnic', $customer->cnic) }}">
        </div>
        
        <div class="col-span-full">
          <label for="address">Address</label>
          <input id="address" name="address" value="{{ old('address', $customer->address) }}">
        </div>
        
        <!-- Customer Images -->
        <div>
          <label for="image">Customer Image</label>
          @if($customer->image_path)
            <div style="margin-bottom: 10px;">
              <img src="{{ asset('storage/' . $customer->image_path) }}" alt="Customer Image" style="max-width: 100px; max-height: 100px; border: 1px solid var(--border); padding: 3px; border-radius: 4px;">
            </div>
          @endif
          <input type="file" id="image" name="image" accept="image/*">
          <div class="small text-muted">Leave blank to keep current image</div>
        </div>
        
        <div>
          <label for="cnic_front">CNIC Front Image</label>
          @if($customer->cnic_front_path)
            <div style="margin-bottom: 10px;">
              <img src="{{ asset('storage/' . $customer->cnic_front_path) }}" alt="CNIC Front" style="max-width: 100px; max-height: 100px; border: 1px solid var(--border); padding: 3px; border-radius: 4px;">
            </div>
          @endif
          <input type="file" id="cnic_front" name="cnic_front" accept="image/*">
          <div class="small text-muted">Leave blank to keep current image</div>
        </div>
        
        <div>
          <label for="cnic_back">CNIC Back Image</label>
          @if($customer->cnic_back_path)
            <div style="margin-bottom: 10px;">
              <img src="{{ asset('storage/' . $customer->cnic_back_path) }}" alt="CNIC Back" style="max-width: 100px; max-height: 100px; border: 1px solid var(--border); padding: 3px; border-radius: 4px;">
            </div>
          @endif
          <input type="file" id="cnic_back" name="cnic_back" accept="image/*">
          <div class="small text-muted">Leave blank to keep current image</div>
        </div>
      </div>
      
      <!-- Witness Information -->
      <div class="card" style="margin-top: 30px;">
        <div class="card-header">
          <h3>Witness Information</h3>
        </div>
        
        <div class="grid">
          <div>
            <label for="witness_name">Witness Full Name</label>
            <input id="witness_name" name="witness_name" value="{{ old('witness_name', $customer->witness_name) }}">
          </div>
          
          <div>
            <label for="witness_phone">Witness Phone Number</label>
            <input id="witness_phone" name="witness_phone" value="{{ old('witness_phone', $customer->witness_phone) }}">
          </div>
          
          <div>
            <label for="witness_cnic">Witness CNIC Number</label>
            <input id="witness_cnic" name="witness_cnic" value="{{ old('witness_cnic', $customer->witness_cnic) }}">
          </div>
          
          <div class="col-span-full">
            <label for="witness_address">Witness Address</label>
            <input id="witness_address" name="witness_address" value="{{ old('witness_address', $customer->witness_address) }}">
          </div>
          
          <div>
            <label for="witness_image">Witness Image</label>
            @if($customer->witness_image_path)
              <div style="margin-bottom: 10px;">
                <img src="{{ asset('storage/' . $customer->witness_image_path) }}" alt="Witness Image" style="max-width: 100px; max-height: 100px; border: 1px solid var(--border); padding: 3px; border-radius: 4px;">
              </div>
            @endif
            <input type="file" id="witness_image" name="witness_image" accept="image/*">
            <div class="small text-muted">Leave blank to keep current image</div>
          </div>
        </div>
      </div>
      
      <div style="margin-top:20px; display:flex; gap:12px; justify-content: flex-end;">
        <a class="btn btn-secondary" href="{{ route('customers.show', $customer) }}">Cancel</a>
        <button class="btn btn-primary" type="submit">
          <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="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
          Update Customer
        </button>
      </div>
    </form>
  </div>
  
  <style>
    .col-span-full {
      grid-column: 1 / -1;
    }
    
    /* Make the form more responsive on mobile */
    @media (max-width: 768px) {
      .grid {
        gap: 16px;
      }
      
      .card {
        padding: 16px;
      }
      
      .card-header {
        margin-bottom: 16px;
        padding-bottom: 10px;
      }
      
      img {
        max-width: 80px;
        max-height: 80px;
      }
    }
  </style>
@endsection