{% extends 'layouts/admin.twig' %}

{% block content %}

    <ul class="breadcrumbs el">
        <li><a href="/admin/">Admin</a> /</li>
        <li class="end">List of patients</li>
    </ul>

    <h1>{{ title }}</h1>

    {% include 'admin/patients/tabnav.twig' %}

    <form action="{{ route('admin-patients-search') }}" method="GET" class="style">
        <fieldset class="show">
            <h1><a class="show el">Search <i class="fa fa-caret-right"></i></a></h1>
            <div class="row">
                <label for="memeberid">
                    Patient ID
                </label>
                <input type="text"
                       name="id"
                       id="memeberid"
                       value="{{ request.id }}"
                />
            </div>
            <div class="row">
                <label for="firstname">
                    Firstname
                </label>
                <input type="text"
                       name="firstname"
                       id="firstname"
                       value="{{ request.firstname }}"
                />
                <div class="defaultValue">
                    <small>
                        Use complete value for search, partial search is not available
                    </small>
                </div>
            </div>
            <div class="row">
                <label for="lastname">
                    Surname
                </label>
                <input type="text"
                       name="lastname"
                       id="lastname"
                       value="{{ request.lastname }}"
                />
                <div class="defaultValue">
                    <small>
                        Use complete value for search, partial search is not available
                    </small>
                </div>
            </div>
            <div class="row">
                <label for="email">
                    Email
                </label>
                <input type="text"
                       name="email"
                       id="email"
                       value="{{ request.email }}"
                />
                <div class="defaultValue">
                    <small>
                        Use complete value for search, partial search is not available
                    </small>
                </div>
            </div>
            <div class="row">
                <label for="contact_no">
                    Phone Number
                </label>
                <input type="text"
                       name="contact_no"
                       id="contact_no"
                       value="{{ request.contact_no }}"
                />
                <div class="defaultValue">
                    <small>
                        Use complete value for search, partial search is not available
                    </small>
                </div>
            </div>
            <div class="row">
                <label for="date_of_birth">
                    Date of Birth
                </label>
                <input type="text"
                       name="date_of_birth"
                       placeholder="dd/mm/yyyy e.g. 06/07/1990"
                       id="date_of_birth"
                       value="{{ request.date_of_birth }}"
                />
                <div class="defaultValue">
                    <small>
                        Use complete value for search, partial search is not available
                    </small>
                </div>
            </div>
            {% if showNewsletterFilter %}
                <div class="row">
                    <label for="newsletter">
                        Subscribed to newsletter
                    </label>
                    <select name="newsletter"
                            id="newsletter"
                    >
                        <option value="">
                            Any
                        </option>
                        <option value="yes"
                                {{ request.newsletter == 'yes' ? 'selected' : '' }}
                        >
                            Yes
                        </option>
                        <option value="no"
                                {{ request.newsletter == 'no' ? 'selected' : '' }}
                        >
                            No
                        </option>
                    </select>
                </div>
            {% endif %}

            <div class="search-button">
                <input type="hidden" name="_action" value="search"/>
                <input type="submit" value="Search" class="BUTTON"/>
            </div>
        </fieldset>
    </form>

    {% if patients|length > 0 %}
        {% include 'admin/patients/_per_page.twig' with { perPage: perPage } %}<br/>
        <div id="patients-results">
            {% include 'admin/patients/_ajax_wrapper.twig' with { patients: patients, perPage: perPage,paginated: true } %}
        </div>


        <form action="{{ route('admin-patients-export') }}" method="post" class="style">
            <fieldset class="show">
                <h1><a class="show el">Export Patients <i class="fa fa-caret-down"></i></a></h1>
                <div class="row">Click export below to export the above patients as a CSV</div>
            </fieldset>
            <div class="row">
                <input type="hidden" name="id" value="{{ request.id }}"/>
                <input type="hidden" name="firstname" value="{{ request.firstname }}"/>
                <input type="hidden" name="lastname" value="{{ request.lastname }}"/>
                <input type="hidden" name="email" value="{{ request.email }}"/>
                <input type="hidden" name="contact_no" value="{{ request.contact_no }}"/>
                <input type="submit" value="Export"/>
            </div>
        </form>
    {% else %}
        <p>There were no patients found matching your search criteria</p>
    {% endif %}
    <script>
        (function () {
            const container = document.getElementById('patients-results');
            const form = document.querySelector('form.style[method="GET"]');

            function load(url, push = true) {
                if (!url || url === '#') return;

                // URL used for the request (with _partial=1)
                const requestUrl = new URL(url, window.location.origin);
                requestUrl.searchParams.set('_partial', '1');

                // Clean URL used for history (no _partial)
                const historyUrl = new URL(requestUrl);
                historyUrl.searchParams.delete('_partial');

                container.classList.add('is-loading');

                fetch(requestUrl, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                    .then(r => r.text())
                    .then(html => {
                        container.innerHTML = html;
                        container.classList.remove('is-loading');
                        if (push) history.pushState({ url: historyUrl.toString() }, '', historyUrl);
                    })
                    .catch(() => container.classList.remove('is-loading'));
            }

            // Intercept pager clicks
            document.addEventListener('click', function (e) {
                const a = e.target.closest('a[data-pager]');
                if (!a) return;
                e.preventDefault();
                if (!a.classList.contains('disabled')) load(a.getAttribute('href'));
            });

            // Intercept per-page clicks
            document.addEventListener('click', function (e) {
                const el = e.target.closest('[data-per-page]');
                if (!el) return;
                e.preventDefault();
                const size = el.getAttribute('data-per-page');
                const u = new URL(window.location.href);
                u.searchParams.set('per_page', size);
                u.searchParams.delete('cursor');
                load(u.toString());
            });

            // Intercept search submit
            if (form) {
                form.addEventListener('submit', function (e) {
                    e.preventDefault();
                    const params  = new URLSearchParams(new FormData(form));
                    const current = new URL(window.location.href);
                    const per     = current.searchParams.get('per_page') || '20';
                    params.set('per_page', per);
                    params.delete('cursor');

                    const base = form.getAttribute('action') || window.location.pathname;
                    const url  = base + '?' + params.toString();
                    load(url);
                });
            }




            // Back/forward
            window.addEventListener('popstate', function (e) {
                load((e.state && e.state.url) || window.location.href, false);
            });
        })();
    </script>




{% endblock %}