@extends('layouts.app')

<div id="main-content">
    <div class="container-fluid">
        <div class="block-header">
            <div class="row clearfix">
                <div class="col-md-6 col-sm-12">
                    <h1>Events</h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#">{{ config('app.event.name') }}</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Event Create</li>
                        </ol>
                    </nav>
                </div>
                <div class="mb-3">
                    @if ($errors->any())
                        <div class="col-md-12 alert alert-danger">
                            <strong>{{ $errors->first() }}</strong>
                        </div>
                    @endif
                </div>
                <div data-expires="5000" class="flash-message">
                    @foreach (['danger', 'warning', 'success', 'info'] as $msg)
                        @if (Session::has('alert-' . $msg))
                            <div data-expires="5020" class="col-md-12 alert alert-{{ $msg }}">
                                <strong> {{ Session::get('alert-' . $msg) }} </strong>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-lg-12 col-md-12 col-sm-12">
                <div class="card">
                    <div class="header">
                        <h2>Event Form</h2>
                    </div>
                    <div class="body">
                        <form enctype="multipart/form-data" method="POST" action="{{ route('event.store') }}">
                            @csrf
                            <div class="row clearfix">

                                @if (Auth::guard('organizer')->check())
                                    <input type="hidden" value="{{ Auth::user()->id }}" name="organizer">
                                @else
                                    <div class="col-md-6"><b>{{ __('Organizer') }}</b>
                                        <div class="multiselect_div">
                                            <select required id="single-selection" name="organizer"
                                                class="multiselect multiselect-custom @error('organizer') is-invalid @enderror">
                                                <option value="">Select </option>
                                                @foreach ($organizers as $organizer)
                                                    <option @if (old('organizer') == $organizer->id) selected="selected" @endif value="{{ $organizer->id }}">
                                                        {{ $organizer->company_name }}</option>
                                                @endforeach
                                            </select>
                                            @error('organizer')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                @endif

                                <div class="col-md-6"><b>{{ __('Event Title') }}</b>
                                    <div class="input-group mb-3">
                                        <input id="title" type="text"
                                            class="form-control @error('title') is-invalid @enderror" name="title"
                                            value="{{ old('title') }}" required autocomplete="title" autofocus>
                                        @error('title')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6"><b>{{ __('Start Date') }} To {{ __('End Date') }}</b>
                                    <div class="input-daterange input-group" data-provide="datepicker">
                                        <input id="start_date" type="text"
                                            class="input-sm form-control @error('start_date') is-invalid @enderror"
                                            value="{{ old('start_date') }}" name="start_date"
                                            placeholder="mm/dd/yyyy">
                                        <span class="input-group-addon range-to">to</span>
                                        <input id="end_date" type="text"
                                            class="input-sm form-control @error('end_date') is-invalid @enderror"
                                            value="{{ old('end_date') }}" name="end_date" placeholder="mm/dd/yyyy">
                                        @error('start_date')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                        @error('end_date')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6"><b>{{ __('Number of Exhibitors') }}</b>
                                    <div class="input-group mb-3">
                                        <input id="total_exhibitors" type="number"
                                            class="form-control @error('total_exhibitors') is-invalid @enderror"
                                            value="{{ old('total_exhibitors') }}" name="total_exhibitors">

                                        @error('total_exhibitors')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6"><b>{{ __('Daily Start Time') }} To
                                        {{ __('Daily End Time') }}</b>
                                    <div class="input-group">
                                        <input id="daily_start_time" type="time"
                                            class="input-sm form-control @error('daily_start_time') is-invalid @enderror"
                                            name="daily_start_time" value="{{ old('daily_start_time') }}">
                                        <span class="input-group-addon range-to">to</span>
                                        <input id="daily_end_time" type="time"
                                            class="input-sm form-control @error('daily_end_time') is-invalid @enderror"
                                            name="daily_end_time" value="{{ old('daily_end_time') }}">
                                        @error('daily_start_time')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                        @error('daily_end_time')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6"><b>{{ __('Time Zone') }}</b>
                                    <div class="multiselect_div">
                                        <select id="single-selection" name="timezone"
                                            class="multiselect multiselect-custom @error('timezone') is-invalid @enderror">
                                            <option value="">Select </option>
                                            <option @if (old('timezone') == 'Etc/GMT+12') selected="selected" @endif value="Etc/GMT+12">(GMT-12:00)
                                                International Date Line West</option>
                                            <option @if (old('timezone') == 'Pacific/Midway') selected="selected" @endif value="Pacific/Midway">(GMT-11:00) Midway
                                                Island, Samoa</option>
                                            <option @if (old('timezone') == 'Pacific/Honolulu') selected="selected" @endif value="Pacific/Honolulu">(GMT-10:00) Hawaii
                                            </option>
                                            <option @if (old('timezone') == 'US/Alaska') selected="selected" @endif value="US/Alaska">(GMT-09:00) Alaska
                                            </option>
                                            <option @if (old('timezone') == 'America/Los_Angeles') selected="selected" @endif value="America/Los_Angeles">(GMT-08:00)
                                                Pacific Time (US & Canada)</option>
                                            <option @if (old('timezone') == 'America/Tijuana') selected="selected" @endif value="America/Tijuana">(GMT-08:00)
                                                Tijuana, Baja California</option>
                                            <option @if (old('timezone') == 'US/Arizona') selected="selected" @endif value="US/Arizona">(GMT-07:00) Arizona
                                            </option>
                                            <option @if (old('timezone') == 'America/Chihuahua') selected="selected" @endif value="America/Chihuahua">(GMT-07:00)
                                                Chihuahua, La Paz, Mazatlan</option>
                                            <option @if (old('timezone') == 'US/Mountain') selected="selected" @endif value="US/Mountain">(GMT-07:00) Mountain
                                                Time (US & Canada)</option>
                                            <option @if (old('timezone') == 'America/Managua') selected="selected" @endif value="America/Managua">(GMT-06:00)
                                                Central America</option>
                                            <option @if (old('timezone') == 'US/Central') selected="selected" @endif value="US/Central">(GMT-06:00) Central
                                                Time (US & Canada)</option>
                                            <option @if (old('timezone') == 'America/Mexico_City') selected="selected" @endif value="America/Mexico_City">(GMT-06:00)
                                                Guadalajara, Mexico City, Monterrey</option>
                                            <option @if (old('timezone') == 'Canada/Saskatchewan') selected="selected" @endif value="Canada/Saskatchewan">(GMT-06:00)
                                                Saskatchewan</option>
                                            <option @if (old('timezone') == 'America/Bogota') selected="selected" @endif value="America/Bogota">(GMT-05:00) Bogota,
                                                Lima, Quito, Rio Branco</option>
                                            <option @if (old('timezone') == 'US/Eastern') selected="selected" @endif value="US/Eastern">(GMT-05:00) Eastern
                                                Time (US & Canada)</option>
                                            <option @if (old('timezone') == 'US/East-Indiana') selected="selected" @endif value="US/East-Indiana">(GMT-05:00)
                                                Indiana (East)</option>
                                            <option @if (old('timezone') == 'Canada/Atlantic') selected="selected" @endif value="Canada/Atlantic">(GMT-04:00)
                                                Atlantic Time (Canada)</option>
                                            <option @if (old('timezone') == 'America/Caracas') selected="selected" @endif value="America/Caracas">(GMT-04:00)
                                                Caracas, La Paz</option>
                                            <option @if (old('timezone') == 'America/Manaus') selected="selected" @endif value="America/Manaus">(GMT-04:00) Manaus
                                            </option>
                                            <option @if (old('timezone') == 'America/Santiago') selected="selected" @endif value="America/Santiago">(GMT-04:00)
                                                Santiago</option>
                                            <option @if (old('timezone') == 'Canada/Newfoundland') selected="selected" @endif value="Canada/Newfoundland">(GMT-03:30)
                                                Newfoundland</option>
                                            <option @if (old('timezone') == 'America/Sao_Paulo') selected="selected" @endif value="America/Sao_Paulo">(GMT-03:00)
                                                Brasilia</option>
                                            <option @if (old('timezone') == 'America/Argentina/Buenos_Aires') selected="selected" @endif value="America/Argentina/Buenos_Aires">
                                                (GMT-03:00) Buenos Aires, Georgetown</option>
                                            <option @if (old('timezone') == 'America/Godthab') selected="selected" @endif value="America/Godthab">(GMT-03:00)
                                                Greenland</option>
                                            <option @if (old('timezone') == 'America/Montevideo') selected="selected" @endif value="America/Montevideo">(GMT-03:00)
                                                Montevideo</option>
                                            <option @if (old('timezone') == 'America/Noronha') selected="selected" @endif value="America/Noronha">(GMT-02:00)
                                                Mid-Atlantic</option>
                                            <option @if (old('timezone') == 'Atlantic/Cape_Verde') selected="selected" @endif value="Atlantic/Cape_Verde">(GMT-01:00)
                                                Cape Verde Is.</option>
                                            <option @if (old('timezone') == 'Atlantic/Azores') selected="selected" @endif value="Atlantic/Azores">(GMT-01:00) Azores
                                            </option>
                                            <option @if (old('timezone') == 'Africa/Casablanca') selected="selected" @endif value="Africa/Casablanca">(GMT+00:00)
                                                Casablanca, Monrovia, Reykjavik</option>
                                            <option @if (old('timezone') == 'Etc/Greenwich') selected="selected" @endif value="Etc/Greenwich">(GMT+00:00)
                                                Greenwich Mean Time : Dublin, Edinburgh, Lisbon, London</option>
                                            <option @if (old('timezone') == 'Europe/Amsterdam') selected="selected" @endif value="Europe/Amsterdam">(GMT+01:00)
                                                Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna</option>
                                            <option @if (old('timezone') == 'Europe/Belgrade') selected="selected" @endif value="Europe/Belgrade">(GMT+01:00)
                                                Belgrade, Bratislava, Budapest, Ljubljana, Prague</option>
                                            <option @if (old('timezone') == 'Europe/Brussels') selected="selected" @endif value="Europe/Brussels">(GMT+01:00)
                                                Brussels, Copenhagen, Madrid, Paris</option>
                                            <option @if (old('timezone') == 'Europe/Sarajevo') selected="selected" @endif value="Europe/Sarajevo">(GMT+01:00)
                                                Sarajevo, Skopje, Warsaw, Zagreb</option>
                                            <option @if (old('timezone') == 'Africa/Lagos') selected="selected" @endif value="Africa/Lagos">(GMT+01:00) West
                                                Central Africa</option>
                                            <option @if (old('timezone') == 'Asia/Amman') selected="selected" @endif value="Asia/Amman">(GMT+02:00) Amman
                                            </option>
                                            <option @if (old('timezone') == 'Europe/Athens') selected="selected" @endif value="Europe/Athens">(GMT+02:00) Athens,
                                                Bucharest, Istanbul</option>
                                            <option @if (old('timezone') == 'Asia/Beirut') selected="selected" @endif value="Asia/Beirut">(GMT+02:00) Beirut
                                            </option>
                                            <option @if (old('timezone') == 'Africa/Cairo') selected="selected" @endif value="Africa/Cairo">(GMT+02:00) Cairo
                                            </option>
                                            <option @if (old('timezone') == 'Africa/Harare') selected="selected" @endif value="Africa/Harare">(GMT+02:00) Harare,
                                                Pretoria</option>
                                            <option @if (old('timezone') == 'Europe/Helsinki') selected="selected" @endif value="Europe/Helsinki">(GMT+02:00)
                                                Helsinki, Kyiv, Riga, Sofia, Tallinn, Vilnius</option>
                                            <option @if (old('timezone') == 'Asia/Jerusalem') selected="selected" @endif value="Asia/Jerusalem">(GMT+02:00)
                                                Jerusalem</option>
                                            <option @if (old('timezone') == 'Europe/Minsk') selected="selected" @endif value="Europe/Minsk">(GMT+02:00) Minsk
                                            </option>
                                            <option @if (old('timezone') == 'Africa/Windhoek') selected="selected" @endif value="Africa/Windhoek">(GMT+02:00)
                                                Windhoek</option>
                                            <option @if (old('timezone') == 'Asia/Kuwait') selected="selected" @endif value="Asia/Kuwait">(GMT+03:00) Kuwait,
                                                Riyadh, Baghdad</option>
                                            <option @if (old('timezone') == 'Europe/Moscow') selected="selected" @endif value="Europe/Moscow">(GMT+03:00) Moscow,
                                                St. Petersburg, Volgograd</option>
                                            <option @if (old('timezone') == 'Africa/Nairobi') selected="selected" @endif value="Africa/Nairobi">(GMT+03:00) Nairobi
                                            </option>
                                            <option @if (old('timezone') == 'Asia/Tbilisi') selected="selected" @endif value="Asia/Tbilisi">(GMT+03:00) Tbilisi
                                            </option>
                                            <option @if (old('timezone') == 'Asia/Tehran') selected="selected" @endif value="Asia/Tehran">(GMT+03:30) Tehran
                                            </option>
                                            <option @if (old('timezone') == 'Asia/Muscat') selected="selected" @endif value="Asia/Muscat">(GMT+04:00) Abu Dhabi,
                                                Muscat</option>
                                            <option @if (old('timezone') == 'Asia/Baku') selected="selected" @endif value="Asia/Baku">(GMT+04:00) Baku
                                            </option>
                                            <option @if (old('timezone') == 'Asia/Yerevan') selected="selected" @endif value="Asia/Yerevan">(GMT+04:00) Yerevan
                                            </option>
                                            <option @if (old('timezone') == 'Asia/Kabul') selected="selected" @endif value="Asia/Kabul">(GMT+04:30) Kabul
                                            </option>
                                            <option @if (old('timezone') == 'Asia/Yekaterinburg') selected="selected" @endif value="Asia/Yekaterinburg">(GMT+05:00)
                                                Yekaterinburg</option>
                                            <option @if (old('timezone') == 'Asia/Karachi') selected="selected" @endif value="Asia/Karachi">(GMT+05:00)
                                                Islamabad, Karachi, Tashkent</option>
                                            <option @if (old('timezone') == 'Asia/Calcutta') selected="selected" @endif value="Asia/Calcutta">(GMT+05:30) Chennai,
                                                Kolkata, Mumbai, New Delhi</option>
                                            <option @if (old('timezone') == 'Asia/Calcutta') selected="selected" @endif value="Asia/Calcutta">(GMT+05:30) Sri
                                                Jayawardenapura</option>
                                            <option @if (old('timezone') == 'Asia/Katmandu') selected="selected" @endif value="Asia/Katmandu">(GMT+05:45)
                                                Kathmandu</option>
                                            <option @if (old('timezone') == 'Asia/Almaty') selected="selected" @endif value="Asia/Almaty">(GMT+06:00) Almaty,
                                                Novosibirsk</option>
                                            <option @if (old('timezone') == 'Asia/Dhaka') selected="selected" @endif value="Asia/Dhaka">(GMT+06:00) Astana,
                                                Dhaka</option>
                                            <option @if (old('timezone') == 'Asia/Rangoon') selected="selected" @endif value="Asia/Rangoon">(GMT+06:30) Yangon
                                                (Rangoon)</option>
                                            <option @if (old('timezone') == 'Asia/Bangkok') selected="selected" @endif value="Asia/Bangkok">(GMT+07:00) Bangkok,
                                                Hanoi, Jakarta</option>
                                            <option @if (old('timezone') == 'Asia/Krasnoyarsk') selected="selected" @endif value="Asia/Krasnoyarsk">(GMT+07:00)
                                                Krasnoyarsk</option>
                                            <option @if (old('timezone') == 'Asia/Hong_Kong') selected="selected" @endif value="Asia/Hong_Kong">(GMT+08:00)
                                                Beijing, Chongqing, Hong Kong, Urumqi</option>
                                            <option @if (old('timezone') == 'Asia/Kuala_Lumpur') selected="selected" @endif value="Asia/Kuala_Lumpur">(GMT+08:00)
                                                Kuala Lumpur, Singapore</option>
                                            <option @if (old('timezone') == 'Asia/Irkutsk') selected="selected" @endif value="Asia/Irkutsk">(GMT+08:00) Irkutsk,
                                                Ulaan Bataar</option>
                                            <option @if (old('timezone') == 'Australia/Perth') selected="selected" @endif value="Australia/Perth">(GMT+08:00) Perth
                                            </option>
                                            <option @if (old('timezone') == 'Asia/Taipei') selected="selected" @endif value="Asia/Taipei">(GMT+08:00) Taipei
                                            </option>
                                            <option @if (old('timezone') == 'Asia/Tokyo') selected="selected" @endif value="Asia/Tokyo">(GMT+09:00) Osaka,
                                                Sapporo, Tokyo</option>
                                            <option @if (old('timezone') == 'Asia/Seoul') selected="selected" @endif value="Asia/Seoul">(GMT+09:00) Seoul
                                            </option>
                                            <option @if (old('timezone') == 'Asia/Yakutsk') selected="selected" @endif value="Asia/Yakutsk">(GMT+09:00) Yakutsk
                                            </option>
                                            <option @if (old('timezone') == 'Australia/Adelaide') selected="selected" @endif value="Australia/Adelaide">(GMT+09:30)
                                                Adelaide</option>
                                            <option @if (old('timezone') == 'Australia/Darwin') selected="selected" @endif value="Australia/Darwin">(GMT+09:30)
                                                Darwin</option>
                                            <option @if (old('timezone') == 'Australia/Brisbane') selected="selected" @endif value="Australia/Brisbane">(GMT+10:00)
                                                Brisbane</option>
                                            <option @if (old('timezone') == 'Australia/Canberra') selected="selected" @endif value="Australia/Canberra">(GMT+10:00)
                                                Canberra, Melbourne, Sydney</option>
                                            <option @if (old('timezone') == 'Australia/Hobart') selected="selected" @endif value="Australia/Hobart">(GMT+10:00)
                                                Hobart</option>
                                            <option @if (old('timezone') == 'Pacific/Guam') selected="selected" @endif value="Pacific/Guam">(GMT+10:00) Guam,
                                                Port Moresby</option>
                                            <option @if (old('timezone') == 'Asia/Vladivostok') selected="selected" @endif value="Asia/Vladivostok">(GMT+10:00)
                                                Vladivostok</option>
                                            <option @if (old('timezone') == 'Asia/Magadan') selected="selected" @endif value="Asia/Magadan">(GMT+11:00) Magadan,
                                                Solomon Is., New Caledonia</option>
                                            <option @if (old('timezone') == 'Pacific/Auckland') selected="selected" @endif value="Pacific/Auckland">(GMT+12:00)
                                                Auckland, Wellington</option>
                                            <option @if (old('timezone') == 'Pacific/Fiji') selected="selected" @endif value="Pacific/Fiji">(GMT+12:00) Fiji,
                                                Kamchatka, Marshall Is.</option>
                                            <option @if (old('timezone') == 'Pacific/Tongatapu') selected="selected" @endif value="Pacific/Tongatapu">(GMT+13:00)
                                                Nuku'alofa</option>
                                        </select>
                                        @error('timezone')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6"><b>{{ __('Event Logo') }}</b>
                                    <div class="input-group mb-3">
                                        <div class="custom-file">
                                            <input type="file" name="event_logo"
                                                class="custom-file-input @error('event_logo') is-invalid @enderror"
                                                id="inputGroupFile01" value="{{ old('event_logo') }}">
                                            <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
                                            @error('event_logo')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12"><b>{{ __('Fields of Member Registration Form:') }}</b>
                                    <div class="input-group mb-3">
                                        <label class="fancy-checkbox mt-3">
                                            <input @if (old('fields_exhibiter_register_form.dob')) checked @endif type="checkbox"
                                                class="form-control @error('fields_exhibiter_register_form[dob]') is-invalid @enderror"
                                                name="fields_exhibiter_register_form[dob]" value="required"
                                                data-parsley-errors-container="#error-checkbox">
                                            <span>Date of Birth</span>
                                        </label>
                                        <label class="fancy-checkbox mt-3">
                                            <input @if (old('fields_exhibiter_register_form.title_designation')) checked @endif type="checkbox"
                                                class="form-control @error('fields_exhibiter_register_form') is-invalid @enderror"
                                                name="fields_exhibiter_register_form[title_designation]"
                                                value="required">
                                            <span>Title/Designation</span>
                                        </label>
                                        <label class="fancy-checkbox mt-3">
                                            <input @if (old('fields_exhibiter_register_form.company_name')) checked @endif type="checkbox"
                                                class="form-control @error('fields_exhibiter_register_form') is-invalid @enderror"
                                                name="fields_exhibiter_register_form[company_name]" value="required">
                                            <span>Company Name</span>
                                        </label>
                                        <label class="fancy-checkbox mt-3">
                                            <input @if (old('fields_exhibiter_register_form.country')) checked @endif type="checkbox"
                                                name="fields_exhibiter_register_form[country]" value="required">
                                            <span>Country</span>
                                        </label>
                                        <label class="fancy-checkbox mt-3">
                                            <input @if (old('fields_exhibiter_register_form.phone')) checked @endif type="checkbox"
                                                name="fields_exhibiter_register_form[phone]" value="required">
                                            <span>Phone Number</span>
                                        </label>
                                        <label class="fancy-checkbox mt-3">
                                            <input @if (old('fields_exhibiter_register_form.whatsapp')) checked @endif type="checkbox"
                                                name="fields_exhibiter_register_form[whatsapp]" value="required">
                                            <span>Whatsapp Number</span>
                                        </label>
                                        @error('fields_exhibiter_register_form')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                        <p id="error-checkbox"></p>
                                    </div>
                                </div>
                                <div class="col-md-12"><b>Fields of Visitor Registration Form:</b>
                                    <div class="input-group mb-3">
                                        <label class="fancy-checkbox mt-3">
                                            <input @if (old('fields_visitor_register_form.company')) checked @endif type="checkbox"
                                                name="fields_visitor_register_form[company]" value="required"
                                                data-parsley-errors-container="#error-checkbox">
                                            <span>Company</span>
                                        </label>
                                        <label class="fancy-checkbox mt-3">
                                            <input @if (old('fields_visitor_register_form.designation')) checked @endif type="checkbox"
                                                name="fields_visitor_register_form[designation]" value="required">
                                            <span>Designation</span>
                                        </label>
                                        <label class="fancy-checkbox mt-3">
                                            <input
                                                {{ old('fields_visitor_register_form.interest') == 'required' ? 'checked' : '' }}
                                                type="checkbox" name="fields_visitor_register_form[interest]"
                                                value="required">
                                            <span>Products of Interest</span>
                                        </label>
                                        <p id="error-checkbox"></p>
                                    </div>
                                </div>
                                <div class="col-md-12"><b>{{ __('Categories/ Exhibiter Profile') }}</b>
                                    <div class="input-group">
                                        <input type="text" id="tags" name="categories[]" class="form-control tags"
                                            data-role="tagsinput" data-provide="typeahead">
                                    </div>
                                    @error('categories')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="col-md-12 mt-3">
                                    <div class="col-md-6 offset-md-5">
                                        <button type="submit" class="btn btn-primary btn-lg">
                                            {{ __('Register') }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<style>
    .tt-query {
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    }

    .tt-hint {
        color: #999
    }

    .tt-menu {
        /* used to be tt-dropdown-menu in older versions */
        width: 422px;
        margin-top: 4px;
        padding: 4px 0;
        background-color: #fff;
        border: 1px solid #ccc;
        border: 1px solid rgba(0, 0, 0, 0.2);
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
        -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
        box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    }

    .tt-suggestion {
        padding: 3px 20px;
        line-height: 24px;
    }

    .tt-suggestion.tt-cursor,
    .tt-suggestion:hover {
        color: #fff;
        background-color: #0097cf;

    }

    .tt-suggestion p {
        margin: 0;
    }

    .twitter-typeahead {
        display: inline !important;
    }

</style>

<script>
    let categories = null;
</script>