@extends('layout')

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

@section('content')
  <div class="header-actions">
    <h2>Add New Customer</h2>
    <div class="spacer"></div>
    <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="card">
    <div class="card-header" style="align-items:center;">
      <div>
        <h3>Customer Information</h3>
        <div class="small text-muted">Enter accurate customer details and documents</div>
      </div>
      <div class="small text-muted">Fields marked with <span style="color:var(--accent);">*</span> are required</div>
    </div>
    
    <form method="post" action="{{ route('customers.store') }}" enctype="multipart/form-data">
      @csrf
      
      <div class="grid" style="grid-template-columns: repeat(2, 1fr); gap: 16px;">
        <div>
          <label for="name">Full Name <span style="color:var(--accent);">*</span></label>
          <input id="name" name="name" value="{{ old('name') }}" placeholder="e.g. Muhammad Ali" required>
          @error('name')<div class="form-error">{{ $message }}</div>@enderror
        </div>
        
        <div>
          <label for="phone">Phone Number <span style="color:var(--accent);">*</span></label>
          <input id="phone" name="phone" value="{{ old('phone') }}" placeholder="03xx-xxxxxxx" required>
          @error('phone')<div class="form-error">{{ $message }}</div>@enderror
        </div>
        
        <div>
          <label for="father_name">Father's Name</label>
          <input id="father_name" name="father_name" value="{{ old('father_name') }}" placeholder="e.g. Ahmed Khan">
          @error('father_name')<div class="form-error">{{ $message }}</div>@enderror
        </div>
        
        <div>
          <label for="email">Email Address</label>
          <input id="email" name="email" type="email" value="{{ old('email') }}" placeholder="name@example.com">
          @error('email')<div class="form-error">{{ $message }}</div>@enderror
        </div>
        
        <div>
          <label for="cnic">CNIC Number</label>
          <input id="cnic" name="cnic" value="{{ old('cnic') }}" placeholder="xxxxx-xxxxxxx-x">
          @error('cnic')<div class="form-error">{{ $message }}</div>@enderror
        </div>
        
        <div class="col-span-full">
          <label for="address">Address</label>
          <input id="address" name="address" value="{{ old('address') }}" placeholder="Street, City, District">
          @error('address')<div class="form-error">{{ $message }}</div>@enderror
        </div>
        
        <!-- Customer Images -->
        <div>
          <label for="image">Customer Image</label>
          <input type="file" id="image" name="image" accept="image/*">
          <div class="small text-muted">Recommended: Square image, max 2MB</div>
          <div id="imagePreview" class="image-preview" style="display:none">
            <img id="imagePreviewImg" alt="Preview" />
          </div>
        </div>
        
        <div>
          <label for="cnic_front">CNIC Front Image</label>
          <input type="file" id="cnic_front" name="cnic_front" accept="image/*">
          <div class="small text-muted">Upload clear image of CNIC front</div>
          <div id="cnicFrontPreview" class="image-preview" style="display:none">
            <img id="cnicFrontPreviewImg" alt="Preview" />
          </div>
        </div>
        
        <div>
          <label for="cnic_back">CNIC Back Image</label>
          <input type="file" id="cnic_back" name="cnic_back" accept="image/*">
          <div class="small text-muted">Upload clear image of CNIC back</div>
          <div id="cnicBackPreview" class="image-preview" style="display:none">
            <img id="cnicBackPreviewImg" alt="Preview" />
          </div>
        </div>
      </div>
      
      <!-- Witness Information -->
      <div class="card" style="margin-top: 24px;">
        <div class="card-header">
          <h3>Witness Information</h3>
          <div class="small text-muted">Optional but recommended for verification</div>
        </div>
        
        <div class="grid" style="grid-template-columns: repeat(2, 1fr); gap: 16px;">
          <div>
            <label for="witness_name">Witness Full Name</label>
            <input id="witness_name" name="witness_name" value="{{ old('witness_name') }}" placeholder="e.g. Ahmed Khan">
          </div>
          
          <div>
            <label for="witness_phone">Witness Phone Number</label>
            <input id="witness_phone" name="witness_phone" value="{{ old('witness_phone') }}" placeholder="03xx-xxxxxxx">
          </div>
          
          <div>
            <label for="witness_cnic">Witness CNIC Number</label>
            <input id="witness_cnic" name="witness_cnic" value="{{ old('witness_cnic') }}" placeholder="xxxxx-xxxxxxx-x">
          </div>
          
          <div class="col-span-full">
            <label for="witness_address">Witness Address</label>
            <input id="witness_address" name="witness_address" value="{{ old('witness_address') }}" placeholder="Street, City, District">
          </div>
          
          <div>
            <label for="witness_image">Witness Image</label>
            <input type="file" id="witness_image" name="witness_image" accept="image/*">
            <div class="small text-muted">Image of witness for verification</div>
            <div id="witnessImagePreview" class="image-preview" style="display:none">
              <img id="witnessImagePreviewImg" alt="Preview" />
            </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.index') }}">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>
          Save Customer
        </button>
      </div>
    </form>
  </div>
  
  <script>
    function bindPreview(inputId, imgId, boxId) {
      const input = document.getElementById(inputId);
      const img = document.getElementById(imgId);
      const box = document.getElementById(boxId);
      if (!input) return;
      input.addEventListener('change', function() {
        const file = this.files && this.files[0];
        if (!file) { box.style.display = 'none'; return; }
        const reader = new FileReader();
        reader.onload = e => {
          img.src = e.target.result;
          box.style.display = 'block';
        };
        reader.readAsDataURL(file);
      });
    }
    bindPreview('image', 'imagePreviewImg', 'imagePreview');
    bindPreview('cnic_front', 'cnicFrontPreviewImg', 'cnicFrontPreview');
    bindPreview('cnic_back', 'cnicBackPreviewImg', 'cnicBackPreview');
    bindPreview('witness_image', 'witnessImagePreviewImg', 'witnessImagePreview');
  </script>
  
  <style>
    .col-span-full { grid-column: 1 / -1; }
    .image-preview { margin-top: 8px; }
    .image-preview img { width: 120px; height: 120px; object-fit: cover; border: 1px solid var(--border); border-radius: 6px; }
    .form-error { color: #b00020; font-size: 12px; margin-top: 6px; }
    @media (max-width: 768px) { .grid { gap: 16px; grid-template-columns: 1fr !important; } }
  </style>
@endsection