@extends('crm.master')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  <!-- Page Header -->
  <div class="row mb-6">
    <div class="col-12">
      <div class="d-flex align-items-center justify-content-between">
        <div>
          <h4 class="mb-1">Business Setup</h4>
          <p class="text-muted mb-0">Manage your business information and settings</p>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <div class="card mb-6">
        <div class="card-header d-flex align-items-center justify-content-between">
          <h5 class="mb-0">Business Setup</h5>
        </div>
        <div class="card-body">
          @include('crm.components.alerts')

          <form action="{{ route('crm.business-setup.update') }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <div class="row">
              <!-- Company Name -->
              <div class="col-md-6 mb-4">
                <label for="company_name" class="form-label">Company Name <span class="text-danger">*</span></label>
                <input
                  type="text"
                  class="form-control @error('company_name') is-invalid @enderror"
                  id="company_name"
                  name="company_name"
                  placeholder="Enter company name"
                  value="{{ old('company_name', $businessSetup?->company_name ?? '') }}"
                  required />
                @error('company_name')
                  <span class="invalid-feedback">{{ $message }}</span>
                @enderror
              </div>

              <!-- Website -->
              <div class="col-md-6 mb-4">
                <label for="website" class="form-label">Website</label>
                <input
                  type="url"
                  class="form-control @error('website') is-invalid @enderror"
                  id="website"
                  name="website"
                  placeholder="https://example.com"
                  value="{{ old('website', $businessSetup?->website ?? '') }}" />
                @error('website')
                  <span class="invalid-feedback">{{ $message }}</span>
                @enderror
              </div>

              <!-- Email Address -->
              <div class="col-md-6 mb-4">
                <label for="email" class="form-label">Email Address <span class="text-danger">*</span></label>
                <input
                  type="email"
                  class="form-control @error('email') is-invalid @enderror"
                  id="email"
                  name="email"
                  placeholder="Enter email"
                  value="{{ old('email', $businessSetup?->email ?? '') }}"
                  required />
                @error('email')
                  <span class="invalid-feedback">{{ $message }}</span>
                @enderror
              </div>

              <!-- Phone Number -->
              <div class="col-md-6 mb-4">
                <label for="phone" class="form-label">Phone Number</label>
                <input
                  type="tel"
                  class="form-control @error('phone') is-invalid @enderror"
                  id="phone"
                  name="phone"
                  placeholder="(512) 970-9566"
                  value="{{ old('phone', $businessSetup?->phone ?? '') }}" />
                @error('phone')
                  <span class="invalid-feedback">{{ $message }}</span>
                @enderror
              </div>

              <!-- Country -->
              <div class="col-md-6 mb-4">
                <label for="country" class="form-label">Country</label>
                <select
                  class="form-select @error('country') is-invalid @enderror"
                  id="country"
                  name="country">
                  <option value="">Select Country</option>
                  <option value="United States" {{ old('country', $businessSetup?->country ?? '') === 'United States' ? 'selected' : '' }}>
                    United States
                  </option>
                </select>
                @error('country')
                  <span class="invalid-feedback d-block">{{ $message }}</span>
                @enderror
              </div>

              <!-- State -->
              <div class="col-md-6 mb-4">
                <label for="state" class="form-label">State</label>
                <input
                  type="text"
                  class="form-control @error('state') is-invalid @enderror"
                  id="state"
                  name="state"
                  placeholder="Enter state"
                  value="{{ old('state', $businessSetup?->state ?? '') }}" />
                @error('state')
                  <span class="invalid-feedback">{{ $message }}</span>
                @enderror
              </div>

              <!-- City -->
              <div class="col-md-6 mb-4">
                <label for="city" class="form-label">City</label>
                <input
                  type="text"
                  class="form-control @error('city') is-invalid @enderror"
                  id="city"
                  name="city"
                  placeholder="Enter city"
                  value="{{ old('city', $businessSetup?->city ?? '') }}" />
                @error('city')
                  <span class="invalid-feedback">{{ $message }}</span>
                @enderror
              </div>

              <!-- Zip Code -->
              <div class="col-md-6 mb-4">
                <label for="zip_code" class="form-label">Zip Code</label>
                <input
                  type="text"
                  class="form-control @error('zip_code') is-invalid @enderror"
                  id="zip_code"
                  name="zip_code"
                  placeholder="78620"
                  value="{{ old('zip_code', $businessSetup?->zip_code ?? '') }}" />
                @error('zip_code')
                  <span class="invalid-feedback">{{ $message }}</span>
                @enderror
              </div>

              <!-- Address -->
              <div class="col-12 mb-4">
                <label for="address" class="form-label">Address</label>
                <textarea
                  class="form-control @error('address') is-invalid @enderror"
                  id="address"
                  name="address"
                  rows="3"
                  placeholder="Enter full address">{{ old('address', $businessSetup?->address ?? '') }}</textarea>
                @error('address')
                  <span class="invalid-feedback">{{ $message }}</span>
                @enderror
              </div>

              <!-- Business Description -->
              <div class="col-12 mb-4">
                <label for="business_description" class="form-label">Business Description</label>
                <textarea
                  class="form-control @error('business_description') is-invalid @enderror"
                  id="business_description"
                  name="business_description"
                  rows="4"
                  placeholder="Enter a brief description of your business...">{{ old('business_description', $businessSetup?->business_description ?? '') }}</textarea>
                @error('business_description')
                  <span class="invalid-feedback">{{ $message }}</span>
                @enderror
              </div>

              <!-- Company Policy -->
              <div class="col-12 mb-4">
                <label for="company_policy" class="form-label">Company Policy</label>
                <textarea
                  class="form-control @error('company_policy') is-invalid @enderror"
                  id="company_policy"
                  name="company_policy"
                  rows="8"
                  placeholder="Enter your company policy here...">{{ old('company_policy', $businessSetup?->company_policy ?? '') }}</textarea>
                  @error('company_policy')
                    <span class="invalid-feedback">{{ $message }}</span>
                  @enderror
                <small class="text-muted d-block mt-2">Rich formatting: <strong>Ctrl+B</strong> for bold, <em>Ctrl+I</em> for italic, <u>Ctrl+U</u> for underline</small>
              </div>
            </div>

              <div class="row">
              <!-- Business Logo Upload -->
              <div class="col-6 mb-4">
                  <label for="logo" class="form-label">Business Logo</label>
                  <input
                      type="file"
                      class="form-control @error('logo') is-invalid @enderror"
                      id="logo"
                      name="logo"
                      accept="image/*"
                      onchange="previewLogo(this)" />
                  @error('logo')
                  <span class="invalid-feedback">{{ $message }}</span>
                  @enderror

                  <!-- Logo Preview -->
                  <div class="mt-3" id="logoPreviewContainer" style="{{ $businessSetup?->logo ? '' : 'display: none;' }}">
                      <img
                          id="logoPreview"
                          src="{{ $businessSetup?->logo ? asset('storage/logos/' . $businessSetup->logo) : '' }}"
                          alt="Business Logo"
                          class="img-thumbnail"
                          style="max-height: 150px; max-width: 300px;" />
                      <p class="text-muted mt-1 mb-0 small">Current Logo</p>
                  </div>
              </div>

              <div class="col-6 mb-4">
                  <label for="favicon" class="form-label">Favicon</label>
                  <input
                      type="file"
                      class="form-control @error('favicon') is-invalid @enderror"
                      id="favicon"
                      name="favicon"
                      accept="image/*"
                      onchange="previewFavicon(this)" />
                  @error('favicon')
                  <span class="invalid-feedback">{{ $message }}</span>
                  @enderror
                  <small class="text-muted d-block mt-1">Recommended: 32×32 or 64×64 px. PNG or ICO preferred.</small>

                  <div class="mt-3" id="faviconPreviewContainer" style="{{ $businessSetup?->favicon ? '' : 'display: none;' }}">
                      <img
                          id="faviconPreview"
                          src="{{ $businessSetup?->favicon ? asset('storage/favicons/' . $businessSetup->favicon) : '' }}"
                          alt="Favicon"
                          class="img-thumbnail"
                          style="max-height: 64px; max-width: 64px;" />
                      <p class="text-muted mt-1 mb-0 small">Current Favicon</p>
                  </div>
              </div>
              </div>

            <!-- Submit Button -->
            <div class="mt-4">
              <button type="submit" class="btn btn-primary" id="submitBtn">
                <i class="icon-base ti tabler-check me-2 icon-14px"></i>
                Save
              </button>
              <a href="{{ route('crm.dashboard') }}" class="btn btn-label-secondary ms-2">
                <i class="icon-base ti tabler-x me-2 icon-14px"></i>
                Cancel
              </a>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- CKEditor for Company Policy -->
<script type="text/javascript">
(function() {
  // Function to initialize CKEditor
  function initCompanyPolicyCKEditor() {
    if (typeof CKEDITOR !== 'undefined') {
      // Check if already initialized
      if (CKEDITOR.instances['company_policy']) {
        CKEDITOR.instances['company_policy'].destroy(true);
      }

      // Initialize CKEditor with options
      CKEDITOR.replace('company_policy', {
        height: 400,
        toolbar: [
          { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike'] },
          { name: 'paragraph', items: ['BulletedList', 'NumberedList', '-', 'Blockquote'] },
          { name: 'links', items: ['Link', 'Unlink'] },
          { name: 'insert', items: ['Image', 'Table', 'HorizontalRule'] },
          { name: 'styles', items: ['Format', 'FontSize', 'TextColor', 'BGColor'] },
          { name: 'tools', items: ['Maximize', 'Source'] }
        ]
      });
    } else {
      // Retry if CKEDITOR not loaded yet
      setTimeout(initCompanyPolicyCKEditor, 100);
    }
  }

  // Initialize when DOM is ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initCompanyPolicyCKEditor);
  } else {
    initCompanyPolicyCKEditor();
  }

  // Handle form submission - sync CKEditor data
  document.addEventListener('DOMContentLoaded', function() {
    var form = document.querySelector('form');
    if (form) {
      form.addEventListener('submit', function(e) {
        // Sync CKEditor data before form submission
        if (typeof CKEDITOR !== 'undefined' && CKEDITOR.instances['company_policy']) {
          CKEDITOR.instances['company_policy'].updateElement();
        }
      });
    }
  });
})();
</script>
<script>
    function previewLogo(input) {
        const previewContainer = document.getElementById('logoPreviewContainer');
        const preview = document.getElementById('logoPreview');

        if (input.files && input.files[0]) {
            const reader = new FileReader();

            reader.onload = function(e) {
                preview.src = e.target.result;
                previewContainer.style.display = 'block';
            };

            reader.readAsDataURL(input.files[0]);
        }
    }

    function previewFavicon(input) {
        const previewContainer = document.getElementById('faviconPreviewContainer');
        const preview = document.getElementById('faviconPreview');

        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                preview.src = e.target.result;
                previewContainer.style.display = 'block';
            };
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>
@endsection