{{-- plugins/commission/resources/views/vendors.blade.php --}}
@extends(BaseHelper::getAdminMasterLayoutTemplate())

@section('content')
<nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb mb-0">
        <li class="breadcrumb-item"><a href="{{ route('dashboard.index') }}">Dashboard</a></li>
        <li class="breadcrumb-item active" aria-current="page">Vendors</li>
    </ol>
</nav>

<div class="card">
    <div class="card-header">
        <h4 class="card-title">Select a Vendor</h4>
    </div>
    <div class="card-body">
        <div class="row g-3 align-items-end">
            <div class="col-md-6">
                <label class="form-label">Vendor</label>
                <select id="vendor-picker" class="form-control select-search-full" data-placeholder="Search vendor...">
                    <option value="" selected disabled>Search vendor…</option>
                    @foreach ($stores as $s)
                        <option value="{{ $s->id }}">{{ $s->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <hr class="my-4">

        <div class="table-responsive">
            <table class="table table-striped align-middle mb-0">
                <thead>
                <tr>
                    <th style="width:80px">ID</th>
                    <th>Vendor</th>
                    <th style="width:220px">Global Commission</th>
                    <th style="width:220px">Total Categories Commission</th>
                    <th style="width:240px">Actions</th>
                </tr>
                </thead>
                <tbody>
                    @foreach ($stores as $s)
                        <tr data-store-row="{{ $s->id }}">
                            <td>{{ $s->id }}</td>
                            <td>{{ $s->name }}</td>

                            {{-- Global Commission cell (update this after AJAX save) --}}
                            <td class="gc-cell" data-store-id="{{ $s->id }}">
                                {{ optional($s->globalCommission)->rate !== null ? number_format($s->globalCommission->rate, 2) . '%' : '—' }}
                            </td>

                            {{-- Total Categories --}}
                            <td>{{ $s->commissions_count }}</td>

                            <td>
                            @if ($s->commissions_count > 0)
                                <a class="btn btn-sm btn-primary"
                                href="{{ route('commission.byStore', $s->id) }}">
                                    View - Category Commission
                                </a>
                            @endif

                            <a style="margin-top:5px" class="btn btn-sm btn-success"
                            href="{{ route('commission.createForStore', $s->id) }}">
                                Add - Category Commission
                            </a>

                            {{-- Add/Edit Global Commission (opens modal) --}}
                            <a style="margin-top:5px" href="#"
                            class="btn btn-sm btn-warning js-global-btn"
                            data-store-id="{{ $s->id }}"
                            data-store-name="{{ $s->name }}"
                            data-rate="{{ optional($s->globalCommission)->rate }}">
                                {{ $s->globalCommission ? 'Edit Global Commission' : 'Add Global Commission' }}
                            </a>
                        </td>

                        </tr>

                    @endforeach
                    @if ($stores->isEmpty())
                        <tr><td colspan="5" class="text-muted">No vendors found.</td></tr>
                    @endif
                </tbody>

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

{{-- Inline so it always runs even if @stack('scripts') isn’t yielded --}}
<script>
(function () {
    var picker = document.getElementById('vendor-picker');

    // Filter function: show only the selected vendor row; show all when cleared
    function filterTable() {
        var selected = picker.value; // (with Select2, .val() is mirrored to the element value)
        var rows = document.querySelectorAll('tr[data-store-row]');

        rows.forEach(function (tr) {
            if (!selected) {
                tr.style.display = ''; // show all
            } else {
                tr.style.display = (tr.getAttribute('data-store-row') === selected) ? '' : 'none';
            }
        });
    }

    document.addEventListener('DOMContentLoaded', function () {
        // Native change (works even if Select2 not present)
        picker.addEventListener('change', filterTable);

        // If Select2 is available, init and hook its events
        if (window.jQuery && jQuery.fn && jQuery.fn.select2) {
            if (!jQuery(picker).data('select2')) {
                jQuery(picker).select2({
                    width: '100%',
                    allowClear: true,
                    placeholder: 'Search vendor...'
                });
            }

            // Select2 events
            jQuery(picker).on('select2:select', filterTable);
            jQuery(picker).on('select2:clear', function () {
                // Clear resets to "show all"
                picker.value = '';
                filterTable();
            });
        }

        // Initial (show all)
        filterTable();
    });
})();
</script>


<!-- Global Commission Modal -->
<div class="modal fade" id="globalCommissionModal" tabindex="-1" aria-labelledby="globalCommissionModalLabel" aria-hidden="true">
  <div class="modal-dialog">
        <form id="gc_form" method="POST" action="{{ route('commission.global.save') }}" class="modal-content">
      @csrf
      <input type="hidden" name="store_id" id="gc_store_id">

      <div class="modal-header">
        <h5 class="modal-title" id="globalCommissionModalLabel">Add Global Commission</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
        <div class="mb-3">
          <label class="form-label">Vendor</label>
          <input type="text" id="gc_store_name" class="form-control" readonly>
        </div>

        <div class="mb-3">
          <label for="gc_rate" class="form-label">Rate (%)</label>
          <input type="number" name="rate" id="gc_rate" class="form-control"
                 step="0.01" min="0" max="100" placeholder="e.g. 7.50" required>
          <small class="text-muted">Enter a percentage between 0 and 100.</small>
        </div>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-primary" id="gc_submit_btn">Save</button>
      </div>
    </form>
  </div>
</div>

<script>
(function () {
    // Open modal populated from row button
    document.addEventListener('click', function (e) {
        var t = e.target.closest('.js-global-btn');
        if (!t) return;

        e.preventDefault();

        var storeId   = t.getAttribute('data-store-id');
        var storeName = t.getAttribute('data-store-name');
        var rate      = t.getAttribute('data-rate') || '';

        document.getElementById('gc_store_id').value   = storeId;
        document.getElementById('gc_store_name').value = storeName;
        document.getElementById('gc_rate').value       = rate;

        document.getElementById('globalCommissionModalLabel').textContent =
            (rate !== '' ? 'Edit' : 'Add') + ' Global Commission';
        document.getElementById('gc_submit_btn').textContent =
            (rate !== '' ? 'Update' : 'Save');

        var modalEl = document.getElementById('globalCommissionModal');
        bootstrap.Modal.getOrCreateInstance(modalEl).show();
    }, false);

    // AJAX submit
    document.getElementById('gc_form').addEventListener('submit', function (e) {
    e.preventDefault();

    var form = this;
    var action = form.getAttribute('action');
    var formData = new FormData(form);

    fetch(action, {
        method: 'POST',
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        },
        body: formData
    })
    .then(async (res) => {
        if (!res.ok) {
            const data = await res.json().catch(() => ({}));
            let msg = 'Failed to save.';
            if (res.status === 422 && data.errors) {
                msg = Object.values(data.errors).flat().join('\n');
            } else if (data.message) {
                msg = data.message;
            }
            throw new Error(msg);
        }
        return res.json();
    })
    .then((data) => {
        // ✅ Update table cell
        var id = data.store_id;
        var cell = document.querySelector('.gc-cell[data-store-id="' + id + '"]');
        if (cell) cell.textContent = (data.rate ? data.rate + '%' : '—');

        // ✅ Update row button
        var btn = document.querySelector('.js-global-btn[data-store-id="' + id + '"]');
        if (btn) {
            btn.setAttribute('data-rate', data.rate || '');
            btn.textContent = (data.rate ? 'Edit Global Commission' : 'Add Global Commission');
        }

        // ✅ Close modal
        var modalEl = document.getElementById('globalCommissionModal');
        bootstrap.Modal.getInstance(modalEl).hide();

        if (window.showSuccess) showSuccess(data.message);
        else alert(data.message);
    })
    .catch((err) => {
        if (window.showError) showError(err.message);
        else alert(err.message);
    });
});

})();
</script>


@endsection