@php
use Illuminate\Support\Facades\Auth;
$configData = Helper::appClasses();
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Register Client - South Front Technologies')

@section('content')
<div class="container-fluid">
  <div class="row">
    <div class="col-md-8 mx-auto">
      <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
          <h5 class="mb-0">Register New Property Owner Client</h5>
          <a href="{{ route('admin.clients') }}" class="btn btn-sm btn-secondary">Back to Directory</a>
        </div>
        <div class="card-body">
          @if ($errors->any())
            <div class="alert alert-danger mb-4">
              <ul class="mb-0">
                @foreach ($errors->all() as $error)
                  <li>{{ $error }}</li>
                @endforeach
              </ul>
            </div>
          @endif

          <form action="{{ route('admin.clients.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <h6 class="text-primary mb-3">1. Account Credentials</h6>
            
            <div class="mb-3">
              <label for="name" class="form-label">Client / Contact Name</label>
              <input type="text" class="form-control" id="name" name="name" placeholder="e.g. John Doe" value="{{ old('name') }}" required />
            </div>

            <div class="row">
              <div class="col-md-6 mb-3">
                <label for="email" class="form-label">Email Address</label>
                <input type="email" class="form-control" id="email" name="email" placeholder="e.g. owner@domain.com" value="{{ old('email') }}" required />
              </div>
              <div class="col-md-6 mb-3">
                <label for="password" class="form-label">Password</label>
                <input type="password" class="form-control" id="password" name="password" placeholder="Min 8 characters" required />
              </div>
            </div>

            <hr class="my-4" />
            <h6 class="text-primary mb-3">2. Entity & Tax Identification</h6>

            <div class="mb-3">
              <label for="owner_type" class="form-label">Client Entity Type</label>
              <select class="form-select" id="owner_type" name="owner_type" required>
                <option value="individual" {{ old('owner_type') == 'individual' ? 'selected' : '' }}>Individual Owner</option>
                <option value="company" {{ old('owner_type') == 'company' ? 'selected' : '' }}>Company / Corporate entity</option>
              </select>
            </div>

            <div class="mb-3">
              <label for="tax_id" class="form-label">Tax PIN / Personal Identification Number (PIN)</label>
              <input type="text" class="form-control" id="tax_id" name="tax_id" placeholder="e.g. A012345678Z" value="{{ old('tax_id') }}" required />
            </div>

            <!-- Corporate Specific Block -->
            <div id="company_fields" style="display: none;">
              <div class="row">
                <div class="col-md-6 mb-3">
                  <label for="company_name" class="form-label">Company Name</label>
                  <input type="text" class="form-control" id="company_name" name="company_name" placeholder="e.g. Oakwood Holdings LTD" value="{{ old('company_name') }}" />
                </div>
                <div class="col-md-6 mb-3">
                  <label for="registration_number" class="form-label">Company Registration Number</label>
                  <input type="text" class="form-control" id="registration_number" name="registration_number" placeholder="e.g. CPR/2020/08123" value="{{ old('registration_number') }}" />
                </div>
              </div>
            </div>

            <hr class="my-4" />
            <h6 class="text-primary mb-3">3. KYC Document (Optional Upload)</h6>

            <div class="mb-4">
              <label for="kyc_document" class="form-label">KYC Document Attachment (PDF, JPG, PNG)</label>
              <input class="form-control" type="file" id="kyc_document" name="kyc_document" />
              <div class="form-text">Uploading a document will automatically set this owner's KYC status to <strong>Approved</strong>.</div>
            </div>

            <div class="d-flex gap-2">
              <button type="submit" class="btn btn-primary">Create Client Profile</button>
              <a href="{{ route('admin.clients') }}" class="btn btn-outline-secondary">Cancel</a>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var ownerTypeSelect = document.getElementById('owner_type');
    var companyFieldsDiv = document.getElementById('company_fields');
    var companyNameInput = document.getElementById('company_name');
    var regNumInput = document.getElementById('registration_number');

    function toggleCompanyFields() {
      if (ownerTypeSelect.value === 'company') {
        companyFieldsDiv.style.display = 'block';
        companyNameInput.setAttribute('required', 'required');
        regNumInput.setAttribute('required', 'required');
      } else {
        companyFieldsDiv.style.display = 'none';
        companyNameInput.removeAttribute('required');
        regNumInput.removeAttribute('required');
      }
    }

    ownerTypeSelect.addEventListener('change', toggleCompanyFields);
    // Trigger on load for old state validation redirect
    toggleCompanyFields();
  });
</script>
@endsection