@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">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-3">
                    Add new promoter
                </h5>

            </div>
            <div class="card-body">
                <form action="{{ route('admin.promoters.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">Promoter 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="email" class="form-label">Email <small class="text-danger">*</small></label>
                            <input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" value="{{ old('email') }}" required>
                            @error('email')
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </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" id="password" name="password" required>
                            @error('password')
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </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" id="first_name" name="first_name" value="{{ old('first_name') }}" required>
                            @error('first_name')
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </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" id="last_name" name="last_name" value="{{ old('last_name') }}" required>
                            @error('last_name')
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="date_of_birth" class="form-label">Date of Birth <small class="text-danger">*</small></label>
                            <input type="date" class="form-control @error('date_of_birth') is-invalid @enderror" id="date_of_birth" name="date_of_birth" value="{{ old('date_of_birth') }}" required>
                            @error('date_of_birth')
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="col">
                            <label for="gender" class="form-label">Gender <small class="text-danger">*</small></label>
                            <select class="selectpicker w-100 @error('gender') is-invalid @enderror" data-style="btn-default" id="gender" name="gender" required>
                                <option value="" disabled selected>Select Gender</option>
                                <option value="male" {{ old('gender') == 'male' ? 'selected' : '' }}>Male</option>
                                <option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>Female</option>
                                <option value="other" {{ old('gender') == 'other' ? 'selected' : '' }}>Other</option>
                            </select>
                            @error('gender')
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="city_id" class="form-label">City <small class="text-danger">*</small></label>
                            <select class="select2 w-100 @error('city_id') is-invalid @enderror" data-allow-clear="true" id="city_id" name="city_id" required>
                                <option value="" disabled selected>Select City</option>
                                @foreach($cities as $city)
                                <option value="{{ $city->id }}" {{ old('city_id') == $city->id ? 'selected' : '' }}>{{ $city->name }}</option>
                                @endforeach
                            </select>
                            @error('city_id')
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="col">
                            <label for="nationality_id" class="form-label">Nationality <small class="text-danger">*</small></label>
                            <select class="select2 w-100 @error('nationality_id') is-invalid @enderror" data-allow-clear="true" id="nationality_id" name="nationality_id" required>
                                <option value="" disabled selected>Select Nationality</option>
                                @foreach($countries as $country)
                                <option value="{{ $country->id }}" {{ old('nationality_id') == $country->id ? 'selected' : '' }}>{{ $country->name }}</option>
                                @endforeach
                            </select>
                            @error('nationality_id')
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="height" class="form-label">Height (cm) <small class="text-danger">*</small></label>
                            <input type="number" class="form-control @error('height') is-invalid @enderror" id="height" name="height" value="{{ old('height') }}" required>
                            @error('height')
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="col">
                            <label for="weight" class="form-label">Weight (kg) <small class="text-danger">*</small></label>
                            <input type="number" class="form-control @error('weight') is-invalid @enderror" id="weight" name="weight" value="{{ old('weight') }}" required>
                            @error('weight')
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </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>
                            <input type="tel" class="form-control @error('phone_number') is-invalid @enderror" id="phone_number" name="phone_number" value="{{ old('phone_number') }}" required>
                            <input type="hidden" id="country_code" name="country_code" value="{{ old('country_code') }}">
                            @error('phone_number')
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="col">
                            <label for="whatsapp_number" class="form-label">WhatsApp Number <small class="text-danger">*</small></label>
                            <input type="tel" class="form-control @error('whatsapp_number') is-invalid @enderror" id="whatsapp_number" name="whatsapp_number" value="{{ old('whatsapp_number') }}" required>
                            <input type="hidden" id="whatsapp_country_code" name="whatsapp_country_code" value="{{ old('whatsapp_country_code') }}">
                            @error('whatsapp_number')
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="languages_spoken" class="form-label">Languages Spoken <small class="text-danger">*</small></label>
                            <select multiple class="select2 w-100 @error('languages_spoken') is-invalid @enderror" data-allow-clear="true" id="languages_spoken" name="languages_spoken[]" required>
                                <option value="English" {{ in_array('English', old('languages_spoken', [])) ? 'selected' : '' }}>English</option>
                                <option value="Spanish" {{ in_array('Spanish', old('languages_spoken', [])) ? 'selected' : '' }}>Spanish</option>
                                <option value="French" {{ in_array('French', old('languages_spoken', [])) ? 'selected' : '' }}>French</option>
                                <option value="German" {{ in_array('German', old('languages_spoken', [])) ? 'selected' : '' }}>German</option>
                                <option value="Chinese" {{ in_array('Chinese', old('languages_spoken', [])) ? 'selected' : '' }}>Chinese</option>
                                <option value="Arabic" {{ in_array('Arabic', old('languages_spoken', [])) ? 'selected' : '' }}>Arabic</option>
                            </select>
                            @error('languages_spoken')
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="col">
                            <label for="experience_in_hosting" class="form-label">Experience in Hosting (Years) <small class="text-danger">*</small></label>
                            <select class="selectpicker w-100 @error('experience_in_hosting') is-invalid @enderror" data-style="btn-default" id="experience_in_hosting" name="experience_in_hosting" required>
                                <option value="0" {{ old('experience_in_hosting') == '0' ? 'selected' : '' }}>0</option>
                                <option value="-1" {{ old('experience_in_hosting') == '-1' ? 'selected' : '' }}>Less than 1 year</option>
                                <option value="1-2" {{ old('experience_in_hosting') == '1-2' ? 'selected' : '' }}>1-2 years</option>
                                <option value="2-3" {{ old('experience_in_hosting') == '2-3' ? 'selected' : '' }}>2-3 years</option>
                                <option value="3-5" {{ old('experience_in_hosting') == '3-5' ? 'selected' : '' }}>3-5 years</option>
                                <option value="+5" {{ old('experience_in_hosting') == '+5' ? 'selected' : '' }}>+5 years</option>
                            </select>
                            @error('experience_in_hosting')
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="TagifyBasic" class="form-label">Previous Events Worked <small class="text-danger">*</small></label>
                            <input id="TagifyBasic" name="events_worked" class="form-control @error('events_worked') is-invalid @enderror" value="Tag1, Tag2, Tag3" required />
                            @error('events_worked')
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="skills" class="form-label">Skills <small class="text-danger">*</small></label>
                            <select multiple class="select2 w-100 @error('skills') is-invalid @enderror" data-allow-clear="true" id="skills" name="skills[]" required>
                                @foreach($skills as $skill)
                                <option value="{{ $skill->id }}" {{ in_array($skill->id, old('skills', [])) ? 'selected' : '' }}>{{ $skill->name }}</option>
                                @endforeach
                            </select>
                            @error('skills')
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="col">
                            <label for="preferred_work_locations" class="form-label">Preferred Work Locations <small class="text-danger">*</small></label>
                            <select multiple class="select2 w-100 @error('preferred_work_locations') is-invalid @enderror" data-allow-clear="true" id="preferred_work_locations" name="preferred_work_locations[]" required>
                                @foreach($cities as $city)
                                <option value="{{ $city->id }}" {{ in_array($city->id, old('preferred_work_locations', [])) ? 'selected' : '' }}>{{ $city->name }}</option>
                                @endforeach
                            </select>
                            @error('preferred_work_locations')
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="expected_hourly_rate" class="form-label">Expected Hourly Rate <small class="text-danger">*</small></label>
                            <input type="number" name="expected_hourly_rate" id="expected_hourly_rate" min="1" class="form-control @error('expected_hourly_rate') is-invalid @enderror" placeholder="Enter expected hourly rate" value="{{ old('expected_hourly_rate') }}" required>
                            @error('expected_hourly_rate')
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="promoter_work_hours" class="form-label">Promoter Work Hours <small class="text-danger">*</small></label>
                            <select multiple class="select2 w-100 @error('promoter_work_hours') is-invalid @enderror" data-allow-clear="true" id="promoter_work_hours" name="promoter_work_hours[]" required>
                                <option value="morning" {{ in_array('morning', old('promoter_work_hours', [])) ? 'selected' : '' }}>Morning</option>
                                <option value="afternoon" {{ in_array('afternoon', old('promoter_work_hours', [])) ? 'selected' : '' }}>Afternoon</option>
                                <option value="evening" {{ in_array('evening', old('promoter_work_hours', [])) ? 'selected' : '' }}>Evening</option>
                                <option value="night" {{ in_array('night', old('promoter_work_hours', [])) ? 'selected' : '' }}>Night</option>
                            </select>
                            @error('promoter_work_hours')
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <div class="form-check">
                                <input class="form-check-input @error('is_certificates') is-invalid @enderror" type="checkbox" id="is_certificates" name="is_certificates" {{ old('is_certificates') ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_certificates">
                                    Do you have any certificates?
                                </label>
                            </div>
                            @error('is_certificates')
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </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 src="{{ asset('dashboard/libs/intl/intlTelInput.min.js') }}"></script>
<script>
    const input = document.querySelector("#phone_number");
    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>
    const input2 = document.querySelector("#whatsapp_number");
    var iti2 = window.intlTelInput(input2, {
        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"
    });
    input2.addEventListener("countrychange", function() {
        const countryData = iti2.getSelectedCountryData();
        document.getElementById("whatsapp_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