@extends('snit.layouts.app')
@section('content')
    <div class="mt-16 offset-sm-4 col-sm-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="my-0">
                    <span class="block mb-2">Select Organisation</span>
                </h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <input class="form-control" id="org" list="organisations"
                        placeholder="--Select Organisation--" />
                    <datalist id='organisations'>
                        @foreach ($orgs as $org)
                            <option value="{{ $org->slug }}"> {{ $org->name }} </option>
                        @endforeach
                    </datalist>
                </div>
                <button id="redirect_with_org" type="button"
                    class="btn btn-sm form-control btn-outline-primary">Proceed</button>
            </div>
        </div>
    </div>
@endsection

@push('child-scripts')
    <script>
        const redirectBtn = document.querySelector('#redirect_with_org');
        const orgElement = document.querySelector('#org');
        redirectBtn.onclick = () => {
            const stringToPushToUrl = orgElement.value
            const currentLocation = window.location.href
            const newLocation = currentLocation.replace('begin', stringToPushToUrl)

            window.location.href = newLocation
            // newLocation = currentLocation + `/${stringToPushToUrl}`
        }
    </script>
@endpush