@extends('layouts.master')
<style>
.sortable-ghost {
    opacity: 0.4;
    background: #d1e4ff;
    border-radius: 10px;
    transform: scale(0.98);
}
</style>
@section('content')
<div class="container-fluid">
<meta name="csrf-token" content="{{ csrf_token() }}">
    <h3 class="mb-4">Landing Page Settings</h3>

    <form action="{{ route('admin.settings.landing.update') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <!-- =============================
             HERO SECTION
        ============================== -->
        <x-ui.card title="Hero Section" collapsible="true" defaultOpen="true" class="mb-4">
            <div class="card-body row g-3">

                <div class="col-md-6">
                    <label class="form-label">App Name</label>
                    <input type="text" name="app_name" class="form-control"
                        value="{{ old('app_name', $landing->app_name) }}">
                </div>

                <div class="col-md-6">
                    <label class="form-label">Headline</label>
                    <input type="text" name="headline" class="form-control"
                        value="{{ old('headline', $landing->headline) }}">
                </div>

                <div class="col-md-12">
                    <label class="form-label">Subheadline</label>
                    <input type="text" name="subheadline" class="form-control"
                        value="{{ old('subheadline', $landing->subheadline) }}">
                </div>

                <div class="col-md-12">
                    <label class="form-label">Description</label>
                    <textarea name="description" rows="3" class="form-control">{{ old('description', $landing->description) }}</textarea>
                </div>

                <div class="col-md-6">
                    <label class="form-label">Hero Image</label>
                    <input type="file" name="hero_image" class="form-control">
                    @if($landing->hero_image)
                        <img src="{{ asset($landing->hero_image) }}" class="img-fluid mt-2" style="max-height:150px;">
                    @endif
                </div>

                <div class="col-md-3">
                    <label class="form-label">Gradient Color 1</label>
                    <input type="color" name="gradient_color_1" class="form-control form-control-color"
                        value="{{ $landing->gradient_color_1 }}">
                </div>

                <div class="col-md-3">
                    <label class="form-label">Gradient Color 2</label>
                    <input type="color" name="gradient_color_2" class="form-control form-control-color"
                        value="{{ $landing->gradient_color_2 }}">
                </div>

                <div class="col-md-6">
                    <label class="form-label">Primary Button Label</label>
                    <input type="text" name="primary_cta_label" class="form-control"
                        value="{{ old('primary_cta_label', $landing->primary_cta_label) }}">
                </div>


            </div>
        </x-ui.card>

        <x-ui.card title="APK / Install" collapsible="true" defaultOpen="false" class="mb-4">
            <div class="card-body row g-3 align-items-center">
                <div class="col-md-6">
                    <label class="form-label">Upload APK (optional)</label>
                    <input type="file" id="apk_file_input" name="apk_file" accept=".apk" class="form-control">
                    <input type="hidden" id="apk_internal_path" name="apk_path" value="{{ old('apk_path', $landing->apk_path) }}">
                    @if($landing->apk_path)
                    <div class="mt-2">
                        <a href="{{ route('landing.downloadApk') }}" target="_blank" class="me-3">Current APK</a>
                        <small class="text-muted"></small>
                        <button
                        type="button"
                        id="delete-apk-btn"
                        class="btn btn-sm btn-outline-danger ms-2"
                        data-delete-url="{{ route('admin.landing.deleteApk') }}"
                        >Delete APK</button>
                    </div>
                    @endif
                    </div>

                    <div class="col-md-6">
                    <label class="form-label">Or add CTA URL (Play Store / Deep Link)</label>
                    <input type="url" name="apk_cta_url" class="form-control" placeholder="https://play.google.com/store/apps/..." value="{{ old('apk_cta_url', $landing->apk_cta_url) }}">
                    <small class="text-muted">If APK uploaded, the download button will use APK. Otherwise this URL is used.</small>
                </div>
            </div>
        </x-ui.card> 

        <!-- =============================
             FEATURES (JSON REPEATER)
        ============================== -->
        <x-ui.card title="Features" collapsible="true" defaultOpen="false" class="mb-4">

            <div class="card-header d-flex justify-content-between">
                <button type="button" class="btn btn-sm btn-primary" onclick="addFeature()">+ Add Feature</button>
            </div>

            <div class="card-body" id="feature-list">
                @php $features = $landing->features ?? []; @endphp
                @foreach($features as $i => $f)
                <div class="row g-2 feature-item mb-3 border-bottom pb-2">
                    <div class="col-md-4">
                        <input type="text" name="features[{{ $i }}][icon]" class="form-control"
                               placeholder="Icon class (ri-star-line)"
                               value="{{ $f['icon'] ?? '' }}">
                    </div>
                    <div class="col-md-4">
                        <input type="text" name="features[{{ $i }}][title]" class="form-control"
                               placeholder="Title"
                               value="{{ $f['title'] ?? '' }}">
                    </div>
                    <div class="col-md-3">
                        <input type="text" name="features[{{ $i }}][description]" class="form-control"
                               placeholder="Description"
                               value="{{ $f['description'] ?? '' }}">
                    </div>
                    <div class="col-md-1 text-end">
                        <button type="button" class="btn btn-danger btn-sm" onclick="removeFeature(this)">X</button>
                    </div>
                </div>
                @endforeach
            </div>
        </x-ui.card> 


        <!-- =============================
             SCREENSHOTS (JSON REPEATER)
        ============================== -->

    <x-ui.card title="Screenshots (Drag → Sort | Drop → Upload | Click ❌ → Delete)" collapsible="true" defaultOpen="false" class="mb-4">
    <div class="card-body">

        <!-- DROPZONE -->
        <div id="dropzone" class="mb-4 p-4 border border-2 border-dashed rounded text-center"
             style="cursor:pointer;">
            <h5 class="text-muted">Drag & Drop images here or click to upload</h5>
            <input type="file" id="screenshotUpload" multiple hidden>
        </div>

        <!-- SORTABLE LIST -->
        <ul id="screenshot-sortable" class="list-unstyled row g-3">
            @foreach(($landing->screenshots ?? []) as $i => $s)
                <li class="col-2 screenshot-item"
                    data-path="{{ $s['image'] }}" data-index="{{ $i }}">
                    <div class="border rounded position-relative p-2 shadow-sm bg-white"
                         style="cursor:grab;">

                        <img src="{{ asset('uploads/landing/'.$s['image']) }}"
                             class="img-fluid mb-2 rounded"
                             style="border-radius:10px;" >

                        <button type="button" class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1 delete-btn">
                            ❌
                        </button>
                    </div>
                </li>
            @endforeach
        </ul>

    </div>
     </x-ui.card> 

        

        <!-- =============================
             SEO SECTION
        ============================== -->
        <div class="card mb-4">
            <div class="card-header"><strong>SEO Settings</strong></div>
            <div class="card-body row g-3">

                <div class="col-md-6">
                    <label class="form-label">Meta Title</label>
                    <input type="text" name="meta_title" class="form-control"
                        value="{{ old('meta_title', $landing->meta_title) }}">
                </div>

                <div class="col-md-6">
                    <label class="form-label">Canonical URL</label>
                    <input type="text" name="canonical_url" class="form-control"
                        value="{{ old('canonical_url', $landing->canonical_url) }}">
                </div>

                <div class="col-md-12">
                    <label class="form-label">Meta Description</label>
                    <textarea name="meta_description" rows="3" class="form-control">{{ old('meta_description', $landing->meta_description) }}</textarea>
                </div>

                <div class="col-md-12">
                    <label class="form-label">Meta Keywords</label>
                    <input type="text" name="meta_keywords" class="form-control"
                        value="{{ old('meta_keywords', $landing->meta_keywords) }}">
                </div>

                <div class="col-md-6">
                    <label class="form-label">OG Image</label>
                    <input type="file" name="og_image" class="form-control">
                    @if($landing->og_image)
                        <img src="{{ asset($landing->og_image) }}" class="img-fluid mt-2" style="max-height:120px;">
                    @endif
                </div>

            </div>
        </div>

        {{-- FAQ Section --}}
        <div class="card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <strong>FAQ</strong>
            <button type="button" class="btn btn-sm btn-primary" onclick="addFaq()">+ Add FAQ</button>
        </div>

        <div class="card-body" id="faq-list">
            @php $faqs = $landing->faq ?? []; @endphp

            @foreach($faqs as $i => $f)
            <div class="row g-2 faq-item mb-3 border-bottom pb-2">
                <div class="col-md-5">
                <input type="text" name="faq[{{ $i }}][q]" class="form-control" placeholder="Question" value="{{ $f['q'] ?? '' }}">
                </div>
                <div class="col-md-6">
                <input type="text" name="faq[{{ $i }}][a]" class="form-control" placeholder="Answer" value="{{ $f['a'] ?? '' }}">
                </div>
                <div class="col-md-1 text-end">
                <button type="button" class="btn btn-danger btn-sm" onclick="removeItem(this)">X</button>
                </div>
            </div>
            @endforeach
        </div>
        </div>

        {{-- Follow Links Section --}}
        <div class="card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <strong>Follow Links (title + url)</strong>
            <button type="button" class="btn btn-sm btn-primary" onclick="addFollow()">+ Add Link</button>
        </div>

        <div class="card-body" id="follow-list">
            @php $follows = $landing->follow_links ?? []; @endphp

            @foreach($follows as $i => $fl)
            <div class="row g-2 follow-item mb-3 border-bottom pb-2">
                <div class="col-md-5">
                <input type="text" name="follow_links[{{ $i }}][title]" class="form-control" placeholder="Title" value="{{ $fl['title'] ?? '' }}">
                </div>
                <div class="col-md-6">
                <input type="text" name="follow_links[{{ $i }}][url]" class="form-control" placeholder="https://..." value="{{ $fl['url'] ?? '' }}">
                </div>
                <div class="col-md-1 text-end">
                <button type="button" class="btn btn-danger btn-sm" onclick="removeItem(this)">X</button>
                </div>
            </div>
            @endforeach
        </div>
        </div>

        <!-- SUBMIT -->
        <div class="text-end mb-5">
            <button class="btn btn-lg btn-success">Update Landing Page</button>
        </div>

    </form>
</div>


{{-- ======================
     JS for dynamic repeaters
======================= --}}
@endsection
@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>

<script>

    document.addEventListener("DOMContentLoaded", function () {

   let sortable = new Sortable(document.getElementById('screenshot-sortable'), {
    animation: 200,
    ghostClass: 'sortable-ghost',
    onEnd: function () {
        autoSaveScreenshots();
    }
});


});


function addFeature() {
    let index = document.querySelectorAll('.feature-item').length;
    let html = `
    <div class="row g-2 feature-item mb-3 border-bottom pb-2">
        <div class="col-md-4">
            <input type="text" name="features[${index}][icon]" class="form-control" placeholder="Icon class">
        </div>
        <div class="col-md-4">
            <input type="text" name="features[${index}][title]" class="form-control" placeholder="Title">
        </div>
        <div class="col-md-3">
            <input type="text" name="features[${index}][description]" class="form-control" placeholder="Description">
        </div>
        <div class="col-md-1 text-end">
            <button type="button" class="btn btn-danger btn-sm" onclick="removeFeature(this)">X</button>
        </div>
    </div>`;
    document.getElementById('feature-list').insertAdjacentHTML('beforeend', html);
}

function removeFeature(btn) {
    btn.closest('.feature-item').remove();
}

function addScreenshot() {
    let index = document.querySelectorAll('.screenshot-item').length;
    let html = `
    <div class="row g-2 screenshot-item mb-3 border-bottom pb-2">
        <div class="col-md-5">
            <input type="text" name="screenshots[${index}][image]" class="form-control" placeholder="Image path">
        </div>
        <div class="col-md-5">
            <input type="text" name="screenshots[${index}][alt]" class="form-control" placeholder="Alt text">
        </div>
        <div class="col-md-2 text-end">
            <button type="button" class="btn btn-danger btn-sm" onclick="removeScreenshot(this)">X</button>
        </div>
    </div>`;
    document.getElementById('screenshot-list').insertAdjacentHTML('beforeend', html);
}

function removeScreenshot(btn) {
    btn.closest('.screenshot-item').remove();
}
function autoSaveScreenshots() {
    let order = [];

    document.querySelectorAll('.screenshot-item').forEach(el => {
        order.push({ image: el.getAttribute('data-path') });
    });

    fetch("{{ route('admin.landing.updateScreenshotsOrder') }}", {
        method: "POST",
        headers: {
            "X-CSRF-TOKEN": "{{ csrf_token() }}",
            "Content-Type": "application/json"
        },
        body: JSON.stringify({ order: order })
    });
}

// DELETE
document.addEventListener('click', function (e) {
    if (e.target.classList.contains('delete-btn')) {

        e.preventDefault();   
        e.stopPropagation();

        const btn = e.target.closest && e.target.closest('.delete-btn');
        if (!btn) return;

        // prevent any default navigation/submit that may bubble up
        e.preventDefault();
        e.stopPropagation();

        const li = btn.closest('.screenshot-item');
        if (!li) return;

        const index = li.dataset.index;
      //  autoSaveScreenshots();
        showProgress();
        fetch("{{ route('admin.landing.deleteScreenshot') }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                "X-CSRF-TOKEN": "{{ csrf_token() }}",
            },
            body: JSON.stringify({ index: index })
        })
        .then(res => res.json())
        .then(data => {
            hideProgress();
            if (data.success) {
                li.remove(); 
                 updateScreenshotIndexes();
                autoSaveScreenshots(); 
            }
        })
        .catch(err => {
            hideProgress();
            console.error(err)});
    }
});

// DROPZONE UPLOAD
let dropzone = document.getElementById("dropzone");
let fileInput = document.getElementById("screenshotUpload");

dropzone.onclick = () => fileInput.click();

dropzone.ondragover = (e) => {
    e.preventDefault();
    dropzone.classList.add("bg-light");
};

dropzone.ondragleave = () => dropzone.classList.remove("bg-light");

dropzone.ondrop = function (e) {
    e.preventDefault();
    dropzone.classList.remove("bg-light");
    handleFiles(e.dataTransfer.files);
};

fileInput.onchange = () => handleFiles(fileInput.files);

function handleFiles(files) {
    [...files].forEach(uploadScreenshot);
}

function uploadScreenshot(file) {
    let formData = new FormData();
    formData.append("file", file);
    formData.append("_token", "{{ csrf_token() }}");

    fetch("{{ route('admin.landing.uploadScreenshot') }}", {
        method: "POST",
        body: formData
    })
    .then(res => res.json())
    .then(data => {
        addScreenshotToDOM(data.path);
        autoSaveScreenshots();
    });
}

function addScreenshotToDOM(path) {
    let ul = document.getElementById('screenshot-sortable');
    let li = document.createElement('li');

    li.classList.add('col-4','screenshot-item');
    li.setAttribute('data-path', path);

    path="{{ asset('uploads/landing/') }}/"+path

    li.innerHTML = `
        <div class="border rounded position-relative p-2 shadow-sm bg-white" style="cursor:grab;">
            <img src="${path}" class="img-fluid mb-2 rounded" style="border-radius:10px;">
            <button class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1 delete-btn">❌</button>
        </div>
    `;

    ul.appendChild(li);
}

function addFaq() {
  let index = document.querySelectorAll('.faq-item').length;
  let html = `
  <div class="row g-2 faq-item mb-3 border-bottom pb-2">
    <div class="col-md-5">
      <input type="text" name="faq[${index}][q]" class="form-control" placeholder="Question">
    </div>
    <div class="col-md-6">
      <input type="text" name="faq[${index}][a]" class="form-control" placeholder="Answer">
    </div>
    <div class="col-md-1 text-end">
      <button type="button" class="btn btn-danger btn-sm" onclick="removeItem(this)">X</button>
    </div>
  </div>`;
  document.getElementById('faq-list').insertAdjacentHTML('beforeend', html);
}

function addFollow() {
  let index = document.querySelectorAll('.follow-item').length;
  let html = `
  <div class="row g-2 follow-item mb-3 border-bottom pb-2">
    <div class="col-md-5">
      <input type="text" name="follow_links[${index}][title]" class="form-control" placeholder="Title">
    </div>
    <div class="col-md-6">
      <input type="text" name="follow_links[${index}][url]" class="form-control" placeholder="https://...">
    </div>
    <div class="col-md-1 text-end">
      <button type="button" class="btn btn-danger btn-sm" onclick="removeItem(this)">X</button>
    </div>
  </div>`;
  document.getElementById('follow-list').insertAdjacentHTML('beforeend', html);
}

function removeItem(btn) {
  btn.closest('.faq-item, .follow-item, .feature-item, .screenshot-item')?.remove();
}

function updateScreenshotIndexes() {
    document.querySelectorAll('#screenshot-sortable .screenshot-item').forEach((item, i) => {
        item.dataset.index = i;
    });
}
document.addEventListener('DOMContentLoaded', function () {
  const delBtn = document.getElementById('delete-apk-btn');
  if (!delBtn) return;

  delBtn.addEventListener('click', function () {
    if (!confirm('Delete APK? This cannot be undone.')) return;

    const url = this.dataset.deleteUrl;
    fetch(url, {
      method: 'POST',
      headers: {
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
        'Accept': 'application/json'
      }
    })
    .then(r => r.json ? r.json() : r.text())
    .then(res => {
     
      location.reload();
    })
    .catch(err => {
      console.error(err);
      alert('Delete failed. Check console or server logs.');
    });
  });
});

// Debug + upload handler for APK
document.addEventListener('DOMContentLoaded', function () {
  const input = document.getElementById('apk_file_input');
  if (!input) {
    console.warn('apk_file_input not found on page');
    return;
  }

  input.addEventListener('change', async function (e) {
    const file = this.files[0];
    if (!file) {
      console.log('No file selected');
      return;
    }

    // Build formdata
    const fd = new FormData();
    fd.append('apk_file', file);
    // CSRF token via meta tag
    const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
    if (!token) {
      console.error('CSRF token meta tag not found!');
      alert('CSRF token missing — check your layout head. See console.');
      return;
    }
    fd.append('_token', token);

    input.disabled = true;

    console.log('Uploading APK to server...');
    try {
        showProgress();
      const res = await fetch("{{ route('admin.landing.uploadApkOnly') }}", {
        method: 'POST',
        body: fd,
        credentials: 'same-origin',
          headers: {
                'Accept': 'application/json', 
                'X-CSRF-TOKEN': token,
            }
      });

      console.log('Fetch response status:', res.status);

      let json;
      try { json = await res.json(); } catch (err) { json = null; }
      hideProgress();
      if (!res.ok) {
        console.error('Upload failed HTTP', res.status, json);
        alert('Upload failed: ' + (json?.message || res.statusText || res.status));
        input.disabled = false;
        return;
      }

      console.log('Server response:', json);

      if (json && json.success) {
        const hidden = document.getElementById('apk_internal_path');
        if (hidden && json.data?.path) {
          hidden.value = json.data.path;
        }

        alert('APK uploaded');
      } else {
        alert('Upload returned error: ' + (json?.message || JSON.stringify(json)));
      }
    } catch (err) {
      console.error('Upload exception:', err);
      alert('Upload exception — check console for details.');
    } finally {
      input.disabled = false;
    }
  });
});
</script>

@endsection