@extends('layouts.app')

@section('content')
<main id="mainContent">
  <!-- Portal Header Banner -->
  <header class="page-header" style="padding: 2.5rem 0 1.5rem; background: var(--bg-surface); border-bottom: 1px solid var(--border-light);">
    <div class="container">
      <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
        <div>
          <span class="section-badge" style="margin-bottom: 0.4rem;">
            <i class="fas fa-building"></i> Enterprise Registration • Maharashtra Employment Service
          </span>
          <h1 style="font-size: 1.85rem; font-family: var(--font-heading); font-weight: 700; color: var(--text-heading); margin: 0;">
            Business Profile & Statutory Verification
          </h1>
          <p style="color: var(--text-light); font-size: 0.9rem; margin-top: 0.25rem;">
            Register your corporate credentials, GSTIN, PAN, and statutory incorporation documents for District Employment Exchange approval.
          </p>
        </div>

        <div style="display: flex; gap: 0.75rem; align-items: center;">
          <a href="{{ route('employer.dashboard') }}" class="btn btn-outline btn-sm">
            <i class="fas fa-arrow-left"></i> Employer Dashboard
          </a>
        </div>
      </div>
    </div>
  </header>

  <!-- Main Content -->
  <section class="section" style="padding: 2.5rem 0;">
    <div class="container" style="max-width: 880px;">
      
      <!-- Notifications -->
      @if(session('success'))
        <div class="alert alert-success" style="padding: 1rem 1.25rem; background: rgba(16, 185, 129, 0.1); border: 1px solid var(--success); border-radius: var(--radius-md); color: var(--success); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem;">
          <i class="fas fa-check-circle" style="font-size: 1.2rem;"></i>
          <span>{{ session('success') }}</span>
        </div>
      @endif

      @if(session('warning'))
        <div class="alert alert-warning" style="padding: 1rem 1.25rem; background: rgba(245, 158, 11, 0.1); border: 1px solid #f59e0b; border-radius: var(--radius-md); color: #f59e0b; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem;">
          <i class="fas fa-exclamation-triangle" style="font-size: 1.2rem;"></i>
          <span>{{ session('warning') }}</span>
        </div>
      @endif

      @if($errors->any())
        <div class="alert alert-danger" style="padding: 1rem 1.25rem; background: rgba(239, 68, 68, 0.1); border: 1px solid #ef4444; border-radius: var(--radius-md); color: #ef4444; margin-bottom: 1.5rem;">
          <div style="font-weight: 600; margin-bottom: 0.35rem; display: flex; align-items: center; gap: 0.5rem;">
            <i class="fas fa-times-circle"></i> Please resolve the following errors:
          </div>
          <ul style="margin: 0; padding-left: 1.5rem; font-size: 0.9rem;">
            @foreach($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div>
      @endif

      <!-- Verification Status Callout -->
      <div style="border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 2rem; border: 1px solid;
           @if($profile->isVerified())
             background: rgba(16, 185, 129, 0.08); border-color: var(--success); color: var(--success);
           @elseif($profile->isRejected())
             background: rgba(239, 68, 68, 0.08); border-color: #ef4444; color: #ef4444;
           @elseif($profile->isPending())
             background: rgba(245, 158, 11, 0.08); border-color: #f59e0b; color: #b45309;
           @else
             background: rgba(0, 102, 255, 0.08); border-color: var(--accent); color: var(--accent);
           @endif">
        
        <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
          <div style="display: flex; align-items: center; gap: 1rem;">
            <div style="font-size: 2rem;">
              @if($profile->isVerified())
                <i class="fas fa-certificate"></i>
              @elseif($profile->isRejected())
                <i class="fas fa-exclamation-triangle"></i>
              @elseif($profile->isPending())
                <i class="fas fa-hourglass-half"></i>
              @else
                <i class="fas fa-info-circle"></i>
              @endif
            </div>
            <div>
              <h3 style="margin: 0; font-size: 1.15rem; font-family: var(--font-heading); color: var(--text-heading);">
                @if($profile->isVerified())
                  Verified Enterprise Employer • Registration Active
                @elseif($profile->isRejected())
                  Verification Correction Required
                @elseif($profile->isPending())
                  Verification Under Review by District Employment Exchange
                @else
                  Draft Profile • Complete Documents to Submit
                @endif
              </h3>
              <p style="margin: 0.25rem 0 0; font-size: 0.88rem; color: var(--text-body);">
                @if($profile->isVerified())
                  Your corporate credentials have been verified by the competent authority. Registration ID: <strong>{{ $user->registration_id }}</strong>
                @elseif($profile->isRejected())
                  <strong>Reason for rejection:</strong> {{ $profile->rejection_reason }}
                @elseif($profile->isPending())
                  Your documents are currently queued for verification by the District Employment Officer. Turnaround: 24-48 business hours.
                @else
                  Please fill in your company details and upload required statutory certificates below.
                @endif
              </p>
            </div>
          </div>

          <div>
            <span class="badge" style="font-size: 0.82rem; padding: 0.4rem 0.85rem; text-transform: uppercase; letter-spacing: 0.5px;
                  @if($profile->isVerified())
                    background: var(--success); color: #fff;
                  @elseif($profile->isRejected())
                    background: #ef4444; color: #fff;
                  @elseif($profile->isPending())
                    background: #f59e0b; color: #fff;
                  @else
                    background: var(--accent); color: #fff;
                  @endif">
              {{ ucfirst($profile->verification_status) }}
            </span>
          </div>
        </div>
      </div>

      <!-- Main Business Particulars Form -->
      <div class="service-card reveal" style="padding: 2.5rem; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); margin-bottom: 2.5rem;">
        
        <form action="{{ route('employer.profile.update') }}" method="POST" id="employerProfileForm">
          @csrf

          <!-- Section 1: Business Identity -->
          <div style="border-bottom: 1px solid var(--border-light); padding-bottom: 1rem; margin-bottom: 1.5rem;">
            <h3 style="font-size: 1.25rem; font-family: var(--font-heading); font-weight: 700; color: var(--text-heading); margin: 0 0 0.35rem;">
              <i class="fas fa-building" style="color: var(--accent); margin-right: 0.4rem;"></i> Organization Details
            </h3>
            <p style="color: var(--text-light); font-size: 0.88rem; margin: 0;">
              Legal business name as registered with the Ministry of Corporate Affairs (MCA) or Registrar of Firms.
            </p>
          </div>

          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem;">
            
            <!-- Company Name -->
            <div class="form-group">
              <label for="company_name" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
                Legal Company Name <span style="color: #ef4444;">*</span>
              </label>
              <input type="text" name="company_name" id="company_name" class="form-control" placeholder="e.g. Tata Consultancy Services Ltd" value="{{ old('company_name', $profile->company_name) }}" required>
              @error('company_name')
                <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.3rem;">{{ $message }}</span>
              @enderror
            </div>

            <!-- Trade Name -->
            <div class="form-group">
              <label for="trade_name" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
                Trade Name / DBA (Optional)
              </label>
              <input type="text" name="trade_name" id="trade_name" class="form-control" placeholder="e.g. TCS Global" value="{{ old('trade_name', $profile->trade_name) }}">
              @error('trade_name')
                <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.3rem;">{{ $message }}</span>
              @enderror
            </div>

          </div>

          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem;">
            
            <!-- Entity Type -->
            <div class="form-group">
              <label for="entity_type" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
                Entity Constitution Type <span style="color: #ef4444;">*</span>
              </label>
              <select name="entity_type" id="entity_type" class="form-control" required>
                @foreach([
                  'Private Limited Company (Pvt Ltd)',
                  'Public Limited Company (Ltd)',
                  'Limited Liability Partnership (LLP)',
                  'Partnership Firm',
                  'Sole Proprietorship',
                  'Public Sector Undertaking (PSU)',
                  'Government Department / Autonomous Body',
                  'Trust / Society / Section 8 NGO'
                ] as $type)
                  <option value="{{ $type }}" {{ old('entity_type', $profile->entity_type) === $type ? 'selected' : '' }}>{{ $type }}</option>
                @endforeach
              </select>
              @error('entity_type')
                <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.3rem;">{{ $message }}</span>
              @enderror
            </div>

            <!-- Industry Sector -->
            <div class="form-group">
              <label for="industry_sector" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
                Industry Sector <span style="color: #ef4444;">*</span>
              </label>
              <select name="industry_sector" id="industry_sector" class="form-control" required>
                <option value="">-- Select Industry --</option>
                @foreach([
                  'Information Technology & Software Services',
                  'Banking, Financial Services & Insurance (BFSI)',
                  'Healthcare, Hospitals & Pharmaceuticals',
                  'Automotive, Manufacturing & Engineering',
                  'Retail, FMCG & E-Commerce',
                  'Telecommunications & Infrastructure',
                  'Logistics, Warehousing & Supply Chain',
                  'Construction, Real Estate & Architecture',
                  'Hospitality, Travel & Aviation',
                  'Education, EdTech & Training'
                ] as $sector)
                  <option value="{{ $sector }}" {{ old('industry_sector', $profile->industry_sector) === $sector ? 'selected' : '' }}>{{ $sector }}</option>
                @endforeach
              </select>
              @error('industry_sector')
                <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.3rem;">{{ $message }}</span>
              @enderror
            </div>

            <!-- Year of Establishment -->
            <div class="form-group">
              <label for="year_of_establishment" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
                Year Established <span style="color: #ef4444;">*</span>
              </label>
              <input type="number" name="year_of_establishment" id="year_of_establishment" class="form-control" placeholder="2010" min="1850" max="{{ date('Y') }}" value="{{ old('year_of_establishment', $profile->year_of_establishment) }}" required>
              @error('year_of_establishment')
                <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.3rem;">{{ $message }}</span>
              @enderror
            </div>

          </div>

          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin-bottom: 2rem;">
            
            <!-- Company Size -->
            <div class="form-group">
              <label for="company_size" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
                Employee Headcount <span style="color: #ef4444;">*</span>
              </label>
              <select name="company_size" id="company_size" class="form-control" required>
                <option value="">-- Select Size --</option>
                @foreach(['1-10 Employees', '11-50 Employees', '51-200 Employees', '201-500 Employees', '500+ Employees'] as $size)
                  <option value="{{ $size }}" {{ old('company_size', $profile->company_size) === $size ? 'selected' : '' }}>{{ $size }}</option>
                @endforeach
              </select>
              @error('company_size')
                <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.3rem;">{{ $message }}</span>
              @enderror
            </div>

            <!-- Website URL -->
            <div class="form-group">
              <label for="website_url" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
                Corporate Website (Optional)
              </label>
              <input type="url" name="website_url" id="website_url" class="form-control" placeholder="https://example.com" value="{{ old('website_url', $profile->website_url) }}">
              @error('website_url')
                <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.3rem;">{{ $message }}</span>
              @enderror
            </div>

          </div>

          <!-- Section 2: Statutory Numbers -->
          <div style="border-bottom: 1px solid var(--border-light); padding-bottom: 1rem; margin-bottom: 1.5rem; margin-top: 2rem;">
            <h3 style="font-size: 1.25rem; font-family: var(--font-heading); font-weight: 700; color: var(--text-heading); margin: 0 0 0.35rem;">
              <i class="fas fa-file-contract" style="color: var(--accent); margin-right: 0.4rem;"></i> Statutory Registrations & Tax Identifiers
            </h3>
            <p style="color: var(--text-light); font-size: 0.88rem; margin: 0;">
              Government portal compliance: Enter your 10-digit PAN and statutory registration identifiers.
            </p>
          </div>

          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem;">
            
            <!-- Company PAN -->
            <div class="form-group">
              <label for="pan" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
                Company PAN <span style="color: #ef4444;">*</span>
              </label>
              <input type="text" name="pan" id="pan" class="form-control" placeholder="AAACT1234F" maxlength="10" value="{{ old('pan', $profile->pan) }}" required style="font-family: monospace; text-transform: uppercase;">
              <span style="font-size: 0.78rem; color: var(--text-light); margin-top: 0.25rem; display: block;">
                10-character alphanumeric PAN (4th character C/P/F/A/T/etc).
              </span>
              @error('pan')
                <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.3rem;">{{ $message }}</span>
              @enderror
            </div>

            <!-- GSTIN -->
            <div class="form-group">
              <label for="gstin" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
                GSTIN (Goods & Services Tax)
              </label>
              <input type="text" name="gstin" id="gstin" class="form-control" placeholder="27AAACT1234F1Z5" maxlength="15" value="{{ old('gstin', $profile->gstin) }}" style="font-family: monospace; text-transform: uppercase;">
              <span style="font-size: 0.78rem; color: var(--text-light); margin-top: 0.25rem; display: block;">
                15-character GSTIN (State code 27 for Maharashtra).
              </span>
              @error('gstin')
                <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.3rem;">{{ $message }}</span>
              @enderror
            </div>

          </div>

          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin-bottom: 2rem;">
            
            <!-- CIN / LLPIN -->
            <div class="form-group">
              <label for="cin_llpin" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
                CIN / LLPIN (MCA)
              </label>
              <input type="text" name="cin_llpin" id="cin_llpin" class="form-control" placeholder="U72900MH2018PTC123456" maxlength="21" value="{{ old('cin_llpin', $profile->cin_llpin) }}" style="font-family: monospace; text-transform: uppercase;">
              @error('cin_llpin')
                <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.3rem;">{{ $message }}</span>
              @enderror
            </div>

            <!-- Udyam -->
            <div class="form-group">
              <label for="udyam_number" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
                Udyam Registration (MSME)
              </label>
              <input type="text" name="udyam_number" id="udyam_number" class="form-control" placeholder="UDYAM-MH-20-0012345" maxlength="25" value="{{ old('udyam_number', $profile->udyam_number) }}" style="font-family: monospace; text-transform: uppercase;">
              @error('udyam_number')
                <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.3rem;">{{ $message }}</span>
              @enderror
            </div>

            <!-- EPF / ESIC -->
            <div class="form-group">
              <label for="epf_code" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
                EPF Establishment Code
              </label>
              <input type="text" name="epf_code" id="epf_code" class="form-control" placeholder="MH/NGP/0012345/000" value="{{ old('epf_code', $profile->epf_code) }}">
            </div>

          </div>

          <!-- Section 3: Registered Address -->
          <div style="border-bottom: 1px solid var(--border-light); padding-bottom: 1rem; margin-bottom: 1.5rem; margin-top: 2rem;">
            <h3 style="font-size: 1.25rem; font-family: var(--font-heading); font-weight: 700; color: var(--text-heading); margin: 0 0 0.35rem;">
              <i class="fas fa-map-marker-alt" style="color: var(--accent); margin-right: 0.4rem;"></i> Registered Corporate Office
            </h3>
            <p style="color: var(--text-light); font-size: 0.88rem; margin: 0;">
              Specify your primary Maharashtra operating district for employment exchange coordination.
            </p>
          </div>

          <div class="form-group" style="margin-bottom: 1.25rem;">
            <label for="registered_address" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
              Full Registered Address <span style="color: #ef4444;">*</span>
            </label>
            <textarea name="registered_address" id="registered_address" class="form-control" rows="2" placeholder="e.g. Plot No 42, IT Park, MIDC, Nagpur" required>{{ old('registered_address', $profile->registered_address) }}</textarea>
            @error('registered_address')
              <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.3rem;">{{ $message }}</span>
            @enderror
          </div>

          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; margin-bottom: 2rem;">
            
            <div class="form-group">
              <label for="state" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
                State <span style="color: #ef4444;">*</span>
              </label>
              <input type="text" name="state" id="state" class="form-control" value="{{ old('state', $profile->state ?? 'Maharashtra') }}" readonly style="background: var(--bg-surface);">
            </div>

            <div class="form-group">
              <label for="district" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
                District (Maharashtra) <span style="color: #ef4444;">*</span>
              </label>
              <select name="district" id="district" class="form-control" required>
                <option value="">-- Select District --</option>
                @foreach($districts as $d)
                  <option value="{{ $d->name }}" {{ old('district', $profile->district ?? $user->assigned_district) === $d->name ? 'selected' : '' }}>
                    {{ $d->name }}
                  </option>
                @endforeach
              </select>
              @error('district')
                <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.3rem;">{{ $message }}</span>
              @enderror
            </div>

            <div class="form-group">
              <label for="taluka" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
                Taluka / Tehsil <span style="color: #ef4444;">*</span>
              </label>
              <input type="text" name="taluka" id="taluka" class="form-control" placeholder="e.g. Nagpur Urban" value="{{ old('taluka', $profile->taluka) }}" required>
            </div>

            <div class="form-group">
              <label for="pincode" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
                6-Digit PIN Code <span style="color: #ef4444;">*</span>
              </label>
              <input type="text" name="pincode" id="pincode" class="form-control" placeholder="440022" maxlength="6" value="{{ old('pincode', $profile->pincode) }}" required>
              @error('pincode')
                <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.3rem;">{{ $message }}</span>
              @enderror
            </div>

          </div>

          <!-- Section 4: Authorized Signatory -->
          <div style="border-bottom: 1px solid var(--border-light); padding-bottom: 1rem; margin-bottom: 1.5rem; margin-top: 2rem;">
            <h3 style="font-size: 1.25rem; font-family: var(--font-heading); font-weight: 700; color: var(--text-heading); margin: 0 0 0.35rem;">
              <i class="fas fa-user-tie" style="color: var(--accent); margin-right: 0.4rem;"></i> Authorized Signatory / HR Head
            </h3>
            <p style="color: var(--text-light); font-size: 0.88rem; margin: 0;">
              Primary executive point of contact for official employment correspondence.
            </p>
          </div>

          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin-bottom: 2rem;">
            
            <div class="form-group">
              <label for="signatory_name" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
                Full Name <span style="color: #ef4444;">*</span>
              </label>
              <input type="text" name="signatory_name" id="signatory_name" class="form-control" placeholder="e.g. Rajesh Kulkarni" value="{{ old('signatory_name', $profile->signatory_name) }}" required>
            </div>

            <div class="form-group">
              <label for="signatory_designation" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
                Official Designation <span style="color: #ef4444;">*</span>
              </label>
              <input type="text" name="signatory_designation" id="signatory_designation" class="form-control" placeholder="e.g. Head of HR / Director" value="{{ old('signatory_designation', $profile->signatory_designation) }}" required>
            </div>

            <div class="form-group">
              <label for="signatory_phone" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
                Direct Mobile (10 digits) <span style="color: #ef4444;">*</span>
              </label>
              <input type="text" name="signatory_phone" id="signatory_phone" class="form-control" placeholder="9890123456" maxlength="10" value="{{ old('signatory_phone', $profile->signatory_phone) }}" required>
            </div>

            <div class="form-group">
              <label for="signatory_email" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
                Corporate Email <span style="color: #ef4444;">*</span>
              </label>
              <input type="email" name="signatory_email" id="signatory_email" class="form-control" placeholder="hr@company.com" value="{{ old('signatory_email', $profile->signatory_email) }}" required>
            </div>

          </div>

          <div style="text-align: right; border-top: 1px solid var(--border-light); padding-top: 1.5rem;">
            <button type="submit" class="btn btn-primary">
              <i class="fas fa-save"></i> Save Business Particulars
            </button>
          </div>

        </form>
      </div>

      <!-- Section 5: Statutory Document Uploads Form -->
      <div class="service-card reveal" style="padding: 2.5rem; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg);">
        
        <div style="border-bottom: 1px solid var(--border-light); padding-bottom: 1rem; margin-bottom: 1.5rem;">
          <span class="section-badge" style="margin-bottom: 0.4rem;"><i class="fas fa-file-upload"></i> Audit Verification</span>
          <h3 style="font-size: 1.25rem; font-family: var(--font-heading); font-weight: 700; color: var(--text-heading); margin: 0 0 0.35rem;">
            Statutory Document Proofs
          </h3>
          <p style="color: var(--text-light); font-size: 0.88rem; margin: 0;">
            Upload scanned copies in PDF, JPG, or PNG format (Max 5MB each). Documents are audited by the District Employment Officer before public vacancy postings are approved.
          </p>
        </div>

        <form action="{{ route('employer.profile.documents') }}" method="POST" enctype="multipart/form-data" id="employerDocumentsForm">
          @csrf

          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; margin-bottom: 2rem;">
            
            <!-- Document 1: Certificate of Incorporation -->
            <div style="background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.25rem;">
              <label class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.35rem; display: block;">
                Certificate of Incorporation / Registration Proof
              </label>
              <span style="font-size: 0.78rem; color: var(--text-light); display: block; margin-bottom: 0.75rem;">
                MCA Certificate, Shop Act License, or Partnership Deed.
              </span>
              <input type="file" name="incorporation_cert" class="form-control" accept=".pdf,.jpg,.jpeg,.png">
              @if($profile->incorporation_cert_path)
                <div style="margin-top: 0.5rem; font-size: 0.82rem; color: var(--success);">
                  <i class="fas fa-check-circle"></i> Uploaded: 
                  <a href="{{ asset('storage/' . $profile->incorporation_cert_path) }}" target="_blank" style="color: var(--accent); text-decoration: underline;">View File</a>
                </div>
              @endif
            </div>

            <!-- Document 2: GST Registration Certificate -->
            <div style="background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.25rem;">
              <label class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.35rem; display: block;">
                GST Registration Certificate (Form REG-06)
              </label>
              <span style="font-size: 0.78rem; color: var(--text-light); display: block; margin-bottom: 0.75rem;">
                Official GST certificate issued by GSTN.
              </span>
              <input type="file" name="gst_cert" class="form-control" accept=".pdf,.jpg,.jpeg,.png">
              @if($profile->gst_cert_path)
                <div style="margin-top: 0.5rem; font-size: 0.82rem; color: var(--success);">
                  <i class="fas fa-check-circle"></i> Uploaded: 
                  <a href="{{ asset('storage/' . $profile->gst_cert_path) }}" target="_blank" style="color: var(--accent); text-decoration: underline;">View File</a>
                </div>
              @endif
            </div>

            <!-- Document 3: Company PAN Card -->
            <div style="background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.25rem;">
              <label class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.35rem; display: block;">
                Company PAN Card Copy
              </label>
              <span style="font-size: 0.78rem; color: var(--text-light); display: block; margin-bottom: 0.75rem;">
                Scanned copy of corporate entity PAN.
              </span>
              <input type="file" name="pan_card" class="form-control" accept=".pdf,.jpg,.jpeg,.png">
              @if($profile->pan_card_path)
                <div style="margin-top: 0.5rem; font-size: 0.82rem; color: var(--success);">
                  <i class="fas fa-check-circle"></i> Uploaded: 
                  <a href="{{ asset('storage/' . $profile->pan_card_path) }}" target="_blank" style="color: var(--accent); text-decoration: underline;">View File</a>
                </div>
              @endif
            </div>

            <!-- Document 4: Authorized Signatory ID -->
            <div style="background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.25rem;">
              <label class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.35rem; display: block;">
                Signatory ID Proof / Board Resolution
              </label>
              <span style="font-size: 0.78rem; color: var(--text-light); display: block; margin-bottom: 0.75rem;">
                Letter of Authorization or Director's ID proof.
              </span>
              <input type="file" name="signatory_id" class="form-control" accept=".pdf,.jpg,.jpeg,.png">
              @if($profile->signatory_id_path)
                <div style="margin-top: 0.5rem; font-size: 0.82rem; color: var(--success);">
                  <i class="fas fa-check-circle"></i> Uploaded: 
                  <a href="{{ asset('storage/' . $profile->signatory_id_path) }}" target="_blank" style="color: var(--accent); text-decoration: underline;">View File</a>
                </div>
              @endif
            </div>

          </div>

          <div style="display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border-light); padding-top: 1.5rem; flex-wrap: wrap; gap: 1rem;">
            <span style="font-size: 0.85rem; color: var(--text-light);">
              <i class="fas fa-shield-alt"></i> Encrypted storage conforming to IT Act, 2000.
            </span>
            <button type="submit" class="btn btn-primary">
              <i class="fas fa-paper-plane"></i> Upload Documents & Submit for Verification
            </button>
          </div>

        </form>

      </div>

    </div>
  </section>
</main>
@endsection