@extends('admin.layouts.app')
@section('style')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/23.0.10/css/intlTelInput.css" integrity="sha512-OkSoWyaoScjXhOm87XO5hDz1E5buvm2aAkq+5zJmaYpylA0OKJ5no5qc4ZRrmApoaXEgXc3n0iyVS1q5FgiJjg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
    .iti {
        position: relative;
        display: inline-block;
        width: 100% !important;
    }

</style>
@endsection
@section('content')
<div class="row">
    <div class="col">
        @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif

        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-3">
                    Add new exhibitor
                </h5>

            </div>
            <div class="card-body">
                <form action="{{ route('admin.exhibitors.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group row mb-3">
                        <div class="col-2">
                            <img id="avatar_preview" src="{{ asset('dashboard/assets/img/avatars/14.png') }}" alt="Image Preview" class="img-thumbnail rounded-circle ms-3" style="max-width: 150px;">
                        </div>
                        <div class="col align-self-center">
                            <label for="image" class="form-label">Exhibitor Image <small class="text-danger">*</small></label>
                            <div class="input-group">
                                <input type="file" class="form-control @error('image') is-invalid @enderror" id="image" name="image" accept="image/*" style="display: none;" onchange="previewImage(event)">
                                <label class="btn rounded-pill btn-label-danger waves-effect" for="image" id="image_label">Choose File</label>
                                @error('image')
                                <span class="text-danger" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="first_name" class="form-label">First Name <small class="text-danger">*</small></label>
                            <input type="text" class="form-control @error('first_name') is-invalid @enderror" name="first_name" id="first_name" value="{{ old('first_name') }}" required />
                            @error('first_name')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col">
                            <label for="last_name" class="form-label">Last Name <small class="text-danger">*</small></label>
                            <input type="text" class="form-control @error('last_name') is-invalid @enderror" name="last_name" id="last_name" value="{{ old('last_name') }}" required />
                            @error('last_name')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="email" class="form-label">Email <small class="text-danger">*</small></label>
                            <input type="email" class="form-control @error('email') is-invalid @enderror" name="email" id="email" value="{{ old('email') }}" required />
                            @error('email')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col">
                            <label for="password" class="form-label">Password <small class="text-danger">*</small></label>
                            <input type="password" class="form-control @error('password') is-invalid @enderror" name="password" id="password" required />
                            @error('password')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="phone_number" class="form-label">Phone Number <small class="text-danger">*</small></label><br>
                            <input type="tel" class="form-control @error('phone_number') is-invalid @enderror" name="phone_number" id="phone" value="{{ old('phone_number') }}" required />
                            <input type="hidden" class="form-control @error('country_code') is-invalid @enderror" name="country_code" id="country_code" value="{{ old('country_code') }}" required />
                            @error('phone_number')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col">
                            <label for="business_registration_number" class="form-label">Business Registration Number <small class="text-danger">*</small></label>
                            <input type="text" class="form-control @error('business_registration_number') is-invalid @enderror" name="business_registration_number" id="business_registration_number" value="{{ old('business_registration_number') }}" required />
                            @error('business_registration_number')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="type_of_business" class="form-label">Type Of Business <small class="text-danger">*</small></label>
                            <select name="type_of_business" class="selectpicker w-100 @error('type_of_business') is-invalid @enderror" data-style="btn-default" id="type_of_business" onchange="selectTypeOfBusiness(this)">
                                <option value="Event Management" {{ old('type_of_business') == 'Event Management' ? 'selected' : '' }}>Event Management</option>
                                <option value="Exhibition Organizer" {{ old('type_of_business') == 'Exhibition Organizer' ? 'selected' : '' }}>Exhibition Organizer</option>
                                <option value="Retail Event Organizer" {{ old('type_of_business') == 'Retail Event Organizer' ? 'selected' : '' }}>Retail Event Organizer</option>
                                <option value="Other" {{ old('type_of_business') == 'Other' ? 'selected' : '' }}>Other</option>
                            </select>
                            @error('type_of_business')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col" id="other_type_of_business">

                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="contact_person" class="form-label">Contact Person <small class="text-danger">*</small></label>
                            <input type="text" class="form-control @error('contact_person') is-invalid @enderror" name="contact_person" id="contact_person" placeholder="Full name contact person" value="{{ old('contact_person') }}" required />
                            @error('contact_person')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col">
                            <label for="position" class="form-label">Position <small class="text-danger">*</small></label>
                            <input type="text" class="form-control @error('position') is-invalid @enderror" name="position" id="position" placeholder="Position of contact person" value="{{ old('position') }}" required />
                            @error('position')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="website" class="form-label">Website <small class="text-danger">*</small></label>
                            <input type="text" class="form-control @error('website') is-invalid @enderror" name="website" id="website" value="{{ old('website') }}" required />
                            @error('website')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col">
                            <label for="city_id" class="form-label">City <small class="text-danger">*</small></label>
                            <select id="city_id" name="city_id" class="select2 form-select @error('city_id') is-invalid @enderror" data-allow-clear="true">
                                <option value="" selected>Choose from cities</option>
                                @foreach ($cities as $key => $city)
                                <option value="{{ $city->id }}" {{ old('city_id') == $city->id ? 'selected' : '' }}>{{ $city->name }}</option>
                                @endforeach
                            </select>
                            @error('city_id')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="address" class="form-label">Address <small class="text-danger">*</small></label>
                            <textarea class="form-control @error('address') is-invalid @enderror" name="address" id="address" style="max-height: 100px" required placeholder="Address of your company">{{ old('address') }}</textarea>
                            @error('address')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col">
                            <label for="description" class="form-label">Description <small class="text-danger">*</small></label>
                            <textarea class="form-control @error('description') is-invalid @enderror" name="description" id="description" style="max-height: 100px" required placeholder="Description of your company">{{ old('description') }}</textarea>
                            @error('description')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="years_in_business" class="form-label">Years in business <small class="text-danger">*</small></label>
                            <select id="years_in_business" name="years_in_business" class="selectpicker w-100 @error('years_in_business') is-invalid @enderror" data-style="btn-default">
                                <option value="" selected>Select years</option>
                                <option value="-1" {{ old('years_in_business') == '-1' ? 'selected' : '' }}>Less than 1 year</option>
                                <option value="1-2" {{ old('years_in_business') == '1-2' ? 'selected' : '' }}>1-2 years</option>
                                <option value="2-3" {{ old('years_in_business') == '2-3' ? 'selected' : '' }}>2-3 years</option>
                                <option value="3-5" {{ old('years_in_business') == '3-5' ? 'selected' : '' }}>3-5 years</option>
                                <option value="+5" {{ old('years_in_business') == '+5' ? 'selected' : '' }}>+5 years</option>
                            </select>
                            @error('years_in_business')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col">
                            <label for="organized_events" class="form-label">Number of Events Organized Annually <small class="text-danger">*</small></label>
                            <select name="organized_events" id="organized_events" class="selectpicker w-100 @error('organized_events') is-invalid @enderror" data-style="btn-default">
                                <option value="0" {{ old('organized_events') == '0' ? 'selected' : '' }}>0</option>
                                <option value="-10" {{ old('organized_events') == '-10' ? 'selected' : '' }}>Less than 10</option>
                                <option value="10-50" {{ old('organized_events') == '10-50' ? 'selected' : '' }}>10-50</option>
                                <option value="50-100" {{ old('organized_events') == '50-100' ? 'selected' : '' }}>50-100</option>
                                <option value="+100" {{ old('organized_events') == '+100' ? 'selected' : '' }}>+100</option>
                            </select>
                            @error('organized_events')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="types_of_staff_needed" class="form-label">Types of Staff Needed <small class="text-danger">*</small></label>
                            <select id="types_of_staff_needed" name="types_of_staff_needed[]" class="select2 w-100 @error('types_of_staff_needed') is-invalid @enderror" data-allow-clear="true" multiple>
                                @foreach ($staff_types as $staff_type)
                                <option value="{{ $staff_type->type }}" {{ collect(old('types_of_staff_needed'))->contains($staff_type->type) ? 'selected' : '' }}>{{ $staff_type->type }}</option>
                                @endforeach
                            </select>
                            @error('types_of_staff_needed')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col">
                            <label for="frequency_staff_work" class="form-label">Frequency of Staff Requirements <small class="text-danger">*</small></label>
                            <select name="frequency_staff_work" id="frequency_staff_work" class="selectpicker w-100 @error('frequency_staff_work') is-invalid @enderror" data-style="btn-default">
                                <option value="Daily" {{ old('frequency_staff_work') == 'Daily' ? 'selected' : '' }}>Daily</option>
                                <option value="Weekly" {{ old('frequency_staff_work') == 'Weekly' ? 'selected' : '' }}>Weekly</option>
                                <option value="Monthly" {{ old('frequency_staff_work') == 'Monthly' ? 'selected' : '' }}>Monthly</option>
                                <option value="Occasionally" {{ old('frequency_staff_work') == 'Occasionally' ? 'selected' : '' }}>Occasionally</option>
                            </select>
                            @error('frequency_staff_work')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="hourly_rate" class="form-label">Hourly Rate <small class="text-danger">*</small></label>
                            <input type="number" name="hourly_rate" id="hourly_rate" min="1" class="form-control @error('hourly_rate') is-invalid @enderror" placeholder="Enter hourly rate" value="{{ old('hourly_rate') }}" required>
                            @error('hourly_rate')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="additional_info" class="form-label">Additional Information</label>
                            <textarea name="additional_info" id="additional_info" class="form-control @error('additional_info') is-invalid @enderror" rows="4" placeholder="Enter any additional information">{{ old('additional_info') }}</textarea>
                            @error('additional_info')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <button type="submit" class="btn btn-primary" onclick="loadingBtn(this)">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    function selectTypeOfBusiness(element) {
        var otherHtml = document.getElementById("other_type_of_business");
        if (element.value == "Other") {
            var html = "<label class='form-label' for='type_of_business_other'>Type Of Business<small class='text-danger'>*</small></label><input  class='form-control' name='type_of_business_other' id='type_of_business_other' placeholder='Type of your business' required  />";
            otherHtml.innerHTML = html;
        } else {
            otherHtml.innerHTML = "";
        }
    }

</script>


<script src="{{ asset('dashboard/libs/intl/intlTelInput.min.js') }}"></script>
<script>
    const input = document.querySelector("#phone");
    // initial value
    document.getElementById("country_code").value = "+974";
    var iti = window.intlTelInput(input, {
        customPlaceholder: function(selectedCountryPlaceholder, selectedCountryData) {
            return "e.g. " + selectedCountryPlaceholder;
        }
        , initialCountry: "auto"
        , geoIpLookup: callback => {
            fetch("https://ipapi.co/json")
                .then(res => res.json())
                .then(data => callback(data.country_code))
                .catch(() => callback("us"));
        }
        , showSelectedDialCode: true
        , separateDialCode: true
        , countrySearch: false
        , autoInsertDialCode: true
        , autoPlaceholder: "polite"
        , nationalMode: false
        , fixDropdownWidth: false
        , useFullscreenPopup: false
        , initialCountry: "auto"
        , utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@19.5.5/build/js/utils.js"
    });
    input.addEventListener("countrychange", function() {
        const countryData = iti.getSelectedCountryData();
        document.getElementById("country_code").value = countryData.dialCode;
    });

</script>

<script>
    document.getElementById('image').addEventListener('change', function() {
        var fileName = this.files[0].name;
        document.getElementById('image_label').textContent = fileName;
    });

</script>

<script>
    function previewImage(event) {
        var reader = new FileReader();
        reader.onload = function() {
            var output = document.getElementById('avatar_preview');
            output.src = reader.result;
        };
        reader.readAsDataURL(event.target.files[0]);
    }

</script>
@endsection