@extends('layouts/horizontalLayout')

@section('title', 'Branding')

@section('vendor-style')
<link rel="stylesheet" href="{{asset('assets/vendor/libs/select2/select2.css')}}" />
<style>
  .watermark-preview-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  .watermark-logo {
    position: absolute;
    opacity: 1;
    pointer-events: none;
  }
  .fullscreen-preview-bg {
    background: rgba(0,0,0,0.85);
    position: fixed;
    left:0; top:0;
    width:100vw; height:100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
  }
  .fullscreen-preview-bg img {
    max-width: 80vw;
    max-height: 80vh;
    box-shadow:0 0 20px #111;
    background: #fff;
  }
</style>
@endsection

@section('vendor-script')
<script src="{{asset('assets/vendor/libs/jquery-sticky/jquery-sticky.js')}}"></script>
<script src="{{asset('assets/vendor/libs/cleavejs/cleave.js')}}"></script>
<script src="{{asset('assets/vendor/libs/cleavejs/cleave-phone.js')}}"></script>
<script src="{{asset('assets/vendor/libs/select2/select2.js')}}"></script>
@endsection

@section('page-script')
<script src="{{asset('assets/js/form-layouts.js')}}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const watermarkToggle = document.getElementById('watermark_enable');
    const watermarkOptionsSection = document.getElementById('watermark-options-section');
    if (watermarkToggle) {
      watermarkToggle.addEventListener('change', function() {
          watermarkOptionsSection.style.display = watermarkToggle.checked ? '' : 'none';
      });
      watermarkOptionsSection.style.display = watermarkToggle.checked ? '' : 'none';
    }

    // Watermark Preview
    const brandLogoInput = document.getElementById('brand_logo');
    const previewBg = document.getElementById('preview-bg');
    const watermarkLogo = document.getElementById('watermark-logo');
    const watermarkPreviewWrapper = document.getElementById('watermark-preview-wrapper');
    let logoUrl = '';
    let baseImageUrl = previewBg ? previewBg.src : '';

    function updateWatermarkStyles() {
      const size = document.querySelector('[name="watermark_size"]')?.value || 'XX-Large';
      const opacity = document.querySelector('[name="opacity"]')?.value || 100;
      const horizontal = document.querySelector('[name="margin_horizontal"]')?.value || 0;
      const vertical = document.querySelector('[name="margin_vertical"]')?.value || 0;
      let width = '80px', height = '80px';

      if(size === 'Small') { width = height = '40px'; }
      else if(size === 'Medium') { width = height = '60px'; }
      else if(size === 'Large') { width = height = '80px'; }
      else if(size === 'Extra Large') { width = height = '110px'; }
      else if(size === 'XX-Large') { width = height = '150px'; }

      let pos = 'bottom-right';
      const activeBtn = document.querySelector('.watermark-position-btn.active');
      if(activeBtn) pos = activeBtn.dataset.position;

      watermarkLogo.style.top = '';
      watermarkLogo.style.bottom = '';
      watermarkLogo.style.left = '';
      watermarkLogo.style.right = '';
      watermarkLogo.style.transform = '';

      if(pos.includes('top')) watermarkLogo.style.top = vertical+'px';
      if(pos.includes('bottom')) watermarkLogo.style.bottom = vertical+'px';
      if(pos.includes('left')) watermarkLogo.style.left = horizontal+'px';
      if(pos.includes('right')) watermarkLogo.style.right = horizontal+'px';
      if(pos.includes('center')) {
        if(pos === 'top-center') {
          watermarkLogo.style.top = vertical+'px';
          watermarkLogo.style.left = '50%';
          watermarkLogo.style.transform = 'translateX(-50%)';
        }
        if(pos === 'bottom-center') {
          watermarkLogo.style.bottom = vertical+'px';
          watermarkLogo.style.left = '50%';
          watermarkLogo.style.transform = 'translateX(-50%)';
        }
        if(pos === 'center-left') {
          watermarkLogo.style.top = '50%';
          watermarkLogo.style.left = horizontal+'px';
          watermarkLogo.style.transform = 'translateY(-50%)';
        }
        if(pos === 'center-right') {
          watermarkLogo.style.top = '50%';
          watermarkLogo.style.right = horizontal+'px';
          watermarkLogo.style.transform = 'translateY(-50%)';
        }
        if(pos === 'center') {
          watermarkLogo.style.top = '50%';
          watermarkLogo.style.left = '50%';
          watermarkLogo.style.transform = 'translate(-50%,-50%)';
        }
      }
      watermarkLogo.style.width = width;
      watermarkLogo.style.height = height;
      watermarkLogo.style.opacity = parseInt(opacity)/100;
    }

    brandLogoInput && brandLogoInput.addEventListener('change', function(e){
      const file = this.files[0];
      if(file){
        const reader = new FileReader();
        reader.onload = function(ev){
          logoUrl = ev.target.result;
          watermarkLogo.src = logoUrl;
          watermarkLogo.style.display = 'block';
          updateWatermarkStyles();
        };
        reader.readAsDataURL(file);
      }else{
          logoUrl = '';
          watermarkLogo.style.display = 'none';
      }
    });

    document.querySelectorAll('[name="watermark_size"],[name="opacity"],[name="margin_horizontal"],[name="margin_vertical"]').forEach(function(input){
      input.addEventListener('input', updateWatermarkStyles);
    });

    document.querySelectorAll('.watermark-position-btn').forEach(function(btn){
      btn.addEventListener('click', function(){
        document.querySelectorAll('.watermark-position-btn').forEach(b=>b.classList.remove('active'));
        this.classList.add('active');
        document.getElementById('watermark_position').value = this.dataset.position;
        updateWatermarkStyles();
      });
    });

    watermarkPreviewWrapper && watermarkPreviewWrapper.addEventListener('click', function(e){
      e.preventDefault();
      const fs = document.createElement('div');
      fs.className = 'fullscreen-preview-bg';
      fs.innerHTML = `<div style="position:relative;">
        <img src="${baseImageUrl}" style="width:90vw;max-width:1000px;">
        <img src="${logoUrl||watermarkLogo.src}" style="position:absolute;z-index:10;${watermarkLogo.style.cssText}">
        <span style="position:absolute;top:8px;right:20px;color:#fff;font-size:2rem;cursor:pointer;z-index:20;" id="close-fs">&times;</span>
      </div>`;
      document.body.appendChild(fs);
      fs.querySelector('#close-fs').onclick = ()=>fs.remove();
    });

    updateWatermarkStyles();
});
</script>
@endsection

@section('content')
<h4 class="fw-bold py-3 mb-4">Branding Information</h4>

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

<div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <div>
            <b>Name</b>
            &nbsp;&nbsp;&nbsp;
            <b>Events</b>
            &nbsp;&nbsp;&nbsp;
            <b>Created</b>
            &nbsp;&nbsp;&nbsp;
            <b>Action</b>
        </div>
        <a href="{{ route('settings/branding') }}" class="btn btn-success btn-sm">Add Brand</a>
    </div>
    <div class="card-body p-0">
        <table class="table mb-0">
            <tbody>
            @forelse($brandings as $branding)
                <tr>
                    <td>
                        <a href="{{ route('brandings.show', $branding->id) }}">{{ $branding->company_name }}</a>
                    </td>
                    <td>
                        {{-- Events count if available, otherwise leave blank --}}
                    </td>
                    <td>
                        {{ \Carbon\Carbon::parse($branding->created_at)->format('Y-m-d') }}
                    </td>
                    <td>
                        <a href="{{ route('brandings.edit', $branding->id) }}" title="Edit"><i class="bx bx-pencil"></i></a>
                        <a href="{{ route('brandings.show', $branding->id) }}" title="View"><i class="bx bx-show"></i></a>
                        <a href="#" title="Bookmark"><i class="bx bx-bookmark"></i></a>
                        <a href="#" onclick="event.preventDefault(); if(confirm('Delete this branding?')) document.getElementById('delete-branding-{{ $branding->id }}').submit();" title="Delete"><i class="bx bx-trash" style="color:red;"></i></a>
                        <form id="delete-branding-{{ $branding->id }}" action="{{ route('brandings.destroy', $branding->id) }}" method="POST" style="display:none;">
                            @csrf
                            @method('DELETE')
                        </form>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="4" class="text-center">No branding found yet.</td>
                </tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>

<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-header sticky-element bg-label-secondary d-flex justify-content-sm-between align-items-sm-center flex-column flex-sm-row">
        <h5 class="card-title mb-sm-0 me-2">Please fill in your branding details</h5>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-lg-12 mx-auto">
            <form method="POST" action="{{ route('branding.store') }}" enctype="multipart/form-data">
              @csrf
              <!-- Company Name -->
              <div class="mb-3">
                <label for="company_name" class="form-label">Name of your company</label>
                <input type="text" id="company_name" name="company_name" class="form-control" placeholder="Eg. Ace Solutions Pvt Ltd" value="{{ old('company_name') }}" required />
              </div>
              <!-- Brand Logo Upload -->
              <div class="mb-3 d-flex align-items-center">
                <div>
                  <label for="brand_logo" class="form-label">Brand Logo</label>
                  <input class="form-control" type="file" id="brand_logo" name="brand_logo" accept="image/*" required>
                </div>
                <div class="ms-4">
                  <div><b>Instructions to upload logo</b></div>
                  <div><span style="color:green;">●</span> File size should be less than 1MB</div>
                  <div><span style="color:green;">●</span> Recommended width 500px</div>
                  <div><span style="color:orange;">●</span> Choose a correct logo, you won't be able to change the logo later</div>
                </div>
              </div>
              <!-- Contact Info -->
              <div class="row mb-3">
                <div class="col-md-4">
                  <label for="contact_number" class="form-label">Mobile Number</label>
                  <input type="text" id="contact_number" name="contact_number" class="form-control" placeholder="Mobile Number" value="{{ old('contact_number') }}" required />
                </div>
                <div class="col-md-4">
                  <label for="website" class="form-label">Your Website (Optional)</label>
                  <input type="text" id="website" name="website" class="form-control" placeholder="https://yourwebsite.com" value="{{ old('website') }}" />
                </div>
                <div class="col-md-4">
                  <label for="email" class="form-label">Email ID (Optional)</label>
                  <input type="email" id="email" name="email" class="form-control" placeholder="Email ID" value="{{ old('email') }}" />
                </div>
              </div>
              <!-- Social Media -->
              <div class="row mb-3">
                <div class="col-md-3"><input type="text" class="form-control mb-2" placeholder="Facebook" name="facebook" value="{{ old('facebook') }}"></div>
                <div class="col-md-3"><input type="text" class="form-control mb-2" placeholder="Instagram Handle" name="instagram" value="{{ old('instagram') }}"></div>
                <div class="col-md-3"><input type="text" class="form-control mb-2" placeholder="Youtube Channel Name" name="youtube" value="{{ old('youtube') }}"></div>
                <div class="col-md-3"><input type="text" class="form-control mb-2" placeholder="LinkedIn Page" name="linkedin" value="{{ old('linkedin') }}"></div>
                <div class="col-md-3"><input type="text" class="form-control mb-2" placeholder="WhatsApp Number" name="whatsapp" value="{{ old('whatsapp') }}"></div>
                <div class="col-md-3"><input type="text" class="form-control mb-2" placeholder="Twitter Handle" name="twitter" value="{{ old('twitter') }}"></div>
                <div class="col-md-3"><input type="text" class="form-control mb-2" placeholder="Snapchat ID" name="snapchat" value="{{ old('snapchat') }}"></div>
                <div class="col-md-3"><input type="text" class="form-control mb-2" placeholder="TikTok" name="tiktok" value="{{ old('tiktok') }}"></div>
              </div>
              
              <!-- Watermark Toggle -->
              <div class="mb-3">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" name="watermark" id="watermark_enable" value="1" {{ old('watermark') ? 'checked' : '' }}>
                  <label class="form-check-label" for="watermark_enable">
                    Watermark
                  </label>
                </div>
                <div class="form-text mt-1">
                  Your logo will be overlayed on all the images you upload.<br>
                  If you update the logo later you need to manually update watermark from event settings.
                </div>
              </div>
              
              <!-- Watermark Options (shown if enabled) -->
              <div id="watermark-options-section" style="display:none;">
                <div class="row mb-3">
                  <div class="col-md-4">
                    <div><b>Options</b><br><span class="small">Customize the watermark</span></div>
                    <div class="mb-2 mt-2">
                      <label>Margin Horizontal</label>
                      <input type="range" min="0" max="100" value="{{ old('margin_horizontal',0) }}" name="margin_horizontal" class="form-range">
                    </div>
                    <div class="mb-2">
                      <label>Margin Vertical</label>
                      <input type="range" min="0" max="100" value="{{ old('margin_vertical',0) }}" name="margin_vertical" class="form-range">
                    </div>
                    <div class="mb-2">
                      <label>Opacity</label>
                      <input type="range" min="0" max="100" value="{{ old('opacity',100) }}" name="opacity" class="form-range">
                    </div>
                    <div class="mb-2">
                      <label>Watermark Size</label>
                      <select name="watermark_size" class="form-select">
                        <option {{ old('watermark_size') == 'Small' ? 'selected' : '' }}>Small</option>
                        <option {{ old('watermark_size') == 'Medium' ? 'selected' : '' }}>Medium</option>
                        <option {{ old('watermark_size') == 'Large' ? 'selected' : '' }}>Large</option>
                        <option {{ old('watermark_size') == 'Extra Large' ? 'selected' : '' }}>Extra Large</option>
                        <option {{ old('watermark_size','XX-Large') == 'XX-Large' ? 'selected' : '' }}>XX-Large</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div><b>Watermark Position</b><br><span class="small">Choose a position for watermark</span></div>
                    <div class="btn-group-vertical mt-2" role="group">
                      <div class="btn-group" role="group">
                        <button type="button" class="btn btn-outline-secondary watermark-position-btn" data-position="top-left">Top Left</button>
                        <button type="button" class="btn btn-outline-secondary watermark-position-btn" data-position="top-center">Top Center</button>
                        <button type="button" class="btn btn-outline-secondary watermark-position-btn" data-position="top-right">Top Right</button>
                      </div>
                      <div class="btn-group" role="group">
                        <button type="button" class="btn btn-outline-secondary watermark-position-btn" data-position="center-left">Center Left</button>
                        <button type="button" class="btn btn-outline-secondary watermark-position-btn" data-position="center">Center</button>
                        <button type="button" class="btn btn-outline-secondary watermark-position-btn" data-position="center-right">Center Right</button>
                      </div>
                      <div class="btn-group" role="group">
                        <button type="button" class="btn btn-outline-secondary watermark-position-btn active" data-position="bottom-left">Bottom Left</button>
                        <button type="button" class="btn btn-outline-secondary watermark-position-btn" data-position="bottom-center">Bottom Center</button>
                        <button type="button" class="btn btn-outline-secondary watermark-position-btn" data-position="bottom-right">Bottom Right</button>
                      </div>
                    </div>
                    <input type="hidden" name="watermark_position" id="watermark_position" value="bottom-left">
                  </div>
                  <div class="col-md-4">
                    <div><b>Preview</b><br><span class="small">Click to view in fullscreen</span></div>
                    <div class="mt-2 watermark-preview-wrapper" id="watermark-preview-wrapper" style="position:relative;">
                      <img id="preview-bg" src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=400&q=80" class="img-fluid" style="border:1px solid #ccc;"/>
                      <img id="watermark-logo" src="" class="watermark-logo" style="bottom:10px;right:10px;height:80px;display:none;" alt="Watermark Logo">
                    </div>
                  </div>
                </div>
                <div class="row mb-3">
                  <div class="col-md-3">
                    <input type="hidden" name="watermark_preview" value="0">
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" name="watermark_preview" id="watermark_preview" value="1" {{ old('watermark_preview', 1) ? 'checked' : '' }}>
                      <label class="form-check-label" for="watermark_preview">
                        Watermark on Preview<br>
                        <span class="small">Apply watermark on online images</span>
                      </label>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <input type="hidden" name="watermark_download" value="0">
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" name="watermark_download" id="watermark_download" value="1" {{ old('watermark_download', 1) ? 'checked' : '' }}>
                      <label class="form-check-label" for="watermark_download">
                        Watermark on Download<br>
                        <span class="small">Apply watermark on original downloaded images</span>
                      </label>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="d-flex justify-content-end mt-4">
                <button type="submit" class="btn btn-primary">
                  Save Branding Details
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection