{{-- resources/views/greetings/create.blade.php --}}
@include('vendorr.header')

<style>
  body { background-color: #f4f4f4; }
  .greeting-preview {
    width: 100%;
    max-width: 600px;
    height: 350px;
    margin: 20px auto;
    border-radius: 8px;
    overflow: hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    background-size: cover;
    background-position: center;
  }
  .greeting-preview .logo-top-right {
    position:absolute;
    top:10px;
    right:10px;
    max-width:80px;
    max-height:80px;
  }
  .greeting-preview .greeting-text {
    position:relative;
    z-index:5;
    font-size:28px;
    text-align:center;
    padding: 0 10px;
    word-break:break-word;
  }
</style>

<div class="main-content app-content">
  <div class="main-container container-fluid">
    <div class="breadcrumb-header justify-content-between">
      <div class="my-auto"><h4 class="page-title">Greeting Creator</h4></div>
    </div>

    <div class="card">
      <div class="card-body">

        {{-- Validation Errors --}}
        @if ($errors->any())
          <div class="alert alert-danger">
            <ul class="mb-0">
              @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
              @endforeach
            </ul>
          </div>
        @endif

        @if (session('success'))
          <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if (session('error'))
          <div class="alert alert-danger">{{ session('error') }}</div>
        @endif

        <h2>Create Greeting</h2>

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

          {{-- BACKGROUND TYPE --}}
          <div class="row">
            <div class="mb-3 col-md-4">
              <label for="bg_type">Background Type:</label>
              <select name="background_type" id="bg_type" class="form-control">
                <option value="template" {{ old('background_type') === 'template' ? 'selected' : '' }}>Template</option>
                <option value="image" {{ old('background_type') === 'image' ? 'selected' : '' }}>Image</option>
                <option value="color" {{ old('background_type') === 'color' ? 'selected' : '' }}>Color</option>
              </select>
            </div>

            {{-- TEMPLATE SELECTOR --}}
            <div class="mb-3 col-md-8" id="template_selector" style="display:none;">
              <label for="template_select">Choose a Template</label>
              <div class="d-flex">
                <select id="template_select" name="template_id" class="form-control" style="max-width:420px;">
                  <option value="">— Select template —</option>
                  @foreach($templates as $t)
                    @php
                      $templateUrl = $t->template;
                      if ($templateUrl && ! (Str::startsWith($templateUrl, 'http') || Str::startsWith($templateUrl, '/storage') || Str::startsWith($templateUrl, '/uploads'))) {
                          $templateUrl = url('uploads/greeting_templates/' . ltrim($t->template, '/'));
                      }
                    @endphp
                    <option value="{{ $t->id }}"
                            data-template-url="{{ e($templateUrl) }}"
                            data-template-logo="{{ e($t->logo_image ?? '') }}">
                      {{ $t->name }}
                    </option>
                  @endforeach
                </select>

                <button type="button" id="apply_template_btn" class="btn btn-outline-primary ms-2">Apply</button>
                <button type="button" id="clear_template_btn" class="btn btn-outline-secondary ms-2">Clear</button>
              </div>
              <small class="form-text text-muted">Applying a template will use its image as background (or template logo). You can still override with uploads.</small>
            </div>
          </div>

          {{-- Hidden fields for server --}}
          {{-- <input type="hidden" name="template_id" id="template_id" value="{{ old('template_id','') }}"> --}}
          <input type="hidden" name="existing_background_value" id="existing_background_value" value="{{ old('existing_background_value','') }}">
          <input type="hidden" name="existing_logo_image" id="existing_logo_image" value="{{ old('existing_logo_image','') }}">

          {{-- Background: color control --}}
          <div class="row" id="bg_color_row" style="margin-top:12px; display:none;">
            <div class="mb-3 col-md-4">
              <label for="background_color">Background Color:</label>
              <input id="background_color" type="color" name="background_value"
                     value="{{ old('background_value','#ffffff') }}" class="form-control" style="height:36px;">
            </div>
          </div>

          {{-- Background: image upload --}}
          <div class="row" id="bg_image_row" style="margin-top:12px; display:none;">
            <div class="mb-3 col-md-6">
              <label for="background_image">Background Image (upload):</label>
              <input id="background_image" type="file" name="background_value" accept="image/*" class="form-control">
              <div class="form-text">Upload an image to override the template background.</div>
            </div>

            <div class="mb-3 col-md-6" id="template_preview_box" style="display:none;">
              <label>Template preview</label>
              <div id="template_preview" style="width:100%; height:120px; background-size:cover; background-position:center; border:1px solid #eee; border-radius:6px;"></div>
            </div>
          </div>

          {{-- TEXT --}}
          <div class="row" style="margin-top:12px;">
            <div class="mb-3 col-md-12">
              <label for="text_content">Text:</label>
              <input id="text_content" type="text" name="text_content" class="form-control"
                     placeholder="Enter your greeting text here" maxlength="250" value="{{ old('text_content','') }}">
            </div>
          </div>

          <div class="row">
            <div class="mb-3 col-md-4">
              <label for="text_color">Text Color:</label>
              <input id="text_color" type="color" name="text_color" class="form-control" style="height:36px;"
                     value="{{ old('text_color','#000000') }}">
            </div>

            <div class="mb-3 col-md-4">
              <label for="text_font">Font:</label>
              <select id="text_font" name="text_font" class="form-control">
                <option value="Arial" {{ old('text_font') === 'Arial' ? 'selected' : '' }}>Arial</option>
                <option value="Georgia" {{ old('text_font') === 'Georgia' ? 'selected' : '' }}>Georgia</option>
                <option value="Comic Sans MS" {{ old('text_font') === 'Comic Sans MS' ? 'selected' : '' }}>Comic Sans MS</option>
                <option value="Tahoma" {{ old('text_font') === 'Tahoma' ? 'selected' : '' }}>Tahoma</option>
              </select>
            </div>

            <div class="mb-3 col-md-4">
              <label for="logo_image">Logo (Top Right):</label>
              <input id="logo_image" type="file" name="logo_image" class="form-control" accept="image/*">
              <small class="form-text text-muted">Upload overrides template logo.</small>
            </div>
          </div>

          {{-- website, phone, city --}}
          <div class="row">
            <div class="mb-3 col-md-4">
              <label for="website">Website</label>
              <input id="website" name="website" type="url" class="form-control" placeholder="https://example.com" value="{{ old('website') }}">
            </div>
            <div class="mb-3 col-md-4">
              <label for="phone">Phone</label>
              <input id="phone" name="phone" type="tel" class="form-control" placeholder="+91-XXXXXXXXXX" value="{{ old('phone') }}">
            </div>
            {{-- <div class="mb-3 col-md-4">
              <label for="city">City</label>
              <input id="city" name="city" type="text" class="form-control" placeholder="City name" value="{{ old('city') }}">
            </div> --}}
          </div>

          <button type="submit" class="btn btn-primary">Next: Preview / Save</button>
        </form>

        {{-- Live preview --}}
        <div class="mt-4 text-center">
          <h5>Live Preview</h5>
          <div id="preview" class="greeting-preview" style="background-color:#ffffff;">
            <img id="previewLogo" class="logo-top-right" src="" alt="" style="display:none;">
            <div id="previewText" class="greeting-text" style="color:#000000;font-family:Arial;">Your text here</div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

@include('vendorr.footer')

<script>
  // small helper (do NOT use $ to avoid colliding with jQuery)
  function el(id){ return document.getElementById(id); }

  const bgType = el('bg_type');

  const templateSelectorWrap = el('template_selector');
  const templateSelect = el('template_select');
  const applyTemplateBtn = el('apply_template_btn');
  const clearTemplateBtn = el('clear_template_btn');

  // hidden fields expected by controller
  const templateIdInput = el('template_id');
  const existingBgInput = el('existing_background_value');
  const existingLogoInput = el('existing_logo_image');

  const bgColorRow = el('bg_color_row');
  const bgImageRow = el('bg_image_row');
  const templatePreviewBox = el('template_preview_box');
  const templatePreview = el('template_preview');

  const backgroundColor = el('background_color');
  const backgroundImage = el('background_image');

  const textContent = el('text_content');
  const textColor = el('text_color');
  const textFont = el('text_font');
  const logoImage = el('logo_image');

  const preview = el('preview');
  const previewText = el('previewText');
  const previewLogo = el('previewLogo');

  function show(elm){ if(elm) elm.style.display = ''; }
  function hide(elm){ if(elm) elm.style.display = 'none'; }

  function toggleBgInputs() {
    const val = bgType ? bgType.value : 'color';
    if (val === 'template') {
      if (templateSelectorWrap) show(templateSelectorWrap);
      if (bgImageRow) hide(bgImageRow);
      if (bgColorRow) hide(bgColorRow);

      if (existingBgInput && existingBgInput.value) {
        templatePreview.style.backgroundImage = `url(${existingBgInput.value})`;
        templatePreviewBox.style.display = '';
        preview.style.backgroundImage = `url(${existingBgInput.value})`;
        preview.style.backgroundSize = 'cover';
        preview.style.backgroundPosition = 'center';
      } else {
        if (templatePreview) templatePreview.style.backgroundImage = '';
        if (templatePreviewBox) templatePreviewBox.style.display = 'none';
      }
    } else if (val === 'image') {
      if (templateSelectorWrap) hide(templateSelectorWrap);
      if (bgImageRow) show(bgImageRow);
      if (bgColorRow) hide(bgColorRow);

      if (existingBgInput && existingBgInput.value) {
        preview.style.backgroundImage = `url(${existingBgInput.value})`;
        preview.style.backgroundSize = 'cover';
        preview.style.backgroundPosition = 'center';
      }
    } else { // color
      if (templateSelectorWrap) hide(templateSelectorWrap);
      if (bgImageRow) hide(bgImageRow);
      if (bgColorRow) show(bgColorRow);
      if (templatePreviewBox) templatePreviewBox.style.display = 'none';
      if (backgroundColor && backgroundColor.value) {
        preview.style.backgroundImage = '';
        preview.style.backgroundColor = backgroundColor.value;
      } else {
        preview.style.backgroundImage = '';
        preview.style.backgroundColor = '#ffffff';
      }
    }
  }

  function applySelectedTemplate() {
    if (!templateSelect) return alert('No template selector found.');
    const opt = templateSelect.options[templateSelect.selectedIndex];
    if (!opt || !opt.value) return alert('Please select a template first.');

    const templateId = opt.value;
    const templateUrl = opt.dataset.templateUrl || '';
    const templateLogo = opt.dataset.templateLogo || '';

    // set hidden fields for server
    if (templateIdInput) templateIdInput.value = templateId;
    if (existingBgInput) existingBgInput.value = templateUrl;
    if (existingLogoInput) existingLogoInput.value = templateLogo;

    // apply to preview: template is full background image
    if (templateUrl) {
      preview.style.backgroundImage = `url(${templateUrl})`;
      preview.style.backgroundSize = 'cover';
      preview.style.backgroundPosition = 'center';
    } else {
      preview.style.backgroundImage = '';
    }

    // show template preview
    if (templatePreview) {
      templatePreview.style.backgroundImage = templateUrl ? `url(${templateUrl})` : '';
      templatePreviewBox.style.display = templateUrl ? '' : 'none';
    }

    if (templateLogo && previewLogo && (!logoImage || !logoImage.files.length)) {
      previewLogo.src = templateLogo;
      previewLogo.style.display = 'block';
      if (existingLogoInput) existingLogoInput.value = templateLogo;
    }
  }

  function clearTemplateSelection() {
    if (templateSelect) templateSelect.value = '';
    if (templateIdInput) templateIdInput.value = '';
    if (existingBgInput) existingBgInput.value = '';
    if (existingLogoInput) existingLogoInput.value = '';

    if (templatePreview) templatePreview.style.backgroundImage = '';
    if (templatePreviewBox) templatePreviewBox.style.display = 'none';

    if (preview) {
      preview.style.backgroundImage = '';
      preview.style.backgroundColor = (backgroundColor && backgroundColor.value) ? backgroundColor.value : '#ffffff';
    }

    if (previewLogo && (!logoImage || !logoImage.files.length)) {
      previewLogo.style.display = 'none';
      previewLogo.src = '';
    }
  }

  if (backgroundColor) {
    backgroundColor.addEventListener('input', () => {
      if (bgType && bgType.value === 'color') {
        if (preview) {
          preview.style.backgroundImage = '';
          preview.style.backgroundColor = backgroundColor.value;
        }
        if (templateIdInput) templateIdInput.value = '';
        if (existingBgInput) existingBgInput.value = '';
      }
    });
  }

  if (backgroundImage) {
    backgroundImage.addEventListener('change', (e) => {
      const file = e.target.files[0];
      if (!file) {
        if (existingBgInput && existingBgInput.value && bgType && bgType.value === 'image') {
          preview.style.backgroundImage = `url(${existingBgInput.value})`;
        } else if (preview) {
          preview.style.backgroundImage = '';
          preview.style.backgroundColor = '#ffffff';
        }
        return;
      }
      if (templateIdInput) templateIdInput.value = '';
      if (existingBgInput) existingBgInput.value = '';

      const reader = new FileReader();
      reader.onload = (ev) => {
        preview.style.backgroundImage = `url(${ev.target.result})`;
        preview.style.backgroundSize = 'cover';
        preview.style.backgroundPosition = 'center';
      };
      reader.readAsDataURL(file);
    });
  }

  if (logoImage) {
    logoImage.addEventListener('change', (e) => {
      const file = e.target.files[0];
      if (!file) {
        if (existingLogoInput && existingLogoInput.value) {
          previewLogo.src = existingLogoInput.value;
          previewLogo.style.display = 'block';
        } else if (previewLogo) {
          previewLogo.style.display = 'none';
          previewLogo.src = '';
        }
        return;
      }
      if (templateIdInput) templateIdInput.value = '';
      if (existingLogoInput) existingLogoInput.value = '';

      const reader = new FileReader();
      reader.onload = (ev) => {
        previewLogo.src = ev.target.result;
        previewLogo.style.display = 'block';
      };
      reader.readAsDataURL(file);
    });
  }

  if (textContent) textContent.addEventListener('input', () => { if(previewText) previewText.textContent = textContent.value || 'Your text here'; });
  if (textColor) textColor.addEventListener('input', () => { if(previewText) previewText.style.color = textColor.value; });
  if (textFont) textFont.addEventListener('change', () => { if(previewText) previewText.style.fontFamily = textFont.value; });

  if (applyTemplateBtn) applyTemplateBtn.addEventListener('click', applySelectedTemplate);
  if (clearTemplateBtn) clearTemplateBtn.addEventListener('click', clearTemplateSelection);

  window.addEventListener('DOMContentLoaded', () => {
    toggleBgInputs();

    // initialize preview text/font/color
    if (previewText) previewText.textContent = (textContent && textContent.value) ? textContent.value : 'Your text here';
    if (textColor && textColor.value && previewText) previewText.style.color = textColor.value;
    if (textFont && textFont.value && previewText) previewText.style.fontFamily = textFont.value;

    if (existingBgInput && existingBgInput.value && bgType && bgType.value === 'template') {
      if (templatePreview) templatePreview.style.backgroundImage = `url(${existingBgInput.value})`;
      if (templatePreviewBox) templatePreviewBox.style.display = '';
      if (preview) {
        preview.style.backgroundImage = `url(${existingBgInput.value})`;
        preview.style.backgroundSize = 'cover';
        preview.style.backgroundPosition = 'center';
      }
    }

    if (existingLogoInput && existingLogoInput.value && previewLogo) {
      previewLogo.src = existingLogoInput.value;
      previewLogo.style.display = 'block';
    }
  });

  if (bgType) bgType.addEventListener('change', toggleBgInputs);
</script>