@extends("website.service-providers.layouts.layout")
@section('title',"Services")
@section("body")

<link rel="stylesheet" href="{{ asset('css/sp.css') }}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"/>
<!-- banner background image starts -->
<section class="banner-services">
    <img class="banner-background-ellipse" src="./assets/images/banner-bg-img.png" alt="">
</section>

<!--- services section -->
<section class="services-breadcrumb-section dashboard-breadcrumb">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Current Project</li>
            </ol>
        </nav>

    </div>
</section>

<section class="dashboard-main">
    <div class="container">
        <div class="row sidebar_row">
            @include("website.service-providers.includes.sidebar")
            @include("website.layouts.modal")
            <div class="main-content client">
                <div class="main-content-wrapper provider lg-width arnette-pro">
                <ul class="nav-buttons d-flex">
                        <div class="ul-action-btn d-flex flex-wrap">
                            <li>
                                <a id="projectsDetailsButton" type="button" class="btn btn-primary current"
                                    href="#">Projects Details</a>
                            </li>
                            <li>
                                <a id="chatButton" type="button" class="btn btn-secondary past"
                                    href="#">Chat</a>
                            </li>
                        </div>
                    </ul>
                    <div id="projectsDetailsBlock" class="project-block">
                        <div class="project-block-item">
                            <div class="project-linking">
                                <div class="project-header-items  d-flex flex-wrap justify-content-between">
                                    <h3 class="heading font-size-18"></h3>
                                    <h3 class="heading font-size-16">#</h3>
                                    <span id="task_id" style="display: none;"></span>
                                </div>
                                <h3 class="heading-text blue-color"> {{$sub_category_name}}</h3>
                                <div class="project-user-profile-item d-flex">
                                    <img class="customImg" src="{{ $client_profile }}" alt="user">
                                    <div class="project-user-inner-item d-flex flex-column">
                                    
                                        <h3 class="font-size-14"> </h3>


                                        <div class="user-scheduled-time d-flex gap-2 align-items-center ">
                                            <span class="d-flex">
                                                <img src="{{asset('webAssets/assets/images/clock-noun.svg')}}"
                                                    alt="clock">
                                                    <p id="date-time-show" class="para ">
                                                    </p>
                                            </span>
                                            @php
                                                use Carbon\Carbon;
                                                $formattedDate = Carbon::parse($data['success']['data']['date_time']['schedule_date'])->format('D-M-d-Y');
                                            @endphp

                                        <span class="d-flex align-items-center gap-2 ">
                                            <img src="{{ asset('webAssets/assets/images/calender.svg') }}" alt="calendar">
                                            <p>{{$formattedDate}}</p>
                                        </span>


                                        </div>

                                        <div class="costing blue-color fw-bold">$</div>
                                        @if($new_client)
                                            <div class="new-client d-flex font-size-14">
                                                <p class="font-size-12">New Client</p>
                                            </div>
                                        @endif
                                    </div>
                                </div>


                                <div class="address-block d-flex flex-column">
                                    <h3 class="font-size-14">Address</h3>
                                    
                                    <!-- The div for the Google Map -->
                                    <div id="map" style="width: 100%; height: 300px;"></div>

                                    <span class="loc d-flex align-items-center">
                                        <img src="{{ asset('webAssets/assets/images/location-icon.svg') }}" alt="location">
                                        <!-- Display city, state, and country -->
                                        <p class="paragraph">
                                                                                                                                                                            </p>
                                    </span>
                                </div>

                                <div class="project-details d-flex flex-column">
                                    <h3 class="font-size-14">Project Details</h3>
                                    <p class="font-size-12"></p>
                                </div>

                                <div class="project-images provider-project-imgs d-flex flex-column ">
                                    <div class="project-images-text-col">
                                        <h3 class="font-size-14">Project Images</h3>
                                    </div>
                                    <div class="project-images-img-col d-flex newproject-images-img-col">
                                                                            </div>

                                </div>
                                <div class="project-price-details d-flex justify-content-between">
                                     <h4 class="font-size-16"># Service</h4>
                                    <h4 class="font-size-16">Cost</h4>
                                </div>
                                <div class="project-price-details d-flex justify-content-between">
                                    <p class="paragraph">1.Hourly Rate</p>
                                    <p class="cost">$/hr</p>
                                </div>
                                <div class="project-action-btn d-flex justify-content-between block-accept-reject gap-2">
                                    <button type="button" class="btn btn-decline w-100" data-bs-toggle="modal" data-bs-target="#providerCancelProject">Cancel Project</button>
                                    <button type="button" class="btn btn-primary w-100" data-bs-toggle="modal" data-bs-target="#acceptJob">Accept Job</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Chat Block (Added from client template) -->
                    <div id="chatBlock" class="arnette-chat-block" style="display: none;">
                        <div class="chat-content" id="chatContent">
                           
                            <div class="chat-header">
                                <button class="back-button" onclick="closeChat()">Back</button>
                                <img src="{{ $client_profile }}"
                                    alt="profile">
                
                                <div class="info">
                                    <span class="user" id="chatHeaderUser">{{ $first_name }}</span>
                                </div>
                            </div>
                            
                            <!-- New section for displaying job details -->
                            <div class="chat-job-details">
                                <p id="jobDetails">
                                    <!-- Job details will be dynamically inserted here -->
                                </p>
                            </div>
                            
                            <div class="message-wrap">
                                <!-- Messages will be loaded here dynamically -->
                            </div>
                            
                            <div class="message-footer">
                                <div class="custom-file-input upload">
                                    <label for="fileInput" class="custom-file-label">
                                        <img class="attachment-icon"
                                            src="{{ url('webAssets/assets/images/attachment.png') }}" />
                                    </label>
                                    <input type="file" id="fileInput" accept="image/*">
                                    <div class="image-wrapper-message">
                                        <div class="img-container"></div>
                                        <textarea id="textInput"
                                            placeholder="Enter text and image will be displayed here..."></textarea>
                                        <div id="imageDisplay" class="image-display"></div>
                                    </div>
                                    <button class="btn btn-primary" id="submitButton" type="button">
                                        <img class="send-icon"
                                            src="{{ url('webAssets/assets/images/send-icon2.svg') }}" />
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="modal fade cancel-project" id="providerCancelProject" tabindex="-1" aria-labelledby="providerCancelProjectLabel" aria-hidden="true">
    <div class="cancel-project modal-dialog">
        <div class="cancel-project-modal-content">
            <div class="cancel-project-modal-header justify-content-end">

                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="cancel-project-modal-body">

                <div class="cancel-project-top-item">
                    <h3 class="font-size-20">What Happened?</h3>
                    <p class="para font-size-18">Please let us know why you are rebooking <br> below</p>
                </div>
                <div class="custom-checkbox">
                    <form>
                        @foreach($cancelReasons as $value)
                            <div class="form-group">
                                <input type="radio" id="{{ $value['id'] }}" name="cancel_reason_id" value="{{ $value['id'] }}">
                                <label for="{{ $value['id'] }}">{{ $value['reason'] }}</label>
                            </div>
                        @endforeach
                    </form>
                </div>
            </div>
            <div class="cancel-project-modal-footer">

                <button type="button" class="btn btn-primary" onclick="checkCancelReason()">Submit</button>
            </div>
        </div>
    </div>
</div>

<!-- Cancel Delete Account Modal -->
<div class="modal fade cancel-alert" id="cancelAlert" tabindex="-1" aria-labelledby="cancelAlertLabel"
        aria-hidden="true">
        <div class="modal-dialog delete-account">
            <div class="delete-account-modal-content">
                <div class="delete-account-modal-header">
                    <div class="alert-icon">
                        <img src="./assets/images/alert-icon.svg" alt="alert">
                    </div>

                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="delete-account-modal-body">
                    <div class="alert-box d-flex align-items-center flex-column">
                        <h3 class="heading text-center">Are you sure you want to cancel this project?</h3>
                        <p class="para font-size-18 text-center">Lorem Ipsum has been the industry's standard dummy text
                            ever
                        </p>
                    </div>
                </div>
                <div class="delete-action-btn d-flex align-items-center">
                    <a href="#"  onClick="handleCancelJob()" type="button" class="btn btn-decline w-100">Yes</a>
                    <a class="btn btn-primary w-100" data-bs-toggle="modal" data-bs-target="#providerCancelProject">No</a>
                </div>

            </div>
        </div>
    </div>
<!-- Accept Job Modal -->
<div class="modal accept-job fade " id="acceptJob" tabindex="-1" aria-labelledby="acceptJobLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="accept-job-modal-content">
            <div class="accept-job-modal-header justify-content-end">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="accept-job-modal-body">

                <div class="heading d-flex flex-column align-items-center">
                    <img src="./assets/images/tick-mark_blue.svg" alt="">
                    <h3 class="font-size-20 text-center">Are you want to do this project in hourly rate or fixed
                    </h3>
                </div>

                <div class="accept-job-form d-flex flex-column">
                    <form>
                        @csrf
                        <div class="service-provider-select accept-job-select" style="margin-bottom: 24px;">
                            <div class="select">
                                <h6 class="font-size-14">Price Type</h6>
                                <select class="form-select form-select-lg mb-3" aria-label="Large select example" required name="price_type" id="price_type" onchange="handlePriceTypeChange(event)">
                                    <option @if($pricing_type == 'fixed') selected @endif value="fixed">Fixed Price </option>
                                    <option @if($pricing_type == 'hourly') selected @endif value="hourly">Hourly Price </option>
                                </select>
                            </div>
                        </div>

                        <div class="provider-wages-form d-flex flex-column">
                            <div class="input-fields d-flex flex-column" id="block-fixed-rate" @if($pricing_type == 'hourly') style="display:none !important;" @endif>
                                <h6 class="font-size-14">Fixed Rate *</h6>
                                <input type="text" class="w-100" placeholder="Fixed Rate" name="fixed_rate" value="" id="fixed_rate">
                            </div>
                            <div class="input-fields d-flex flex-column" id="block-hourly-rate" @if($pricing_type == 'fixed') style="display:none !important;" @endif>
                                <h6 class="font-size-14">Hourly Rate *</h6>
                                <input type="text" class="w-100" placeholder="Hourly Rate" name="hourly_rate" value="" id="hourly_rate" readonly>
                            </div>

                            <div class="input-fields d-flex flex-column" id="total_hours_div" @if($pricing_type == 'fixed') style="display:none !important;" @endif>
                                <h6 class="font-size-14">Minimum Hours</h6>
                                <input type="text" class="w-100" placeholder="Hours" name="total_hours" value="1" id="total_hours" readonly>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="accept-job-modal-footer d-flex">
                <button type="button" class="btn btn-primary w-100" onClick="handleRescheduleJob()">Save and next</button>
            </div>
        </div>
    </div>
</div>


<!-- Inside your modal -->
<div class="modal fade time_select_modal" id="editSchedule" tabindex="-1" aria-labelledby="editScheduleLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" onclick="" data-bs-toggle="modal" data-bs-target="#acceptJob" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="body-heading">
                    <h6>{{$data['success']['data']['sub_category_name'] ?? ''}} With {{$first_name . ' ' . $last_name_initial}}</h6>
                </div>
                <hr>
                <div class="schedule-body-items mt-3">
                 
                    <form action="">
                        <div class="d-flex mt-3 flex-column gap-2 datetime_selection">
                            <div class="datetime_inner_select date_inner_Select">
                                <label for="scheduleDate" class="datetime_label font-size-14">Reschedule Date</label>
                                <!-- <input value="{{$date_time['schedule_date']}}" type="date" class="form-control" id="scheduleDate"> -->
                                <input id="scheduleDate" type="text" value="{{$date_time['schedule_date']}}" placeholder="Select Date"  class="form-control"/>
                                </div>

                                <div class="row">
                                <div class="col-md-6 time_inner_select">
                                <label for="startTime" class="datetime_label font-size-14">Start Time</label>
                                <input type="time" value="{{ $slot_time }}" name="slot_time" class="form-control" id="scheduleStartTime" data-utc="{{ $slot_time }}">
                                <!-- <input id="selectStartTime" value="{{ $slot_time }}" type="time" placeholder="Select Start time" class="form-control"/> -->
                                </div>
                                <div class="col-md-6 time_inner_select">
                                <label for="EndTime" class="datetime_label font-size-14">End Time</label>
                                <input type="time" value="{{ $slot_time_end }}" name="slot_time_end" class="form-control" id="scheduleEndTime" data-utc="{{ $slot_time_end }}">
                            <!-- <input id="selectEndTime" value="{{ $slot_time_end }}" type="time" placeholder="Select End time" class="form-control"/> -->
                            </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="modal-footer mt-4 justify-content-center">
                <button type="button" class="btn btn-primary w-100" onclick="handleAcceptJob()">Next</button>
            </div>
        </div>
    </div>
</div>

<!-- Successfull completion -->
<div class="modal success-job fade " id="successJob" tabindex="-1" aria-labelledby="successJobLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="success-job-modal-content">
            <div class="success-job-modal-header justify-content-end">
                <button type="button" class="btn-close"  onclick="window.location.href='{{ route('sp.myProjects') }}';"></button>
            </div>
            <div class="success-job-modal-body">

                <div class="heading d-flex flex-column align-items-center">
                    <img src="./assets/images/tick-mark_blue.svg" alt="">
                    <h3 class="font-size-20 text-center">Congratulations! you have new <br> project
                    </h3>
                    <p class="font-size-16 text-center">Congratulations! you Got a new project. <br> Keep Earning</p>
                </div>
            </div>
            <div class="success-job-modal-footer d-flex">
                <button type="button" class="btn btn-primary w-100"  onclick="window.location.href='{{ route('sp.myProjects') }}';">My Projects</button>
            </div>

        </div>

    </div>
</div>

<!-- Load Google Maps API -->
<script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAP_KEY') }}&callback=initMap&v=weekly" async defer></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.5/socket.io.js"
    integrity="sha512-luMnTJZ7oEchNDZAtQhgjomP1eZefnl82ruTH/3Oj/Yu5qYtwL7+dVRccACS/Snp1lFXq188XFipHKYE75IaQQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    let localStartTime = "";
    let localEndTime = "";
    
    document.addEventListener('DOMContentLoaded', function() {
        function convertUTCToLocal(utcTime) {
            return moment.utc(utcTime, "HH:mm").local().format('LT'); // Converts to local time in LT format (h:mm A)
        }

        let utcStartTime = $('#scheduleStartTime').data('utc'); // Get UTC Start Time
        let utcEndTime = $('#scheduleEndTime').data('utc'); // Get UTC End Time

        if (utcStartTime) {
            localStartTime = convertUTCToLocal(utcStartTime);
            $('#scheduleStartTime').val(localStartTime);
            $('#selectStartTime').val(localStartTime);
        }

        if (utcEndTime) {
            localEndTime = convertUTCToLocal(utcEndTime);
            $('#scheduleEndTime').val(localEndTime);
            $('#selectEndTime').val(localEndTime);
        }

        var slotTime = "{{ $data['success']['data']['date_time']['schedule_time'] }}";
        var timeParts = slotTime.split(':');
        var hours = parseInt(timeParts[0], 10);
        var minutes = timeParts[1];
        var period = hours >= 12 ? 'PM' : 'AM';

        if (hours === 0) {
            hours = 12;
        } else if (hours > 12) {
            hours -= 12;
        }

        var formattedTime = (hours < 10 ? '0' + hours : hours) + ':' + minutes + ' ' + period;
        var dateTimeElement = document.getElementById('date-time-show');
        if (dateTimeElement) {
            dateTimeElement.innerText = localStartTime;
        } else {
            console.error('Element #date-time-show not found');
        }

        flatpickr("#scheduleDate", {
            minDate: "today",
            dateFormat: "Y-m-d",
            disable: [
                function (date) {
                    return !(date.getDate() % 8);
                }
            ]
        });

        flatpickr("#scheduleStartTime", {
            enableTime: true,
            noCalendar: true,
            dateFormat: "h:i K",
            defaultDate: localStartTime || new Date(),
        });

        flatpickr("#scheduleEndTime", {
            enableTime: true,
            noCalendar: true,
            dateFormat: "h:i K",
            minuteIncrement: 1,
            secondIncrement: 1, 
            defaultDate: localEndTime || new Date(),
        });
        
        // Setup chat functionality
        const socketUrl = @json(env('SOCKET_URL'));
        const socket = io(socketUrl, {
            reconnection: false
        });
        
        let socketId;
        let senderId = {{ $sp_id ?? 0 }}; // Service Provider ID as sender
        let receiverId = {{ $client_id ?? 0 }}; // Client ID as receiver
        let senderType = "provider"; // Sender type
        let receiverType = "client"; // Receiver type
        let roomId;
        let roomname;
        let jobId = {{ $task_id ?? 0 }};
        
        // Keep track of displayed messages to prevent duplicates
        let displayedMessageIds = new Set();
        
        // Extract job details
        const clientName = "{{ $client_name ?? '' }}";
        const clientFirstName = "{{ $client_first_name ?? '' }}";
        const providerName = "{{ $first_name ?? '' }}";
        const category = "{{ $category_name ?? '' }}";
        const subCategory = "{{ $sub_category_name ?? '' }}";
        const scheduledDate = "{{ $date_time['schedule_date'] ?? '' }}";
        const scheduledTime = "{{ $date_time['schedule_time'] ?? '' }}";
        const fullScheduledTime = `${scheduledTime} on ${scheduledDate}`;
        
        // Socket connection events
        socket.on('connect', function() {
            console.log('Socket connected');
        });
        
        socket.on("socketConnection", (data) => {
            console.log('Socket connection ID received:', data);
            socketId = data?.socketId;
            
            // Join room for specific task
            const dataForRoom = {
                username: "{{ $first_name ?? '' }} {{ $last_name ?? '' }}",
                user_from: senderId,
                user_to: receiverId,
                user_from_type: senderType,
                user_to_type: receiverType,
                job_id: jobId
            };
            
            console.log('Joining room with data:', dataForRoom);
            socket.emit("join room", dataForRoom);
        });
        
        // Room data received
        socket.on('send data', (data) => {
            console.log('Room data received:', data);
            roomId = data.id;
            roomname = data.roomname;
            
            // After receiving room data, request old chat messages
            socket.emit("old chat", {
                user_from: senderId,
                user_to: receiverId,
                user_from_type: senderType,
                user_to_type: receiverType,
                job_id: jobId
            });
        });
        
        // FIXED: Only one listener for chat messages
        socket.on("chat message", (data) => {
            console.log('Received message:', data);
            displayMessage(data);
        });
        
        // Load old chat messages
        socket.on("old chat response", (data) => {
            console.log('Old chat response:', data);
            if (data.status) {
                dMessage(data, senderId);
            }
        });
        
        // Set up the submit button event
        const submitButton = document.querySelector('#submitButton');
        
        if (submitButton) {
            submitButton.addEventListener('click', sendMessage);
        }
        
        function sendMessage(event) {
            event.preventDefault();
            const messageText = document.getElementById("textInput").value.trim();
            
            if (!messageText) {
                return; // Don't send empty messages
            }
            
            const messageBody = {
                value: messageText,
                user: "{{ $first_name ?? '' }} {{ $last_name ?? '' }}",
                room: roomname,
                user_from: senderId,
                user_to: receiverId,
                socket: roomId,
                user_from_type: senderType,
                user_to_type: receiverType,
                job_id: jobId,
                // Add a client-side message ID to help prevent duplicates
                // client_msg_id: Date.now()
            };
            
            console.log("Sending message with data:", messageBody);
            socket.emit("chat message", messageBody); // Send chat message
            document.getElementById("textInput").value = ""; // Clear input
        }




    function dMessage(data, idd) {
        const messagesContainer = document.querySelector(".message-wrap");
        messagesContainer.innerHTML = ''; // Clear existing messages

        if (!data.status) return;

        for (let i = 0; i < data.data.length; i++) {
            const message = data.data[i];
            const authorClass = (message.user_from == idd && message.user_from_type == 'provider') ? "me" : "you";
            const messageDiv = document.createElement("div");
            messageDiv.className = `message-list ${authorClass}`;

            const messageContent = document.createElement("div");
            messageContent.className = "msg";
            messageContent.innerText = message.message; // Set message text

            const timeP = document.createElement("p");
            timeP.className = "time";
            timeP.innerText = moment().format("hh:mm A"); // Display current time

            messageDiv.appendChild(messageContent);
            messageDiv.appendChild(timeP);
            messagesContainer.appendChild(messageDiv);
            messagesContainer.scrollTop = messagesContainer.scrollHeight; // Scroll to bottom
        }
    }
        
    function displayMessage(data) {
        const messagesContainer = document.querySelector(".message-wrap");
        const authorClass = (data.data.user_from == senderId  && data.data.user_from_type == 'provider')? "me" : "you";
        console.log('displayMessage',authorClass);

        const messageDiv = document.createElement("div");
        messageDiv.className = `message-list ${authorClass}`;

        const messageContent = document.createElement("div");
        messageContent.className = "msg";
        messageContent.innerText = data.data.value; // Set incoming message text

        const timeP = document.createElement("p");
        timeP.className = "time";
        timeP.innerText = moment().format("hh:mm A"); // Display current time

        messageDiv.appendChild(messageContent);
        messageDiv.appendChild(timeP);
        messagesContainer.appendChild(messageDiv);

        messagesContainer.scrollTop = messagesContainer.scrollHeight; // Scroll to bottom
    }
        
        // Set up chat navigation buttons
        const projectsDetailsButton = document.getElementById('projectsDetailsButton');
        const chatButton = document.getElementById('chatButton');
        const projectsDetailsBlock = document.getElementById('projectsDetailsBlock');
        const chatBlock = document.getElementById('chatBlock');
        
        // Make closeChat function available globally
        window.closeChat = function() {
            showProjectsDetails();
        };
        
        // Show projects details and hide chat by default
        function showProjectsDetails() {
            projectsDetailsBlock.style.display = 'block';
            chatBlock.style.display = 'none';
            projectsDetailsButton.classList.add('current');
            projectsDetailsButton.classList.remove('past'); 
            chatButton.classList.remove('current');
            chatButton.classList.add('past');
            
            projectsDetailsButton.classList.add('btn-primary');
            projectsDetailsButton.classList.remove('btn-secondary'); 
            chatButton.classList.remove('btn-primary');
            chatButton.classList.add('btn-secondary');
        }
        
        function showChat() {
            projectsDetailsBlock.style.display = 'none';
            chatBlock.style.display = 'block';
            chatButton.classList.add('current');
            chatButton.classList.remove('past');
            projectsDetailsButton.classList.remove('current');
            projectsDetailsButton.classList.add('past');
            
            chatButton.classList.add('btn-primary');
            chatButton.classList.remove('btn-secondary');
            projectsDetailsButton.classList.remove('btn-primary');
            projectsDetailsButton.classList.add('btn-secondary');
            
            // Update job details text
            const jobDetailsElement = document.getElementById('jobDetails');
            if (jobDetailsElement) {
                jobDetailsElement.innerText = `${clientFirstName} has requested ${providerName} for ${subCategory} at ${fullScheduledTime}`;
            }
        }
        
        // Initialize to show Projects Details
        showProjectsDetails();
        
        // Add event listeners
        if (projectsDetailsButton) {
            projectsDetailsButton.addEventListener('click', (event) => {
                event.preventDefault(); // Prevent default button action
                showProjectsDetails();
            });
        }
        
        if (chatButton) {
            chatButton.addEventListener('click', (event) => {
                event.preventDefault(); // Prevent default button action
                showChat();
            });
        }
        
        // Add job details text
        const jobDetailsElement = document.getElementById('jobDetails');
        if (jobDetailsElement) {
            const providerFirstName = "{{ $first_name ?? '' }}";
            const clientFirstName = "{{ $client_names[0] ?? '' }}";
            jobDetailsElement.innerText = `${clientFirstName} has requested ${providerFirstName} for ${subCategory} at ${fullScheduledTime}`;
        }
    });

    function handleRescheduleJob() {
        if ($('#price_type').val() === 'hourly') {
        } else {
            var rate = $('#fixed_rate').val();
            if (!$('#fixed_rate').val()) {
                toastr.error('Please insert rate amount.');
                return;
            }
        }
        $('#editSchedule').modal('show');
        $("#acceptJob").modal('hide');
    }
    function handleAcceptJob() {
        var price_type = $('#price_type').val();
        var rate = 0;

        if (price_type === 'hourly') {
            rate = $('#hourly_rate').val();
        } else {
            rate = $('#fixed_rate').val();
        }
        
        var csrfToken = $('meta[name="csrf-token"]').attr('content');
        var total_hours = $('#total_hours').val();
        var job_id = $('#task_id').text();
        
        const scheduleDate = $('#scheduleDate').val();
        const scheduleStartTime = $('#scheduleStartTime').val();
        const scheduleEndTime = $('#scheduleEndTime').val();
        if (!scheduleDate || !scheduleStartTime || !scheduleEndTime) {
            toastr.error('Please fill in all fields.');
            return;
        }

        const convertToUTC = (localTime) => {
            const date = new Date(`${scheduleDate} ${localTime}`);
            return date.toISOString();
        }
        const convertTimeToUTC = (localTime) => {
            var timeParts = localTime.split(':'); // Split by ':'
            var hours = parseInt(timeParts[0], 10); // Get hours part
            var minutesAndPeriod = timeParts[1].trim(); // Trim any spaces and get the minutes with AM/PM part
            var minutes = minutesAndPeriod.slice(0, 2); // Extract minutes (first 2 characters)
            var period = minutesAndPeriod.slice(2).trim().toUpperCase(); // Extract the AM/PM and remove extra spaces

            if (period === 'PM' && hours !== 12) {
                hours += 12; // Convert PM hours to 24-hour format (unless it's 12 PM)
            } else if (period === 'AM' && hours === 12) {
                hours = 0; // Convert 12 AM to 00 hours
            }

            // Corrected formatting (removing unnecessary zero-padding for minutes)
            const formattedTime = `${hours.toString().padStart(2, '0')}:${minutes}:00`;

            return formattedTime;
        };

        const scheduleTimeZ = convertTimeToUTC(scheduleStartTime);

        const utcStartTime = convertToUTC(scheduleStartTime);
        const utcEndTime = convertToUTC(scheduleEndTime);
        var data = {
            _token: csrfToken,
            client_task_id: job_id,
            pricing_type: price_type,
            rate: rate,
            hours: total_hours,
            job_status: '1', 
            date: scheduleDate,
            time: scheduleTimeZ,
            slot_time: utcStartTime,
            slot_time_end: utcEndTime,
        };
        $.ajax({
            url: "{{route('sp.acceptJob')}}",
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function(response) {
                if (response.status == 200) {
                    toastr.success(response.message);
                    $("#editSchedule").modal('hide');
                    $("#successJob").modal('show');
                } else if (response.error) {
                    toastr.error(response.error.message);
                } else {
                    toastr.error(response.errors);
                }
            },
            error: function(error) {
                try {
                    var parsedError = JSON.parse(error.responseText);
                    var mainErrorMessage = parsedError.message;
                    var detailedErrorMessages = [];
                    Object.keys(parsedError.errors).forEach(function(field) {
                        var fieldErrors = parsedError.errors[field];
                        var errorMessage = fieldErrors.join(' ');
                        detailedErrorMessages.push(errorMessage);
                    });
                    var detailedErrorMessage = mainErrorMessage + ' : ' + detailedErrorMessages.join(' ');
                    toastr.error(detailedErrorMessage);
                } catch (e) {
                    toastr.error("An error occurred while processing your request");
                }
            }
        });
    }

    function handlePriceTypeChange(e) {
        if (e.target.value == 'hourly') {
            $("#block-fixed-rate").each(function() {
                this.style.cssText = "display: none !important";
            });
            $("#block-hourly-rate").each(function() {
                this.style.cssText = "display:";
            });
            $("#total_hours_div").each(function() {
                this.style.cssText = "display:";
            });

         
        } else {
            $("#block-fixed-rate").each(function() {
                this.style.cssText = "display:";
            });
            $("#block-hourly-rate").each(function() {
                this.style.cssText = "display: none !important";
            });
         
            $("#total_hours_div").each(function() {
                this.style.cssText = "display: none !important";
            });
        }
    }
    function checkCancelReason() {
        var selectedValue = document.querySelector('input[name="cancel_reason_id"]:checked');
        if (!selectedValue) {
            toastr.error('Please select a cancel reason.');
            return;
        }
        $('#cancelAlert').modal('show');
        $("#providerCancelProject").modal('hide');
    }
    function handleCancelJob() {
        var selectedValue = document.querySelector('input[name="cancel_reason_id"]:checked');
        if (!selectedValue) {
            toastr.error('Please select a cancel reason.');
            return;
        }
        var selectedReason = selectedValue.value;
        var job_id = $('#task_id').text();
        var csrfToken = $('meta[name="csrf-token"]').attr('content');

        var data = {
            _token: csrfToken,
            task_id: job_id,
            cancel_reason_id: selectedReason,
        };
        $.ajax({
            url: "{{route('sp.cancelJob')}}",
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function(response) {
                if (response.success.status == 200) {
                    toastr.success(response.success.message);
                    $("#providerCancelProject").modal('hide');
                    $("#cancelAlert").modal('hide');
                    setTimeout(function() {
                        window.location.href = "{{ route('sp.myProjects') }}";
                    }, 2000);
                }else if (response.error) {
                    toastr.error(response.error.message);
                }else{
                    toastr.error(response.errors);
                }
            },
            error: function(error) {
                try {
                    var parsedError = JSON.parse(error.responseText);
                    toastr.error(parsedError);
                } catch (e) {
                    toastr.error("An error occurred while processing your request");
                }
            }
        });
    }

  document.getElementById('scheduleStartTime').addEventListener('focus', function () {
    this.type = 'time';
  });
  document.getElementById('scheduleStartTime').addEventListener('blur', function () {
    this.type = 'text';
  });

 // Initialize the map
 function initMap() {
        var lat = {{ $latitude ?? 0 }}; // Latitude from the backend
        var lng = {{ $longitude ?? 0 }}; // Longitude from the backend

        // Create a map centered at the provided latitude and longitude
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 15,
            center: { lat: lat, lng: lng },
        });

        var circle = new google.maps.Circle({
            map: map,
            radius: 500, // Radius in meters (500m)
            fillColor: '#FF0000',
            fillOpacity: 0.2,
            strokeColor: '#FF0000',
            strokeOpacity: 0.5,
            strokeWeight: 2,
        });

        circle.setCenter({ lat: lat, lng: lng });
        map.fitBounds(circle.getBounds());
    }
</script>

@endsection