@extends('user.layouts.main')

@push('style')
<!-- Flatpickr CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

@endpush

@section('contents')
    <div class="dashboard_wrapper border_start p-3">
        <div class="card border-0">
            <div class="card-header bg-white">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="card-title my-2"> New Service Request</h5>
                    <a href="{{route('user.service')}}" class="btn btn-sm btn-primary border-0"> Back </a>
                </div>
            </div>
            <div class="card-body">
                <div class="user_wrapper">
                    <form action="{{route('user.store.new_request')}}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="title">
                                    Service Title
                                    <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="service_title" id="name" value="{{ old('service_title') }}" placeholder="Enter your service title">
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="select_service">
                                    Service Category
                                    <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <select name="service_category" id="select_service" class="form-control">
                                        <option value="" selected></option>
                                        @foreach ($service_categories as $item)
                                            <option value="{{$item->id}}" {{ old('service_category') == $item->id ? 'selected' : '' }}> {{$item->name}} </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">
                                    Select Date
                                    <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="request_date" id="datepick" value="{{ old('request_date') }}" placeholder="dd-mm-yy">
                                    <span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Schedule your product service on a preferred date">
                                       <i class="fa-solid fa-circle-question"></i>
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="select-service-time">
                                    Select Time
                                    <span class="text-danger">*</span>
                                </label>
                                <div class="input-group d-flex justify-content-around">
                                    <input type="text" id="servicetime" name="request_time" value="{{ old('request_time') }}" class="form-control">
                                    <span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Select your service on a preferred time">
                                       <i class="fa-solid fa-circle-question"></i>
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="rate">
                                    Service Rate (KSh)
                                    <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <input type="number" class="form-control" name="service_rate" id="rate" value="{{ old('service_rate') }}" step="0.1" placeholder="Enter your approximate rate for the service">
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="select_city">
                                    Select City
                                    <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <select name="city_id" id="select_city" class="form-control">
                                        <option value="" selected></option>
                                        @foreach ($cities as $city)
                                            <option value="{{$city->id}}" {{ old('city_id') == $city->id ? 'selected' : '' }}> {{$city->name}} </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="location"> Your Location </label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="location" id="location" value="{{ old('location') }}" placeholder="Enter your local aria location">
                                </div>
                            </div>
                            <div class="col-12 mb-3">
                                <label class="form-label" for="description">
                                    Describe the service
                                    <span class="text-danger">*</span>
                                </label>
                                <textarea type="text" class="form-control" name="service_description" id="description" placeholder="Enter any relevant details here (e.g., service comments, preferences)." rows="4">{{ old('service_description') }}</textarea>
                                <div id="charCount" class="text-muted text-end">(0 / 500 characters)</div>
                            </div>
                            <div class="col-12 mb-3">
                                <label class="form-label" for="note"> Special Note </label>
                                <textarea type="text" class="form-control" name="special_note" id="note" placeholder="Enter your special note" rows="2">{{ old('special_note') }}</textarea>
                            </div>

                            <div class="col-12">
                                <div class="transaction_btn text-center">
                                    {{-- <button type="submit" class="btn btn-primary border-0"> Request Now </button> --}}
                                    <button class="btn btn-primary border-0 text-decoration-none"> Request Now </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
    <!-- Flatpickr JS -->
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    {{-- <script src="https://maps.googleapis.com/maps/api/js?key={{ $setting->google_map_key }}&callback=initAutocomplete&libraries=places&language=en" defer></script> --}}
    <script>
        // window.initAutocomplete = initAutocomplete;

        // function initAutocomplete(callback) {
        //     address1Field = document.querySelector("#location");

        //     autocomplete = new google.maps.places.Autocomplete(address1Field, {
        //         componentRestrictions: {
        //             country: 'KE'
        //         },
        //         // componentRestrictions: { country: ["bd", "ca"] },
        //         // fields: ["formatted_address"],
        //         types: ["establishment"],
        //     });
        // }

        document.addEventListener("DOMContentLoaded", function () {
            flatpickr("#datepick", {
                dateFormat: "d-m-Y",
                minDate: "today",
                enableTime: false,
            });
        });

        flatpickr("#servicetime", {
            enableTime: true,
            noCalendar: true,
            dateFormat: "h:i K", // 12-hour format with AM/PM
            time_24hr: false     // Set true if you prefer 24-hour format
        });

        $(document).ready(function() {
            const $description = $('#description');
            const $charCount = $('#charCount');
            const maxLength = 500;

            $description.on('input', function() {
                let currentLength = $description.val().length;

                // Trim excess characters
                if (currentLength > maxLength) {
                    $description.val($description.val().substring(0, maxLength));
                    currentLength = maxLength;
                }

                // Update the character count display
                $charCount.text(`(${currentLength} / ${maxLength} characters)`);

                // Change color if reaching the limit
                if (currentLength >= maxLength) {
                    $charCount.removeClass('text-muted').addClass('text-danger');
                } else {
                    $charCount.removeClass('text-danger').addClass('text-muted');
                }
            });
        });




    </script>
@endpush