@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"> Service Request Edit  </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.updateRequest', $service->id)}}" 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" placeholder="Enter your service name" value="{{$service->service_title}}">
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="select_service">
                                    Select Category
                                    <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <select name="service_category" id="select_service" class="form-control">
                                        <option value=""></option>
                                        @foreach ($service_categories as $item)
                                            <option value="{{$item->id}}" {{ $service->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="{{ date('d-m-y', strtotime($service->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="{{ $service->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="{{$service->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">
                                        @foreach ($cities as $city)
                                            <option value="{{$city->id}}" {{$service->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="{{$service->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">{{$service->service_description}}</textarea>
                                <div id="charCount" class="text-muted text-right">(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">{{$service->special_note}}</textarea>
                            </div>
                            <div class="col-12">
                                <div class="transaction_btn text-center mt-4">
                                    {{-- <button type="submit" class="btn btn-primary border-0"> Update Request </button> --}}
                                    <button class="btn btn-primary border-0 text-decoration-none"> Update Request </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",
                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 maxChars = 500;

            // Initialize count on page load
            const initialLength = description.val().length;
            charCount.text(`(${initialLength} / ${maxChars} characters)`);

            description.on('input', function () {
                let currentText = $(this).val();

                // Restrict text to maxChars
                if (currentText.length > maxChars) {
                    $(this).val(currentText.substring(0, maxChars));
                    currentText = $(this).val(); // Update after truncation
                }

                const currentLength = currentText.length;
                charCount.text(`(${currentLength} / ${maxChars} characters)`);

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




    </script>
@endpush