@extends('layouts.front-app')
@section('title')
    Agent Form
@endsection

@section('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
@endsection

@section('content')
    <style>
        .select2-container--default .select2-selection--multiple {
            background-color: white;
            border: 1px solid #aaa;
            border-radius: 1px;
            cursor: text;
            padding-bottom: 5px;
            padding-right: 5px;
            width: 100%;
            min-height: 50px;
            position: relative;
        }
    </style>

    <section class="formSec">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <form action="{{ route('user.signup.post') }}" class="agentForm" method="POST"
                          enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="role_id" value="agent">
                        <input type="hidden" name="status" value="0">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-md-12">
                                    <h2 class="sectionHeading">Become an Agent<em>*</em></h2>
                                </div>
                                <div class="col-md-4">
                                    <label for="image-upload" style="color: white;">Profile Image<span
                                            class="text-danger">*</span></label>
                                    <input type="file" id="image-upload" class="form-control" name="image"
                                           onchange="previewImage(event)" required>
                                    @error('image')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-md-12">
                                    <img style="color: white" id="image-preview" src="" width="150" alt="Image Preview">
                                </div>
                                <br>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">First Name <span>*</span></label>
                                        <input class="form-control" type="text" placeholder="John" name="first_name"
                                               required>
                                        @error('first_name')
                                        <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <!--<div class="col-md-4">
                                    <div class="form-group">
                                        <label for="">Middle Name</label>
                                        <input class="form-control" type="text" placeholder="&#45;&#45;&#45;&#45;&#45;&#45;">
                                    </div>
                                </div>-->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Last Name <span>*</span></label>
                                        <input class="form-control" type="text" placeholder="Smith" name="last_name">
                                        @error('last_name')
                                        <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Email <span>*</span></label>
                                        <input class="form-control" type="email" placeholder="info@yourmail.com"
                                               name="email" required>
                                        @error('email')
                                        <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Phone Number <span>*</span></label>
                                        <input class="form-control" type="tel" placeholder="+1(123) 456 7890"
                                               name="phone_number" required>
                                        @error('phone_number')
                                        <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="">Address <span>*</span></label>
                                        <input class="form-control" type="text"
                                               placeholder="123 Dummy Street 45 Building United State" name="address"
                                               required>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="">State <span>*</span></label>
                                        <select class="form-control" name="state" id="stateDropdown">
                                            <option value="">Select State</option>
                                            @foreach ($states as $state)
                                                <option value="{{ $state->name }}">{{ $state->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="">City <span>*</span></label>
                                        <select class="form-control" name="city" id="cityDropdown">
                                            <option value="">Select City</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="">Zipcode <span>*</span></label>
                                        <input class="form-control" type="number" placeholder="75800" name="zip_code"
                                               required>
                                        @error('zip_code')
                                        <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Password <span>*</span></label>
                                        <input class="form-control" type="password" placeholder="Password"
                                               name="password" required>
                                        @error('password')
                                        <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Confirm Password<em>*</em></label>
                                        <input class="form-control" type="password" placeholder="Confirm password"
                                               name="password_confirmation" value="" required>
                                    </div>
                                </div>
                                <!--<div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Upload a Valid ID <span>*</span></label>
                                        <div class="imgHolder">
                                            <input type="file" accept="image/*" name="image" id="file" class="imgUpload">
                                            <span>Upload ID Front</span>
                                            <img >
                                            <i class="fas fa-image"></i>
                                        </div>
                                    </div>
                                </div>-->

                                <!--Tell Me Your Details Start-->
                                <div class="col-md-12 mt-5">
                                    <h2 class="sectionHeading">Tell Me Your Details<em>*</em></h2>
                                </div>
                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="">Select the category in which you are specialized in Inspection
                                            <span>*</span></label>
                                        <select class="js-example-basic-multiple js-states form-control"
                                                name="category[]"
                                                multiple="multiple">
                                            <option value="cars">Cars</option>
                                            <option value="phones">Phones</option>
                                            <option value="watches">Watches</option>
                                            <option value="laptops">Laptops</option>
                                            <option value="vapes">Vapes</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="">Select the State and the cities in which you can go for the
                                            inspection<span>*</span></label>
                                        <div class="form-group">
                                            <label for="">State <span>*</span></label>
                                            <select class="js-example-basic-multiple js-states form-control"
                                                    name="canGostate[]"
                                                    multiple="multiple">
                                                <option value="">Select State</option>
                                                @foreach ($states as $state)
                                                    <option value="{{ $state->name }}">{{ $state->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="">City <span>*</span></label>
                                        <select class="js-example-basic-multiple js-states form-control"
                                                name="canGOcity[]"
                                                multiple="multiple">
                                            <option value="">Select City</option>
                                            @foreach ($states as $state)
                                                @foreach ($state->cities as $city)
                                                    <option value="{{ $city->name }}">{{ $city->name }}</option>
                                                @endforeach
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Upload a Valid ID <span>*</span></label>
                                        <div class="imgHolder">
                                            <input type="file" accept="image/*" name="upload_id_front" id="file"
                                                   class="imgUpload" required>
                                            <span>Upload ID Front</span>
                                            <img>
                                            <i class="fas fa-image"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Upload a Valid ID <span>*</span></label>
                                        <div class="imgHolder">
                                            <input type="file" accept="image/*" name="upload_id_back" id="file"
                                                   class="imgUpload" required>
                                            <span>Upload ID Back</span>
                                            <img>
                                            <i class="fas fa-image"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Date of Birth <span>*</span></label>
                                        <input class="form-control" type="date" placeholder="10 - 02 - 1999"
                                               name="date_of_birth">
                                    </div>
                                </div>
                                {{--                                <div class="col-6">--}}
                                {{--                                    <div class="form-group">--}}
                                {{--                                        <label for="">Address <span>*</span></label>--}}
                                {{--                                        <input class="form-control" type="text"--}}
                                {{--                                               placeholder="123 Dummy Street 45 Building United State"--}}
                                {{--                                               name="shop_address">--}}
                                {{--                                    </div>--}}
                                {{--                                </div>--}}

                                {{--                                <div class="col-md-4">--}}
                                {{--                                    <div class="form-group">--}}
                                {{--                                        <label for="">City <span>*</span></label>--}}
                                {{--                                        <select class="form-control" name="shop_city">--}}
                                {{--                                            <option value="">Select City</option>--}}
                                {{--                                            @foreach ($states as $state)--}}
                                {{--                                                @foreach ($state->cities as $city)--}}
                                {{--                                                    <option value="{{ $city->name }}">{{ $city->name }}</option>--}}
                                {{--                                                @endforeach--}}
                                {{--                                            @endforeach--}}
                                {{--                                        </select>--}}
                                {{--                                    </div>--}}
                                {{--                                </div>--}}
                                {{--                                <div class="col-md-4">--}}
                                {{--                                    <div class="form-group">--}}
                                {{--                                        <label for="">State <span>*</span></label>--}}
                                {{--                                        <select class="form-control" name="shop_state">--}}
                                {{--                                            <option value="">Select State</option>--}}
                                {{--                                            @foreach ($states as $state)--}}
                                {{--                                                <option value="{{ $state->name }}">{{ $state->name }}</option>--}}
                                {{--                                            @endforeach--}}
                                {{--                                        </select>--}}
                                {{--                                    </div>--}}
                                {{--                                </div>--}}
                                {{--                                <div class="col-md-4">--}}
                                {{--                                    <div class="form-group">--}}
                                {{--                                        <label for="">City <span>*</span></label>--}}
                                {{--                                        <input class="form-control" type="text" placeholder="Usa"--}}
                                {{--                                               name="shop_city">--}}
                                {{--                                    </div>--}}
                                {{--                                </div>--}}
                                {{--                                <div class="col-md-4">--}}
                                {{--                                    <div class="form-group">--}}
                                {{--                                        <label for="">State <span>*</span></label>--}}
                                {{--                                        <input class="form-control" type="text" placeholder="------"--}}
                                {{--                                               name="shop_state">--}}
                                {{--                                    </div>--}}
                                {{--                                </div>--}}
                                {{--                                <div class="col-md-4">--}}
                                {{--                                    <div class="form-group">--}}
                                {{--                                        <label for="">Zipcode <span>*</span></label>--}}
                                {{--                                        <input class="form-control" type="number" placeholder="75800"--}}
                                {{--                                               name="shop_zip_code">--}}
                                {{--                                    </div>--}}
                                {{--                                </div>--}}
                                <div class="col-12">
                                    <div class="form-group radio">
                                        <label for="">Do you have your own convenience <span>*</span></label>
                                        <div>
                                            <div>
                                                <input type="radio" name="convince" value="yes" id="yes" required>
                                                <label for="yes">Yes</label>
                                            </div>
                                            <div>
                                                <input type="radio" name="convince" value="no" id="no" required>
                                                <label for="no">No</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

<!--                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="">Upload Your Picture <span>*</span></label>
                                        <div class="imgHolder">
                                            <input type="file" name="upload_image" id="file"
                                                   class="imgUpload">
                                            <span>Upload Your Picture</span>
                                            <img>
                                            <i class="fas fa-image"></i>
                                        </div>
                                    </div>
                                </div>-->
                                <div class="col-12">
                                    <div class="form-group radio">
                                        <label for="">Agree with the Terms & Condition <span>*</span></label>
                                        <div>
                                            <input type="checkbox" name="terms" id="terms" required>
                                            <label for="terms">Yes</label>
                                        </div>
                                    </div>
                                </div>
                                <!--Tell Me Your Details End-->

                                <div class="col-12">
                                    <div class="btnCont">
                                        <button class="themeBtn">Submit Now</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('script')
    <!-- Include select2 CSS and JS files -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js" defer></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>

        $(document).ready(function () {
            $('.js-example-basic-multiple').select2();
        });

        $(document).ready(function () {
            $('.js-example-basic-multiple').select2();
        });

        $(document).ready(function () {
            $('#stateDropdown').prop('required', true);
            $('#cityDropdown').prop('required', true);
            // Get the initial city optionsCity *
            var initialCityOptions = $("#cityDropdown").html();

            // On state dropdown change
            $("#stateDropdown").on("change", function () {
                var stateName = $(this).val();
                var cityDropdown = $("#cityDropdown");

                // Clear the city dropdown
                cityDropdown.empty();

                // Add the initial city options
                cityDropdown.append(initialCityOptions);

                if (stateName) {
                    // Filter cities based on the selected state
                    var filteredCities = @json($states->pluck('cities', 'name'));

                    // Get the cities for the selected state
                    var cities = filteredCities[stateName];

                    // Add the city options for the selected state
                    if (cities && cities.length > 0) {
                        cities.forEach(function (city) {
                            cityDropdown.append("<option value='" + city.name + "'>" + city.name + "</option>");
                        });
                    }
                }
            });
        });

        function previewImage(event) {
            var input = event.target;
            var reader = new FileReader();

            reader.onload = function () {
                var imagePreview = document.getElementById('image-preview');
                imagePreview.src = reader.result;
            };

            reader.readAsDataURL(input.files[0]);
        }
    </script>
@endsection