@extends('admin.layouts.app', ['title' => 'Sub Stores'])

@push('head')
    <style>
        .admin-module-hero {
            position: relative;
            overflow: hidden;
            border: 0;
            border-radius: 0.5rem;
            padding: 1.25rem 1.35rem;
            margin-bottom: 1rem;
            color: #f8fbff;
            background: linear-gradient(135deg, #243b53 0%, #334e68 52%, #486581 100%);
            box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
        }

        .admin-module-hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 34%),
                linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 55%);
            pointer-events: none;
        }

        .admin-module-hero > * {
            position: relative;
            z-index: 1;
        }

        .admin-module-hero .text-muted {
            color: rgba(255, 255, 255, 0.78) !important;
        }

        .admin-module-hero .btn {
            border-radius: 999px;
            font-weight: 700;
        }
    </style>
@endpush

@section('content')
    <div class="admin-module-hero d-flex align-items-center justify-content-between flex-wrap gap-3">
        <div>
            <h1 class="h4 mb-0">Sub Stores</h1>
            <div class="small text-white">Manage child stores against your available payin gateways.</div>
        </div>
        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#createSubStoreModal">
            <i class="bi bi-plus-lg me-1"></i> Add Sub Store
        </button>
    </div>

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

    @if ($errors->any())
        <div class="alert alert-danger">{{ $errors->first() }}</div>
    @endif

    <div class="alert alert-success d-none" id="subStoreSuccessAlert"></div>
    <div class="alert alert-danger d-none" id="subStoreErrorAlert"></div>

    <div class="card admin-card">
        <div class="card-body">
            <form method="GET" action="{{ route('admin.sub_stores.index') }}" class="row g-2 mb-3" id="adminSubStoreSearchForm">
                <div class="col-md-6">
                    <input
                        type="search"
                        name="search"
                        class="form-control"
                        id="adminSubStoreSearchInput"
                        value="{{ $search }}"
                        placeholder="Search by store name, website, account no, store id, or gateway..."
                        autocomplete="off"
                    >
                </div>
            </form>

            <div class="table-responsive">
                <table class="table align-middle">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Gateway</th>
                            <th>Website</th>
                            <th>Account No</th>
                            <th>Store ID</th>
                            <th>Api Key</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="adminSubStoresTableBody">
                        @forelse ($subStores as $subStore)
                            @include('admin.sub_stores._row', ['subStore' => $subStore])
                        @empty
                            <tr>
                                <td colspan="7" class="text-center text-muted py-4">No sub stores found.</td>
                            </tr>
                        @endforelse
                        <tr id="adminSubStoresFilteredEmptyState" class="d-none">
                            <td colspan="7" class="text-center text-muted py-4">No sub stores found.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            {{ $subStores->links() }}
        </div>
    </div>

    <div class="modal fade" id="createSubStoreModal" tabindex="-1" aria-labelledby="createSubStoreModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <form method="POST" action="{{ route('admin.sub_stores.store') }}" id="createSubStoreForm">
                    @csrf
                    <div class="modal-header">
                        <h2 class="modal-title fs-5" id="createSubStoreModalLabel">Create Sub Store</h2>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label" for="create_parent_gateway_id">Payin Gateway</label>
                                <select id="create_parent_gateway_id" name="parent_gateway_id" class="form-select @error('parent_gateway_id') is-invalid @enderror" required>
                                    <option value="">Select gateway</option>
                                    @foreach ($payinMethods as $method)
                                        <option value="{{ $method->id }}" @selected((string) old('parent_gateway_id') === (string) $method->id)>
                                            {{ $method->name }}{{ $method->code ? ' ('.$method->code.')' : '' }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label" for="create_name">Name</label>
                                <input id="create_name" name="name" type="text" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" required>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label" for="create_website">Website</label>
                                <input id="create_website" name="website" type="text" class="form-control @error('website') is-invalid @enderror" value="{{ old('website') }}">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label" for="create_account_no">Account No</label>
                                <input id="create_account_no" name="account_no" type="text" class="form-control @error('account_no') is-invalid @enderror" value="{{ old('account_no') }}">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label" for="create_api_key">Api Key</label>
                                <input id="create_api_key" name="api_key" type="text" class="form-control @error('api_key') is-invalid @enderror" value="{{ old('api_key') }}">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label" for="create_store_id">Store ID</label>
                                <input id="create_store_id" name="store_id" type="text" class="form-control @error('store_id') is-invalid @enderror" value="{{ old('store_id') }}">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Create Sub Store</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="editSubStoreModal" tabindex="-1" aria-labelledby="editSubStoreModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <form method="POST" id="editSubStoreForm">
                    @csrf
                    @method('PUT')
                    <div class="modal-header">
                        <h2 class="modal-title fs-5" id="editSubStoreModalLabel">Edit Sub Store</h2>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label" for="edit_parent_gateway_id">Payin Gateway</label>
                                <select id="edit_parent_gateway_id" name="parent_gateway_id" class="form-select" required>
                                    <option value="">Select gateway</option>
                                    @foreach ($payinMethods as $method)
                                        <option value="{{ $method->id }}">
                                            {{ $method->name }}{{ $method->code ? ' ('.$method->code.')' : '' }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label" for="edit_name">Name</label>
                                <input id="edit_name" name="name" type="text" class="form-control" required>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label" for="edit_website">Website</label>
                                <input id="edit_website" name="website" type="text" class="form-control">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label" for="edit_account_no">Account No</label>
                                <input id="edit_account_no" name="account_no" type="text" class="form-control">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label" for="edit_api_key">Api Key</label>
                                <input id="edit_api_key" name="api_key" type="text" class="form-control">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label" for="edit_store_id">Store ID</label>
                                <input id="edit_store_id" name="store_id" type="text" class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('adminSubStoreSearchForm');
            const input = document.getElementById('adminSubStoreSearchInput');
            const rows = Array.from(document.querySelectorAll('[data-sub-store-row]'));
            const filteredEmptyState = document.getElementById('adminSubStoresFilteredEmptyState');
            const editModal = document.getElementById('editSubStoreModal');
            const editForm = document.getElementById('editSubStoreForm');
            const createForm = document.getElementById('createSubStoreForm');
            const createModal = document.getElementById('createSubStoreModal');
            const successAlert = document.getElementById('subStoreSuccessAlert');
            const errorAlert = document.getElementById('subStoreErrorAlert');
            const tableBody = document.getElementById('adminSubStoresTableBody');

            const showAlert = function (element, message) {
                element.textContent = message;
                element.classList.remove('d-none');
                window.scrollTo({ top: 0, behavior: 'smooth' });
            };

            const hideAlerts = function () {
                successAlert.classList.add('d-none');
                errorAlert.classList.add('d-none');
            };

            const upsertRow = function (rowHtml, subStoreId, prependRow = false) {
                if (!tableBody || !rowHtml) {
                    return;
                }

                const wrapper = document.createElement('tbody');
                wrapper.innerHTML = rowHtml.trim();
                const nextRow = wrapper.firstElementChild;

                if (!nextRow) {
                    return;
                }

                const existingRow = document.querySelector('[data-sub-store-id="' + subStoreId + '"]');

                if (existingRow) {
                    existingRow.replaceWith(nextRow);
                    return;
                }

                const emptyRow = tableBody.querySelector('tr td[colspan="7"]');

                if (emptyRow) {
                    emptyRow.parentElement.remove();
                }

                if (prependRow) {
                    tableBody.prepend(nextRow);
                } else {
                    tableBody.appendChild(nextRow);
                }
            };

            const submitSubStoreForm = async function (formElement, options) {
                hideAlerts();

                const submitButton = formElement.querySelector('button[type="submit"]');
                const originalLabel = submitButton ? submitButton.textContent : '';

                if (submitButton) {
                    submitButton.disabled = true;
                    submitButton.textContent = 'Saving...';
                }

                try {
                    const response = await fetch(formElement.action, {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        body: new FormData(formElement),
                    });

                    const data = await response.json();

                    if (!response.ok) {
                        const message = data.message || Object.values(data.errors || {}).flat()[0] || 'Unable to save sub store.';
                        throw new Error(message);
                    }

                    upsertRow(data.row_html, data.sub_store_id, options.prependRow);
                    bootstrap.Modal.getOrCreateInstance(options.modalElement).hide();

                    if (options.resetAfterSuccess) {
                        formElement.reset();
                    }

                    showAlert(successAlert, data.message || 'Sub store saved successfully.');
                } catch (error) {
                    showAlert(errorAlert, error.message || 'Unable to save sub store.');
                } finally {
                    if (submitButton) {
                        submitButton.disabled = false;
                        submitButton.textContent = originalLabel;
                    }
                }
            };

            if (!form || !input || rows.length === 0 || !filteredEmptyState) {
                // Keep going so modal setup still works when table is empty.
            }

            if (form && input && rows.length > 0 && filteredEmptyState) {
                form.addEventListener('submit', function (event) {
                    event.preventDefault();
                });

                const applyFilter = function () {
                    const query = input.value.trim().toLowerCase();
                    let visibleCount = 0;

                    rows.forEach(function (row) {
                        const haystack = row.getAttribute('data-search') || '';
                        const shouldShow = query === '' || haystack.includes(query);

                        row.classList.toggle('d-none', !shouldShow);

                        if (shouldShow) {
                            visibleCount += 1;
                        }
                    });

                    filteredEmptyState.classList.toggle('d-none', visibleCount !== 0);
                };

                input.addEventListener('input', applyFilter);
                applyFilter();
            }

            if (editModal && editForm) {
                editModal.addEventListener('show.bs.modal', function (event) {
                    const button = event.relatedTarget;

                    if (!button) {
                        return;
                    }

                    editForm.setAttribute('action', "{{ url('/admin/sub-stores') }}/" + button.getAttribute('data-sub-store-id'));

                    document.getElementById('edit_parent_gateway_id').value = button.getAttribute('data-parent-gateway-id') || '';
                    document.getElementById('edit_name').value = button.getAttribute('data-name') || '';
                    document.getElementById('edit_website').value = button.getAttribute('data-website') || '';
                    document.getElementById('edit_account_no').value = button.getAttribute('data-account-no') || '';
                    document.getElementById('edit_api_key').value = button.getAttribute('data-api-key') || '';
                    document.getElementById('edit_store_id').value = button.getAttribute('data-store-id') || '';
                });

                editForm.addEventListener('submit', function (event) {
                    event.preventDefault();
                    submitSubStoreForm(editForm, {
                        modalElement: editModal,
                        prependRow: false,
                        resetAfterSuccess: false,
                    });
                });
            }

            if (createModal && createForm) {
                createForm.addEventListener('submit', function (event) {
                    event.preventDefault();
                    submitSubStoreForm(createForm, {
                        modalElement: createModal,
                        prependRow: true,
                        resetAfterSuccess: true,
                    });
                });
            }
        });
    </script>
@endpush