@extends('layouts.front-app')
@section('title')
    User Form
@endsection
@section('content')
    <style>
        input[name="inspection_fee"]::before {
            content: "$";
        }
    </style>
    {{--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">--}}
    <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="user">
                        <input type="hidden" name="status" value="1">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-md-12">
                                    <h2 class="sectionHeading">User Sign-Up<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)">
                                    @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"
                                               value="{{ old('first_name') }}" required>
                                        @error('first_name')
                                        <span class="text-danger">{{ $message }}</span>
                                        @enderror

                                    </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"
                                               required>
                                        @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="">City <span>*</span></label>
                                        <select class="form-control" name="city" id="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="state" id="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="">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" id="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>
                                        @error('password_confirmation')
                                        <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <!--SELLER SECTION START-->
                                <div class="col-md-12 mt-5">
                                    <h2 class="sectionHeading">Seller Information<em>*</em></h2>
                                </div>
                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="">Select the category you need inspection for <span>*</span></label>
                                        <select name="categories" id="productCategory" class="form-control">
                                            <option selected value="cars">Car</option>
                                            <option value="phones">Phones</option>
                                            <option value="watches">Watches</option>
                                            <option value="laptops">Laptop</option>
                                            <option value="vapes">Vapes</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="">Upload Product Pictures <span>*</span></label>
                                        <div class="imgHolder imagePreview">
                                            <input type="file" accept="image/*" name="product_image[]" id="file"
                                                   multiple
                                                   class="postFileUploader">
                                            <span>Upload Product Pictures</span>
                                            <i class="fas fa-image"></i>
                                        </div>
                                        <div id="up_images">
                                            <div class="cst_imgs">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="">Select Product Price Range <span>*</span></label>
                                        <select name="prices" id="product-price" class="form-control">
                                            <option selected disabled value="">Select Price Range</option>
                                            <option value="1 - 100" data-inspection-fee="24.99">$1 - $100</option>
                                            <option value="100 - 1000" data-inspection-fee="49.99">$100 - $1000</option>
                                            <option value="1000 - 5000" data-inspection-fee="69.99">$1000 - $5000</option>
                                            <option value="5000 10000" data-inspection-fee="99.99">$5000 - $10,000</option>
                                            <option value="10000 - up" data-inspection-fee="129.99">$10,000 - Up</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="">Any URL <span>*</span></label>
                                        <input class="form-control" type="url" placeholder="www.dummy url.com"
                                               name="shop_url">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="">Name<span>*</span></label>
                                        <input class="form-control" type="text" placeholder="Jhon smith"
                                               name="shop_name" required>
                                        @error('shop_name')
                                        <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="">Email <span>*</span></label>
                                        <input class="form-control" type="email" placeholder="info@yourmail.com"
                                               name="shop_email" required>
                                        @error('shop_email')
                                        <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="">Phone Number <span>*</span></label>
                                        <input class="form-control" type="tel" placeholder="+1(123) 456 7890"
                                               name="shop_phone" required>
                                        @error('shop_phone')
                                        <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="">Inspection Address <span>*</span></label>
                                        <input class="form-control" type="text"
                                               placeholder="123 Dummy Street 45 Building United State"
                                               name="shop_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="shop_zip"
                                               required>
                                        @error('shop_zip')
                                        <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="">Select Agent from Drop down <span>*</span></label>
                                        <select class="form-control" name="shop_agent" id="agentDropdown">
                                            <option value="">Select Agent</option>
                                        </select>
                                    </div>
                                </div>
                                <!-- Modal -->
                                <div class="modal fade" id="agentModal" tabindex="-1" role="dialog"
                                     aria-labelledby="agentModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="agentModalLabel">Agent
                                                    Information</h5>
                                                <h6 class="ml-3 m-0 text-success">Agent Activated</h6>
                                                <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close" onclick="closeModal()">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <!-- Place your agent information here -->
                                                <div class="container-fluid">
                                                    <div class="row">
                                                        <div class="col-md-8">
                                                            <p><strong>Agent Name:</strong> <span
                                                                    id="modal_name"></span></p>
                                                            <p><strong>Agent Specialized In Categories:</strong>
                                                                <span id="modal_category"></span></p>
                                                            <p><strong>Agent City:</strong> <span
                                                                    id="modal_city"></span></p>
                                                        </div>
                                                        <div class="col-md-4 text-right">
                                                            <p><strong>Agent Image:</strong></p>
                                                            <div id="modal_image"></div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <p><strong>Reviews</strong></p>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-12" id="modal_reviews">
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- Add more agent details as needed -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="">Inspection Fee <span>*</span></label>
                                        <input class="form-control" type="text" placeholder="$100.12"
                                               name="inspection_fee" id="inspection-fee" readonly>
                                    </div>
                                </div>
                                <!--SELLER SECTION 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')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"
            integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
            crossorigin="anonymous"></script>
    <script>
        $(document).ready(function () {
            $('#city').prop('required', true);
            $('#state').prop('required', true);
            $('#productCategory').prop('required', true);
            $('#product-price').prop('required', true);
            $('#stateDropdown').prop('required', true);
            $('#cityDropdown').prop('required', true);
            $('#agentDropdown').prop('required', true);


            $('#product-price').on('change', function () {
                var inspectionFee = $(this).find('option:selected').data('inspection-fee');
                $('#inspection-fee').val('$' + inspectionFee.toFixed(2));
            });

            // Get the initial city optionsCity *
            var initialCityOptions = $("#cityDropdown").html();

            $('#agentDropdown').on('change', function () {
                if ($(this).val() == "") {
                    return;
                }

                //modal show
                let agent = $('#agentDropdown option:selected').data('agent')
                // front/user-profile
                $('#modal_name').html(agent.name);
                var imagePath = "{{ asset('front/user-profile/') }}/" + agent.image;
                $('#modal_image').html('<img src="' + imagePath + '">');
                $('#modal_category').html(agent.category);
                $('#modal_city').html(agent.city);
                // $('#modal_phone').html(agent.phone);
                // Populate reviews
                var reviewList = $('#modal_reviews');
                reviewList.empty();

                agent.review.forEach(function (rvw) {
                    let starsHtml = '';
                    for (let i = 0; i < rvw.stars; i++) {
                        starsHtml += '<i class="fas fa-star active"></i>';
                    }

                    let str = '<div class="row">' +
                        '  <div class="col-md-12">' +
                        '    <div class="reviewBox">' +
                        '      <h4>' + rvw.user.name + '</h4>' +
                        '      <p>' + rvw.comment + '</p>' +
                        '      <div class="stars">' + starsHtml + '</div>' +
                        '    </div>' +
                        '  </div>' +
                        '</div>';

                    reviewList.append(str);
                });


                $('#agentModal').modal('show');
            });

            // On state dropdown change
            $("#stateDropdown").on("change", function () {
                var stateName = $(this).val();
                var cityName = $("#cityDropdown").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>");
                        });
                    }
                }

                if (stateName && cityName) {
                    fetchAgents(stateName, cityName);
                }
            });

            $("#cityDropdown").on("change", function () {
                var stateName = $("#stateDropdown").val();
                var cityName = $(this).val();

                if (stateName && cityName) {
                    fetchAgents(stateName, cityName);
                }
            });

            function fetchAgents(stateName, cityName) {
                $.ajax({
                    url: "{{ route('get.agent') }}", // Replace with your route to fetch agents
                    method: "GET",
                    data: {stateName: stateName, cityName: cityName}, // Pass the selected state and city names to the server
                    success: function (response) {
                        // Populate the agent dropdown with fetched data
                        $('#agentDropdown').empty(); // Clear the agent dropdown
                        $('#agentDropdown').append("<option value=''>Select Agent</option>"); // Add an initial option

                        if (response && response.length > 0) {
                            response.forEach(function (agent) {
                                $('#agentDropdown').append("<option value='" + agent.id + "' data-agent='" + JSON.stringify(agent) + "'>" + agent.name + "</option>");
                            });
                        }
                    },
                    error: function (xhr, status, error) {
                        // Handle error if any
                        console.log(error);
                    }
                });
            }
        });

        function closeModal() {
            $('#agentModal').modal('hide');
        }

        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