@extends('front.auth.auth-app')
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<section class="loginPage">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="loginBox">
                    <h2>Estimation Form</h2>
                    <form class="loginForm" action="{{route('estimation.form')}}" method="post"
                          enctype="multipart/form-data">
                        @csrf
                        <div id="otherContent">
                            <label>Selected Service*</label>
                            <input type="hidden" name="service_id[]" value="{{ $selectedService->id }}">
                            <input type="text" class="form-control" value="{{ $selectedService->title }}" readonly>
                            @error('service_id')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

{{--                        <label>Select an Option:(optional)</label><br>--}}
{{--                        <input type="radio" name="option" value="additional" id="additionalRadio"> Additional Services<br>--}}
{{--                        <input type="radio" name="option" value="other" id="otherRadio"> Other<br>--}}

{{--                        <div id="additionalServices">--}}
                        <br>
                        <div>
                            <label>Select Additional Services*</label>
                            <select class="js-example-basic-multiple" name="service_id[]" multiple="multiple">
                                @foreach($otherServices as $service)
                                    <option value="{{ $service->id }}">{{ $service->title }}</option>
                                @endforeach
                            </select>
                        </div>
<br>
{{--                        <div id="otherTextArea">--}}
                        <div>
                            <label>Other Service *</label>
                            <div id="others-container">
                                <div class="other-option">
                                    <div class="input-group">
                                        <input type="text" class="form-control" name="others[]" />
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-success add-option">+</button>
                                            <button type="button" class="btn btn-danger remove-option">-</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
{{--                        <button type="button" class="btn btn-success add-option">Add Another</button>--}}
                        <div class="row">
                            <div class="col-md-6">
                                <div>
                                    <label>First Name*</label>
                                    <input type="text" name="first_name" class="form-control">
                                    @error('first_name')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div>
                                    <label>Last Name*</label>
                                    <input type="text" name="last_name" class="form-control">
                                    @error('last_name')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div>
                            <label>Email*</label>
                            <input type="email" name="email" class="form-control">
                            @error('email')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div>
                            <label>Phone Number*</label>
                            <input type="number" name="phone_number" class="form-control">
                            @error('phone_number')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div>
                            <label>Address*</label>
                            <input type="text" name="address" class="form-control">
                            @error('address')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <div>
                            <label for="estimation_timing">How soon would you like to get the estimation?</label>
                            <select id="estimation_timing" name="estimation_time" class="form-control">
                                <option value="immediate">Immediate</option>
                                <option value="1_week">After 1 week</option>
                                <option value="2_weeks">After 2 weeks</option>
                            </select>
                            @error('estimation_timing')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <br>
{{--                        <div>--}}
{{--                            <label for="yes_option">Interested in Financing?</label>--}}

{{--                            <input type="radio" id="yes_option" name="financing_option" value="yes">--}}
{{--                            <label for="yes_option">Yes</label>--}}

{{--                            <input type="radio" id="no_option" name="financing_option" value="no">--}}
{{--                            <label for="no_option">No</label>--}}
{{--                        </div>--}}

                        <div>
                            <input type="file" name="images[]" multiple>
                            @error('images')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="text-center mb-5">
                            <button class="loginBtn">Submit</button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>

</section>
<script>
    $(document).ready(function () {
        // Add new "Others" option
        $(".add-option").click(function () {
            var newOption = $("#others-container .other-option:first").clone();
            newOption.find("input").val(""); // Clear the input field
            newOption.find(".input-group-append button.btn-success").remove(); // Remove the "+" button
            $("#others-container").append(newOption);
        });

        // Remove "Others" option
        $("#others-container").on("click", ".remove-option", function () {
            $(this).closest(".other-option").remove();
        });
    });
</script>