@php
  $configData = Helper::appClasses();
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Create Tenant')

@section('vendor-style')
  @vite([
    'resources/assets/vendor/libs/@form-validation/form-validation.scss',
    'resources/assets/vendor/libs/bs-stepper/bs-stepper.scss',
    'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss'
    ])
@endsection

@section('vendor-script')
  @vite([
    'resources/assets/vendor/libs/@form-validation/popular.js',
    'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
    'resources/assets/vendor/libs/@form-validation/auto-focus.js',
    'resources/assets/vendor/libs/bs-stepper/bs-stepper.js',
    'resources/assets/vendor/libs/sweetalert2/sweetalert2.js'
    ])
@endsection

@section('page-script')
  @vite([
    'resources/assets/js/app/tenant-create.js'
    ])
  
  {{-- Pass session data and config to JavaScript --}}
  <script>
    // Pass database prefix to JavaScript
    window.tenantCreateConfig = {
      databasePrefix: @json(config('tenancy.database.prefix', 'tenant'))
    };
    
    // Pass success data if available
    @if(session('success') && session('tenant_summary'))
      window.tenantSuccessData = {
        tenantSummary: @json(session('tenant_summary'))
      };
    @endif
    
    // Pass error data if available
    @if(session('error'))
      window.tenantErrorData = {
        errorMessage: @json(session('error'))
      };
    @endif
  </script>
@endsection

@section('content')
  <div class="row">
    <div class="col">
      <h4>Create Tenant</h4>
      <p class="text-muted">Create a new tenant with complete setup</p>
    </div>
    <div class="col text-end">
      <a href="/tenant" class="btn btn-label-secondary" id="backToTenantsBtn">
        <i class="bx bx-arrow-back bx-sm me-0 me-sm-2"></i> Back to Tenants
      </a>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <!-- Multi-step Wizard -->
      <div class="bs-stepper mt-2" id="wizard-create-tenant">
        <div class="bs-stepper-header">
          <div class="step active" data-target="#tenant-info">
            <button type="button" class="step-trigger">
              <span class="bs-stepper-circle">1</span>
              <span class="bs-stepper-label">
                <span class="bs-stepper-title">Tenant Information</span>
              </span>
            </button>
          </div>
          <div class="line">
            <i class="bx bx-chevron-right"></i>
          </div>
          <div class="step" data-target="#company-info">
            <button type="button" class="step-trigger">
              <span class="bs-stepper-circle">2</span>
              <span class="bs-stepper-label">
                <span class="bs-stepper-title">Company Information</span>
              </span>
            </button>
          </div>
          <div class="line">
            <i class="bx bx-chevron-right"></i>
          </div>
          <div class="step" data-target="#domain-info">
            <button type="button" class="step-trigger">
              <span class="bs-stepper-circle">3</span>
              <span class="bs-stepper-label">
                <span class="bs-stepper-title">Domain Configuration</span>
              </span>
            </button>
          </div>
          <div class="line">
            <i class="bx bx-chevron-right"></i>
          </div>
          <div class="step" data-target="#admin-info">
            <button type="button" class="step-trigger">
              <span class="bs-stepper-circle">4</span>
              <span class="bs-stepper-label">
                <span class="bs-stepper-title">Admin User</span>
              </span>
            </button>
          </div>
        </div>
        <div class="bs-stepper-content">
          <form id="createTenantForm" action="/tenant/store" method="POST">
            @csrf
            
            <!-- Step 1: Tenant Information -->
            <div id="tenant-info" class="content active" style="display: block !important; visibility: visible !important;">
              <div class="content-header mb-3">
                <h5 class="mb-1">Tenant Information</h5>
                <p>Enter the basic tenant details</p>
              </div>
              <div class="row">
                <div class="col-12 mb-3">
                  <label class="form-label" for="tenant_id">Tenant ID <span class="text-danger">*</span></label>
                  <input type="text" class="form-control" id="tenant_id" name="tenant_id" 
                         placeholder="e.g., hubomoto" 
                         pattern="[a-zA-Z0-9_-]+"
                         title="Only letters, numbers, underscores, and hyphens allowed" />
                  <small class="text-muted">Only letters, numbers, underscores, and hyphens allowed</small>
                </div>
                <div class="col-12 mb-3">
                  <label class="form-label" for="tenant_name">Tenant Name <span class="text-danger">*</span></label>
                  <input type="text" class="form-control" id="tenant_name" name="tenant_name" 
                         placeholder="Enter tenant name" />
                </div>
                <div class="col-12 mb-3">
                  <label class="form-label" for="database_name">Database Name <span class="text-danger">*</span></label>
                  <input type="text" class="form-control" id="database_name" name="database_name" 
                         placeholder="Auto-generated from tenant ID" 
                         readonly
                         autocomplete="off"
                         data-lpignore="true"
                         data-form-type="other" />
                  <small class="text-muted">Auto-generated from tenant ID (read-only preview)</small>
                </div>
              </div>
              <div class="d-flex justify-content-between">
                <a href="/tenant" class="btn btn-label-secondary cancelBtn">
                  <i class="bx bx-chevron-left bx-sm ms-sm-n2"></i>
                  <span class="align-middle d-sm-inline-block d-none">Cancel</span>
                </a>
                <button type="button" class="btn btn-primary btn-next">
                  <span class="align-middle d-sm-inline-block d-none me-sm-1">Next</span>
                  <i class="bx bx-chevron-right bx-sm me-sm-n2"></i>
                </button>
              </div>
            </div>

            <!-- Step 2: Company Information -->
            <div id="company-info" class="content">
              <div class="content-header mb-3">
                <h5 class="mb-1">Company Information</h5>
                <p>Enter company details</p>
              </div>
              <div class="row">
                <div class="col-12 mb-3">
                  <label class="form-label" for="company_name">Company Name <span class="text-danger">*</span></label>
                  <input type="text" class="form-control" id="company_name" name="company_name" 
                         placeholder="Enter company name" />
                </div>
                <div class="col-12 mb-3">
                  <label class="form-label" for="company_email">Company Email <span class="text-danger">*</span></label>
                  <input type="email" class="form-control" id="company_email" name="company_email" 
                         placeholder="info@company.com" />
                </div>
                <div class="col-12 mb-3">
                  <label class="form-label" for="company_phone">Company Phone</label>
                  <input type="text" class="form-control" id="company_phone" name="company_phone" 
                         placeholder="+1-555-0123" />
                </div>
                <div class="col-12 mb-3">
                  <label class="form-label" for="company_address">Company Address</label>
                  <textarea class="form-control" id="company_address" name="company_address" rows="2" 
                            placeholder="123 Business Street, City, State 12345"></textarea>
                </div>
                <div class="col-12 mb-3">
                  <label class="form-label" for="company_website">Company Website</label>
                  <input type="url" class="form-control" id="company_website" name="company_website" 
                         placeholder="https://company.com" />
                </div>
              </div>
              <div class="d-flex justify-content-between">
                <button type="button" class="btn btn-label-secondary btn-prev">
                  <i class="bx bx-chevron-left bx-sm ms-sm-n2"></i>
                  <span class="align-middle d-sm-inline-block d-none">Previous</span>
                </button>
                <button type="button" class="btn btn-primary btn-next">
                  <span class="align-middle d-sm-inline-block d-none me-sm-1">Next</span>
                  <i class="bx bx-chevron-right bx-sm me-sm-n2"></i>
                </button>
              </div>
            </div>

            <!-- Step 3: Domain Configuration -->
            <div id="domain-info" class="content">
              <div class="content-header mb-3">
                <h5 class="mb-1">Domain Configuration</h5>
                <p>Configure tenant domains</p>
              </div>
              <div class="row">
                <div class="col-12 mb-3">
                  <label class="form-label" for="local_domain">Local Domain</label>
                  <input type="text" class="form-control" id="local_domain" name="local_domain" 
                         placeholder="tenant.localhost" />
                  <small class="text-muted">e.g., tenant.localhost (for local development)</small>
                </div>
                <div class="col-12 mb-3">
                  <label class="form-label" for="production_domain">Production Domain</label>
                  <input type="text" class="form-control" id="production_domain" name="production_domain" 
                         placeholder="tenant.worka.bblabs.dev" />
                  <small class="text-muted">e.g., tenant.worka.bblabs.dev (for production)</small>
                </div>
                <div class="col-12">
                  <div class="alert alert-info">
                    <i class="bx bx-info-circle"></i>
                    <strong>Note:</strong> At least one domain (local or production) is required.
                  </div>
                </div>
              </div>
              <div class="d-flex justify-content-between">
                <button type="button" class="btn btn-label-secondary btn-prev">
                  <i class="bx bx-chevron-left bx-sm ms-sm-n2"></i>
                  <span class="align-middle d-sm-inline-block d-none">Previous</span>
                </button>
                <button type="button" class="btn btn-primary btn-next">
                  <span class="align-middle d-sm-inline-block d-none me-sm-1">Next</span>
                  <i class="bx bx-chevron-right bx-sm me-sm-n2"></i>
                </button>
              </div>
            </div>

            <!-- Step 4: Admin User Information -->
            <div id="admin-info" class="content">
              <div class="content-header mb-3">
                <h5 class="mb-1">Admin User Information</h5>
                <p>Create the admin user account</p>
              </div>
              <div class="row">
                <div class="col-12 col-md-6 mb-3">
                  <label class="form-label" for="admin_first_name">First Name <span class="text-danger">*</span></label>
                  <input type="text" class="form-control" id="admin_first_name" name="admin_first_name" 
                         placeholder="Admin" />
                </div>
                <div class="col-12 col-md-6 mb-3">
                  <label class="form-label" for="admin_last_name">Last Name <span class="text-danger">*</span></label>
                  <input type="text" class="form-control" id="admin_last_name" name="admin_last_name" 
                         placeholder="User" />
                </div>
                <div class="col-12 mb-3">
                  <label class="form-label" for="admin_email">Admin Email <span class="text-danger">*</span></label>
                  <input type="email" class="form-control" id="admin_email" name="admin_email" 
                         placeholder="admin@tenant.com" />
                </div>
                <div class="col-12 mb-3">
                  <label class="form-label" for="admin_password">Password <span class="text-danger">*</span></label>
                  <div class="input-group input-group-merge">
                    <input type="password" class="form-control" id="admin_password" name="admin_password" 
                           placeholder="Minimum 8 characters" minlength="8" />
                    <span class="input-group-text cursor-pointer" id="togglePassword">
                      <i class="bx bx-hide"></i>
                    </span>
                  </div>
                  <div class="password-strength mt-2" id="passwordStrength" style="display: none;">
                    <div class="progress" style="height: 5px;">
                      <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                    </div>
                    <small class="text-muted" id="passwordStrengthText"></small>
                  </div>
                  <small class="text-muted">Minimum 8 characters required</small>
                </div>
                <div class="col-12 mb-3">
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="web_access" name="web_access" value="1" checked>
                    <label class="form-check-label" for="web_access">
                      Grant web access (API token will be generated)
                    </label>
                  </div>
                </div>
                <div class="col-12 mb-3">
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="recreate_if_exists" name="recreate_if_exists" value="1">
                    <label class="form-check-label text-warning" for="recreate_if_exists">
                      <strong>Recreate if tenant exists</strong> (This will delete existing data!)
                    </label>
                  </div>
                </div>
              </div>
              <div class="d-flex justify-content-between">
                <button type="button" class="btn btn-label-secondary btn-prev">
                  <i class="bx bx-chevron-left bx-sm ms-sm-n2"></i>
                  <span class="align-middle d-sm-inline-block d-none">Previous</span>
                </button>
                <button type="submit" class="btn btn-success btn-submit" id="submitTenantForm">
                  <span class="align-middle d-sm-inline-block">Create Tenant</span>
                  <i class="bx bx-check bx-sm ms-sm-n2"></i>
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>

      <!-- Progress Indicator (hidden by default) -->
      <div id="tenantCreationProgress" class="d-none">
        <div class="text-center py-4">
          <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
          </div>
          <p class="mt-3 mb-0">Creating tenant... This may take a few moments.</p>
          <small class="text-muted">Please do not close this window.</small>
        </div>
      </div>
    </div>
  </div>

  <!-- Success Modal -->
  <div class="modal fade" id="tenantSuccessModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header bg-success">
          <h5 class="modal-title text-white">
            <i class="bx bx-check-circle me-2"></i>Tenant Created Successfully
          </h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="table-responsive">
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th>Property</th>
                  <th>Value</th>
                </tr>
              </thead>
              <tbody id="tenantSummaryTable">
                <!-- Populated by JavaScript -->
              </tbody>
            </table>
          </div>
        </div>
        <div class="modal-footer">
          <a href="/tenant" class="btn btn-primary" id="modalBackToTenantsBtn">Back to Tenants</a>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
@endsection