@extends(backpack_view('blank'))

@section('after_styles')
    <link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
@endSection
    
@php
  $breadcrumbs = [
      trans('backpack::crud.admin') => url(config('backpack.base.route_prefix'), 'dashboard'),
      trans('backpack::base.my_account') => false,
  ];
@endphp

@section('header')
    <section class="content-header">
        <div class="container-fluid mb-3">
            <h1>Numbers Whitelist</h1>
            <div>Manage approved numbers that can be redirected directly to the pharmacist.</div>
        </div>
    </section>
@endsection

@section('content')

    

    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <form method="POST" action="{{ url(config('backpack.base.route_prefix').'/pharmacy/save-number-whitelist') }}">
                    @csrf
                    <input type="hidden" name="pharmacy_id" value="{{ $pharmacyId }}">
                    <div class="form-group mb-3">
                        <label>Phone Numbers Whitelist</label>
                            <input id="phone-numbers" class="form-control" value="{{ $numberWhiteLists }}" autocomplete="off" name="phone-numbers" placeholder="Enter phone numbers to whitelist">
                        </div>
                        <button type="submit" class="btn btn-success">
                            Save Changes
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endSection


@push('after_scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            new TomSelect("#phone-numbers",{
                create: true,
                sortField: {
                    field: "text",
                    direction: "asc"
                },
                createOnBlur: true,
            });
        });
    </script>
@endpush