@extends('layouts.user-app')
@section('content')
    <style>
        div#additionalServices {
            display: none;
            margin-bottom: 1rem;
            align-items: center;
        }

        #additionalRadio:checked ~ div#additionalServices {
            display: flex
        }

        span.select2.select2-container.select2-container--default {
            width: 100% !important;
            display: inline-block;
            background: #e7e7e7;
            margin-left: auto;
        }

        span.select2-selection.select2-selection--multiple {
            background: #e9ecef;
        }

        div#additionalServices label {
            margin: 0;
        }
    </style>
    <div class="col-md-9 layout">
        <div class="recentTable tablecard">
            <h2>New Estimation Request Form</h2>
            <form class="loginForm" action="{{route('user.new-estimation.form')}}" method="post"
                  enctype="multipart/form-data">
                @csrf
                <input type="hidden" value="{{$user->id}}" name="user_id">
                <div class="row">
                    <div class="col-md-6">
                        <div>
                            <label>Name*</label>
                            <input type="text" name="name" class="form-control" value="{{$user->name ?? ''}}" readonly>
                            @error('name')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>
                <div>
                    <label>Email*</label>
                    <input type="email" name="email" class="form-control" value="{{$user->email ?? ''}}" readonly>
                    @error('email')
                    <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div>
                    <label>Phone Number*</label>
                    <input type="number" name="phone_number" class="form-control" value="{{$user->phone ?? ''}}"
                           readonly>
                    @error('phone_number')
                    <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div>
                    <label>Address*</label>
                    <input type="text" name="address" class="form-control" value="{{$user->address ?? ''}}" readonly>
                    @error('address')
                    <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div>
                    @if(isset($selectedService))
                        <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>
                        <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>--}}
{{--                            <label>Others*</label>--}}
{{--                            <textarea class="form-control" name="others"></textarea>--}}
{{--                        </div>--}}

                    @else
                        <div>
                            <label>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>
                            @error('service_id')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
{{--                        <div>--}}
{{--                            <label>Others*</label>--}}
{{--                            <textarea class="form-control" name="others"></textarea>--}}
{{--                        </div>--}}
                    @endif
                </div>
                <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>
                <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>
    <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>

{{--    <script>--}}
{{--        @if(!isset($selectedService))--}}
{{--        $('form').on('submit', function (e) {--}}
{{--            if ($('input[name="mustSelect"]:checked').length === 0) {--}}
{{--                e.preventDefault();--}}
{{--                $('#mustSelectError').removeClass('hidden');--}}
{{--            }--}}
{{--        });--}}
{{--        @endif--}}
{{--    </script>--}}
@endsection