@extends('layouts.customer')

@section('title', 'Online Ordering Settings')

@section('content')
@php extract($settings); @endphp
<style>
    body { background: #f8f9fa; }
    .partner-option {
        border: 2px solid #dee2e6;
        border-radius: 10px;
        padding: 15px;
        cursor: pointer;
        transition: all 0.3s ease;
        background-color: #fff;
        position: relative;
    }
    .partner-option.active {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    }
    .partner-option input[type="radio"] {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 20px;
        height: 20px;
        accent-color: #007bff;
    }
    .form-card {
        background: #fff;
        padding: 25px;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        margin-top: 30px;
    }
    .partner-logo {
        width: 36px;
        height: auto;
        margin-right: 10px;
    }

    .partner-wrapper {
      display: flex; background: #fff; border-radius: .5rem; overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }
    .partner-sidebar { width: 240px; height: 100%; padding: 20px 0; background: #ffffff; border-right: 1px solid #e9ecef; }
    .partner-sidebar button { 
      display: flex; align-items: center; padding: .75rem 1.25rem; width: 100%;
      border: none; background: none; font-size: .95rem; color: #495057;
      transition: background .2s, color .2s;
    }
    .partner-sidebar button i { margin-right: .75rem; font-size: 1rem; }
    .partner-sidebar button.active {
      background: #a92a40; color: #fff; font-weight: 500;
    }
    .partner-sidebar button:disabled { color: #c3c6cc; cursor: default; }
    .partner-sidebar button:hover:not(:disabled):not(.active) { background: #f8f9fa; }
    .partner-content {
      flex: 1; padding: 2rem; max-width: 100%;
      animation: fadeIn .3s ease-out;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .partner-empty {
      color: #868e96; text-align: center; padding: 2rem;
      border: 1px dashed #dee2e6; border-radius: .5rem;
    }

    #loader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.6); /* optional dim background */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1050;
    }

    /* Hide loader by default */
    #loader.d-none {
        display: none !important;
    }

    /* Optional: Larger spinner */
    #loader .spinner-border {
        width: 3rem;
        height: 3rem;
        color: #4e54c8; /* or primary theme color */
    }


</style>

<div class="container-fluid" id="provider-settings">
    <h2 class="mb-4">Online Ordering Integration</h2>

    <div class="row mb-2">
        @if ($message = Session::get('success'))
            <div class="w-100 alert alert-success">
                <p style="margin:0px;">{{ $message }}</p>
            </div>
        @endif
    </div>

    @if ($errors->any())
        <div class="alert alert-danger">
            <strong>Whoops!</strong> There were some problems with your input.<br><br>
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    {{-- Provider Selection --}}
    <div class="row">
        @foreach (['doordash' => 'DoorDash', 'grubhub' => 'Grubhub', 'ubereats' => 'UberEats'] as $key => $label)
        <div class="col-md-4 mb-3">
            <div class="partner-option d-flex align-items-center justify-content-between {{-- $activePartner === $key ? 'active' : '' --}}" data-provider="{{ $key }}" id="card-{{ $key }}">
                <!-- <input type="radio" name="partner" value="{{ $key }}" {{ $activePartner === $key ? 'checked' : '' }}> -->
                <div class="d-flex align-items-center">
                    <img src="{{ asset('img/delivery-partner.svg') }}" class="partner-logo">
                    <div>
                        <strong>{{ $label }}</strong><br>
                        <small class="text-muted">
                            @switch($key)
                                @case('doordash') API + Merchant ID @break
                                @case('grubhub') Client ID + Secret @break
                                @case('ubereats') Token + Store ID @break
                            @endswitch
                        </small>
                    </div>
                    <!-- <div class="form-check form-switch">
                        <input class="form-check-input partner-toggle" type="checkbox" id="toggle-{{ $key }}" data-partner="{{ $key }}" checked>
                    </div> -->
                </div>
                <div>
                    <div class="custom-control custom-switch">
                        <input type="checkbox" class="custom-control-input partner-toggle" id="partner-{{$key}}" name="partners[doordash][active]" data-partner="{{$key}}" data-url="{{ route('partners.settings.toggle.status', ['account' => $account]) }}" {{ $credentials[$key]['active'] == 1 ? 'checked' : '' }} />
                        <label class="custom-control-label" for="partner-{{$key}}"></label>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>


    <h4 class="mt-4 d-none">Credentials</h4>
    <hr class="my-3 d-none" />

    <div class="partner-wrapper d-none">
        <div class="row">
            <aside class="col-md-4 mb-3 h-100">
                <nav class="partner-sidebar" id="partnerTabs"></nav>
                <!-- <nav class="nav flex-column nav-pills partner-sidebar" id="partnerTabs"></nav> -->
            </aside>
            <section class="col-md-8 h-100">
                <div class="partner-content tab-content" id="partnerTabContent"></div>
                <!-- <div class="card">
                    <div class="card-body">
                    </div>
                </div> -->
            </section>
        </div>
    </div>
</div>

<!-- Toast Container -->
<div id="toast-container" class="position-absolute p-3" style="top: 0; right: 0; z-index: 1055;"></div>

<!-- Loader -->
<div id="loader" class="d-none position-fixed top-50 start-50 translate-middle">
  <div class="spinner-border text-primary" role="status"></div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const options = document.querySelectorAll('.partner-option');
        const forms = document.querySelectorAll('.provider-form');

        options.forEach(option => {
            option.addEventListener('click', () => {
                // Remove active class from all
                // options.forEach(o => o.classList.remove('active'));

                // Hide all forms
                // forms.forEach(form => form.style.display = 'none');

                // Mark this option as active
                // option.classList.add('active');

                // Show the selected form
                // const provider = option.dataset.provider;
                // document.getElementById(`form-${provider}`).style.display = 'block';

                // Check radio manually
                // option.querySelector('input[type=radio]').checked = true;
            });
        });

        forms.forEach(form => {
            form.addEventListener('submit', function (e) {
                // Remove existing active input if any
                form.querySelectorAll('[name$="[active]"]').forEach(el => el.remove());

                // Find checked radio input
                const selectedPartnerInput = document.querySelector('input[name="partner"]:checked');

                if (selectedPartnerInput) {
                    const selectedPartner = selectedPartnerInput.value;

                    // Create and append active input to the form being submitted
                    const activeInput = document.createElement('input');
                    activeInput.type = 'hidden';
                    activeInput.name = `${selectedPartner}[active]`;
                    activeInput.value = '1';
                    form.appendChild(activeInput);
                }
            });
        });
    });

    const partners = @json($partners);

    const toggles = document.querySelectorAll('.partner-toggle');
    const tabNav = document.getElementById('partnerTabs');
    const tabContent = document.getElementById('partnerTabContent');

    function renderUI() {
      tabNav.innerHTML = '';
      tabContent.innerHTML = '';
      const activeKeys = Array.from(toggles).filter(t=>t.checked).map(t=>t.dataset.partner);
      const firstActive = activeKeys[0] || null;

      Object.entries(partners).forEach(([k,p]) => {
        const isActive = activeKeys.includes(k);

        const btn = document.createElement('button');
        btn.innerHTML = `<i class="${p.icon} mr-2"></i>${p.label}`;
        btn.className = 'nav-link';
        btn.type = 'button';
        btn.disabled = !isActive;
        if (k === firstActive) btn.classList.add('active');
        btn.onclick = () => {
          if (!isActive) return;
          document.querySelectorAll('.partner-sidebar button').forEach(b=>b.classList.remove('active'));
          document.querySelectorAll('.tab-pane').forEach(t=>t.classList.remove('show','active'));
          btn.classList.add('active');
          document.getElementById(`pane-${k}`)?.classList.add('show','active');
        };
        tabNav.appendChild(btn);

        const pane = document.createElement('div');
        pane.className = `tab-pane fade${k===firstActive?' show active':''}`;
        pane.id = `pane-${k}`;
        pane.innerHTML = isActive ? p.content : `<div class="partner-empty">${p.label} is disabled</div>`;
        tabContent.appendChild(pane);
      });

      if (activeKeys.length===0) {
        tabContent.innerHTML = `<div class="partner-empty">No partner enabled—please activate one.</div>`;
      }
    }

    function showLoader() {
        document.getElementById('loader').classList.remove('d-none');
    }
    function hideLoader() {
        document.getElementById('loader').classList.add('d-none');
    }

    function showToast(message, type = 'success') {
        const toastId = 'toast-' + Date.now();
        const toastHTML = `
            <div id="${toastId}" class="toast align-items-center text-bg-${type} border-0 show mb-2" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body">${message}</div>
                <button type="button" class="btn-close btn-close-white d-none me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
            </div>`;
        const container = document.getElementById('toast-container');
        container.insertAdjacentHTML('beforeend', toastHTML);
        setTimeout(() => {
            document.getElementById(toastId)?.remove();
        }, 3000);
    }

    // function showToast(message, type = 'success') {
    //     const id = `toast-${Date.now()}`;
    //     const bgClass = type === 'success' ? 'bg-success' : (type === 'error' ? 'bg-danger' : 'bg-warning');

    //     const toast = document.createElement('div');
    //     toast.className = `toast align-items-center text-white ${bgClass} border-0 mb-3 shadow-sm`;
    //     toast.setAttribute('role', 'alert');
    //     toast.setAttribute('aria-live', 'assertive');
    //     toast.setAttribute('aria-atomic', 'true');
    //     toast.id = id;

    //     toast.innerHTML = `
    //         <div class="d-flex">
    //         <div class="toast-body">
    //             ${message}
    //         </div>
    //         <button type="button" class="ml-auto me-2 m-auto btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
    //         </div>
    //     `;

    //     document.getElementById('toast-container').appendChild(toast);

    //     const bsToast = new bootstrap.Toast(toast, { delay: 3000 });
    //     bsToast.show();

    //     // Auto-remove the toast after it's hidden
    //     toast.addEventListener('hidden.bs.toast', () => toast.remove());
    // }



    toggles.forEach(t => {
        t.addEventListener('change', function () {
            const partner = this.dataset.partner;
            const isActive = this.checked ? 1 : 0;
            const url = this.dataset.url; // assume this is set via data attribute
            const prevState = !this.checked;

            showLoader();

            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({
                    partner: partner,
                    active: isActive
                })
            })
            .then(res => res.json())
            .then(data => {
            hideLoader();
            if (data.success) {
                showToast(`${partner.charAt(0).toUpperCase() + partner.slice(1)} ${isActive ? 'enabled' : 'disabled'} successfully`);
                // renderUI(); // only update tabs on success
                location.reload();
            } else {
                this.checked = prevState;
                showToast(data.message || 'Failed to update', 'danger');
            }
            })
            .catch(() => {
            hideLoader();
            this.checked = prevState;
            showToast('Something went wrong', 'danger');
            });
        });
    });

    // renderUI(); // initial render


    // toggles.forEach(t=>t.addEventListener('change',renderUI));
    // renderUI();

    /*
    const partners = @json($partners);

    const toggles = document.querySelectorAll(".partner-toggle");
    const tabNav = document.getElementById("partnerTabs");
    const tabContent = document.getElementById("partnerTabContent");

    function renderUI() {
    tabNav.textContent = "";
    tabContent.textContent = "";

    let activePartnerKey = null;
    const partnerKeys = Object.keys(partners);

    // Find first active partner
    partnerKeys.forEach((k) => {
        const toggle = document.querySelector(
        `.partner-toggle[data-partner="${k}"]`
        );
        if (toggle?.checked && !activePartnerKey) {
        activePartnerKey = k;
        }
    });

    // Render all partner tabs
    partnerKeys.forEach((k) => {
        const toggle = document.querySelector(
        `.partner-toggle[data-partner="${k}"]`
        );
        const isActive = toggle?.checked;

        const tabBtn = document.createElement("button");
        tabBtn.className = `nav-link mb-2${
        k === activePartnerKey ? " active" : ""
        }`;
        tabBtn.type = "button";
        tabBtn.textContent = partners[k].label;
        tabBtn.disabled = !isActive;
        tabBtn.dataset.targetPane = `pane-${k}`;

        tabBtn.addEventListener("click", () => {
        if (!tabBtn.disabled) {
            // Remove active
            tabNav
            .querySelectorAll("button")
            .forEach((btn) => btn.classList.remove("active"));
            tabContent
            .querySelectorAll(".tab-pane")
            .forEach((pane) => pane.classList.remove("show", "active"));

            // Activate current
            tabBtn.classList.add("active");
            document.getElementById(`pane-${k}`)?.classList.add("show", "active");
        }
        });

        tabNav.appendChild(tabBtn);

        const pane = document.createElement("div");
        pane.className = `tab-pane fade${
        k === activePartnerKey ? " show active" : ""
        }`;
        pane.id = `pane-${k}`;
        pane.innerHTML = isActive
        ? `<h5 class="mb-3">${partners[k].label} Credentials</h5>${partners[k].content}`
        : `<div class="text-muted text-center py-4">"${partners[k].label}" is currently disabled.</div>`;

        tabContent.appendChild(pane);
    });

    // No active partner fallback
    if (!activePartnerKey) {
        tabContent.innerHTML = `
            <div class="alert alert-warning text-center">
                No delivery partner is enabled. Please enable at least one to enter credentials.
            </div>`;
    }
    }

    // Initial UI + event listeners
    toggles.forEach((t) => t.addEventListener("change", renderUI));
    renderUI();

    */

/*
    const partners = {
        doordash: {
        label: "DoorDash",
        content: `
            <div class="form-label-floating">
            <input type="text" placeholder=" " class="form-control" name="doordash[api_key]">
            <label>API Key</label>
            </div>
            <div class="form-label-floating">
            <input type="text" placeholder=" " class="form-control" name="doordash[merchant_id]">
            <label>Merchant ID</label>
            </div>`
        },
        grubhub: {
        label: "Grubhub",
        content: `
            <div class="form-label-floating">
            <input type="text" placeholder=" " class="form-control" name="grubhub[client_id]">
            <label>Client ID</label>
            </div>
            <div class="form-label-floating">
            <input type="password" placeholder=" " class="form-control" name="grubhub[client_secret]">
            <label>Client Secret</label>
            </div>`
        },
        ubereats: {
        label: "UberEats",
        content: `
            <div class="form-label-floating">
            <input type="text" placeholder=" " class="form-control" name="ubereats[token]">
            <label>Access Token</label>
            </div>
            <div class="form-label-floating">
            <input type="text" placeholder=" " class="form-control" name="ubereats[store_id]">
            <label>Store ID</label>
            </div>`
        }
    };

  const toggles = document.querySelectorAll('.partner-toggle');
  const tabNav = document.getElementById('partnerTabs');
  const tabContent = document.getElementById('partnerTabContent');

  function renderUI() {
    tabNav.textContent = '';
    tabContent.textContent = '';
    let first = true;

    toggles.forEach(t => {
      const k = t.dataset.partner;
      const card = document.getElementById(`card-${k}`);
    //   card.classList.toggle('active', t.checked);

      if (t.checked) {
        const tabBtn = document.createElement('button');
        tabBtn.className = `nav-link mb-2${first?' active':''}`;
        tabBtn.dataset.bsToggle = 'pill';
        tabBtn.dataset.bsTarget = `#pane-${k}`;
        tabBtn.type = 'button';
        tabBtn.textContent = partners[k].label;
        tabNav.appendChild(tabBtn);

        const pane = document.createElement('div');
        pane.className = `tab-pane fade${first?' show active':''}`;
        pane.id = `pane-${k}`;
        pane.innerHTML = `<h5>${partners[k].label} Credentials</h5>${partners[k].content}`;
        tabContent.appendChild(pane);

        first = false;
      }
    });
  }

  toggles.forEach(t => t.addEventListener('change', renderUI));
  renderUI();*/
</script>
@endsection