@extends('layouts.back')

@section('stylesheets')
    <link rel="stylesheet" href={{asset("css/dashboard.css")}}>
    <style>
        .table-pagination svg {
            max-width: 20px;
            margin-top: 25px;
        }

        .table-pagination {
            margin-bottom: 15rem;
        }
    </style>
@endsection
@section('nav-top-left')
    <x-super-administrator.nav-top-left pageTitle="Invitation links"
                                        pageSubTitle="Manage invitation links for user accessibility in the system"></x-super-administrator.nav-top-left>
@endsection

@section('content')
<div id="invitation">
    <div class="row justify-content-between Header mb-5">
        <div class="col-md-8  d-flex  justify-content-center justify-content-md-start Header-breadcrumbs">
            <p class="Header-breadcrumbs--title">{{ Breadcrumbs::render('invitation') }}
            </p>
        </div>
         <div class="col-md-4 d-flex  justify-content-center justify-content-md-end Header-buttons">
            <a class="Header-buttons--button me-3">
                <p class="Header-buttons--button--text">lorem
                </p>
                <img src="{{asset('images/plus.svg')}}"class="homeHeader-buttons--button--img">
            </a>
        </div>
    </div>
</div>

    <div class="container">
        <div class="go-back-container row">
        </div>
        <div class="search-header row mb-4">
            <div class="form-container col-sm-12 col-md-12">
            <form action="#" method="Post" class="row gy-4" style="gap: 0px">
            @csrf
            @method('POST')
            <div class="form-field col-12">
                <input type="text" name="keyword" class="w-100" placeholder="Start typing" id="keyword" oninput="setVal()">
            </div>
            <div class="form-field col-sm-12 col-md-4">
                    <label for="status">Status</label>
                <select class="form-select single" name="status" id="status"  onchange="setVal()">
                    <option value="{{null}}" selected>All</option>
                    <option value="1">Active</option>
                    <option value="0">Expired</option>
                </select>
            </div>
            <div class="form-field col-sm-12 col-md-4">
                <label for="used">Used</label>
                <select class="form-select single" name="used" id="used"  onchange="setVal()">
                    <option value="{{null}}" selected>All</option>
                    <option value="1">Used</option>
                    <option value="0">Not Used</option>
                </select>
            </div>
        </form>
            </div>
        </div>
        <ul class="color-legend">
            <li class="success">Successfully used invitation list</li>
            <li class="pending">Invitation links pending (Not expired , Not yet used)</li>
            <li class="failed">Failed Invitation links (Expired before and never used)</li>
        </ul>
        <div id="listDataContainer" style="{display: contents}">
            @include('superadmin.invitation_links.partials.manual-list-data',['links'=>$links])
        </div>
        <div class="table-pagination">
            {{--            {{ $users->links() }}--}}
        </div>
    </div>
@endsection

@section('javascripts')

    <script>
        $s = jQuery.noConflict()
        function setVal() {
            var keyword = $s('#keyword').val();
            var status = $s('#status').val();
            var used = $s('#used').val();

            var qurl = '{{route('super.invitation.links.manual.show')}}' + '?keyword=' + keyword + '&status=' + status + '&used=' + used;

            $s.ajax({
                type: "GET",
                url: qurl,
                success: function (data) {
                    console.log(data)
                    $s('#listDataContainer').html(data);
                }
            });
            return false;
        }

        $s(document).ready(function () {




            $s(document).on('click', '.pagination a', function (event) {
                event.preventDefault();
                var keyword = $s('#keyword').val();
                var status = $s('#status').val();
                var used = $s('#used').val();

                var qurl = $s(this).attr("href") + '&keyword=' + keyword + '&status=' + status + '&used=' + used;

                $s.ajax({
                    type: "GET",
                    url: qurl,
                    success: function (data) {
                        console.log(data)
                        $s('#listDataContainer').html(data);
                    }
                });
                return false;
            });
        });
    </script>
@endsection