@extends("website.layouts.layout")
@section('title',"My Account")
@section("body")
<!--Banner-->

<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="{{route('homepage')}}">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">
        <!-- <img src="./assets/images/hamburger-menu.svg" alt="hamburger-icon" width="30" class="hamburger-icon"> -->
        <div class="row sidebar_row">
            @include("website.clients.includes.sidebar")
            <div class="main-content">
                <div class="main-content-wrapper 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">
                                @if($taskDetails['success']['data']['job_status']== 3)
                                <div class="unread-msgs-block align-items-center">
                                    <h4 class="" style="color:red">This task was cancelled on
                                        {{$taskDetails['success']['data']['updated_at']}}</h4>
                                    <p class="mt-2 font-size-18">This project is cancelled by Client.</p>
                                </div>
                                @endif
                                <div class="project-user-profile-item ser-profile d-flex">
                                    
                                    <img src="{{$taskDetails['success']['data']['sp_profile_image']}}" alt="user">
                                    <div class="arnette-header-items flex-grow-1">
                                                            @php
                                            $serviceProvider = $taskDetails['success']['data']['sp_name'];
                                            $nameParts = explode(' ', $serviceProvider);
                                            $firstName = $nameParts[0];
                                            $lastNameInitial = isset($nameParts[1]) ? strtoupper($nameParts[1][0]) : '';
                                            $displayName = $firstName . ' ' . $lastNameInitial;
                                        @endphp

                                        <div class="arnette-header-inner-wrapper d-flex flex-wrap justify-content-between">
                                        <h3 class="heading-text">{{ $displayName }}</h3>


                                    <p class="sr-no">#{{$taskDetails['success']['data']['project_id']}}</p>
                                    <span id="task_id" style="display: none;">{{$taskDetails['success']['data']['task_id']}}</span>
                                    </div>
                                    <div class="project-user-inner-item d-flex flex-column gap-0">
                                    <h3 class="heading-text" style="color: #0d6efd;">{{$taskDetails['success']['data']['category_name']}}</h3>
                                        <h3 class="heading-text">{{$taskDetails['success']['data']['sub_category_name']}}</h3>
                                        <div
                                            class="user-scheduled-time d-flex ">
                                            <span class="d-flex "><img
                                                    src="{{asset('webAssets/assets/images/clock-noun.svg')}}"
                                                    alt="clock">
                                                    <p class="para" id="date-time-show">
                                                    
                                                </p>
                                            </span>
                                            <span class="d-flex align-items-center"><img
                                                    src="{{asset('webAssets/assets/images/uit_calender.png')}}"
                                                    alt="calender">
                                                <p>{{$taskDetails['success']['data']['schedule_date']}}</p>
                                            </span>

                                            
                                        </div>
                                    </div>
                                     </div>
                                    
                                </div>
                                <div class="project-details d-flex flex-column">
                                    <h3 class="font-size-18">Project Details</h3>
                                    <p class="para">{{$taskDetails['success']['data']['description']}}</p>
                                </div>
                                <div class="project-images d-flex flex-column ">
                                    <div class="project-images-text-col">
                                        <h3 class="font-size-18">Project Images</h3>
                                    </div>
                                    <div class="project-images-img-col pro-img-col d-flex">
                                        @foreach($taskDetails['success']['data']['work_images'] as $work_images)
                                        <img src="{{$work_images}}" alt="pro-img">
                                        @endforeach
                                    </div>
                                </div>
                      
                                <div class="address-block d-flex flex-column">
                                    <h3 class="font-size-18">Address</h3>
                                    <div style="width: 100%; height: 200px;">
                                        <iframe width="100%" height="100%"
                                            src="https://maps.google.com/maps?q={{ $taskDetails['success']['data']['location']['latitude'] }},{{ $taskDetails['success']['data']['location']['longitude'] }}&hl=es&z=14&amp;output=embed"></iframe>
                                    </div>
                                    <span class="loc d-flex align-items-center">
                                        <img src="{{asset('webAssets/assets/images/location-icon.svg')}}"
                                            alt="location ">
                                        <p class="paragraph"> {{$taskDetails['success']['data']['project_address']}}</p>
                                    </span>
                                </div>
                                @if($taskDetails['success']['data']['job_status'] != 3)
                                <div class="project-price-details d-flex flex-column">
                                    <h3 class="font-size-18">Price Details</h3>
                                    <div class="rate-details d-flex flex-column">
                                        <hr style="border-top: dotted 1px;">
                                        <div class="hourly-rate d-flex justify-content-between">
                                            <p class="para"># Service</p>                       
                                            <p class="para">Cost</p>
                                        </div>
                                        <div class="hourly-rate d-flex justify-content-between">
                                            <p class="para">Hourly rate</p>
                                            <p class="para">
                                                ${{$taskDetails['success']['data']['serviceCost']['rate']}}/hr
                                            </p>
                                        </div>
                                        <!-- <div class="hourly-rate d-flex justify-content-between">
                                            <p class="para">Hours  Worked</p>
                                            <p class="para">
                                                $10000
                                            </p>
                                        </div> -->
                                        <!-- <div class="hourly-rate d-flex justify-content-between">
                                            <p class="para">Service Provoder Total</p>
                                            <p class="para">
                                                $1111111111
                                            </p>
                                        </div> -->
                                        <div class="platform-fees d-flex justify-content-between">
                                            <p class="para">Platform Fee</h3>
                                            <p class="para">
                                                ${{$taskDetails['success']['data']['serviceCost']['platform_fee']}}/hr
                                            </p>
                                        </div>
                                        <div class="taxes d-flex justify-content-between">
                                            <p class="para">Taxes</h3>
                                            <p class="para">${{$taskDetails['success']['data']['serviceCost']['tax']}}
                                            </p>
                                        </div>
                                        <!-- <div class="taxes d-flex justify-content-between">
                                            <p class="para">Expenses</h3>
                                            <p class="para">$0</p>
                                        </div> -->
                                        <!-- <div class="taxes d-flex justify-content-between">
                                            <p class="para">Tips</h3>
                                            <p class="para">$0</p>
                                        </div> -->
                                        <hr>
                                    </div>
                                    <div class="total-expense-col d-flex justify-content-between">
                                        <h3 class="font-size-18">Total</h3>
                                        <h3 class="font-size-18">
                                            ${{$taskDetails['success']['data']['serviceCost']['grand_total']}}/hr</h3>
                                    </div>
                                    <div class="project-action-btn d-flex justify-content-between">
                                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                            data-bs-target="#providerrescheduleProject">Reschedule Project</button>
                                            <!-- <button type="button" class="btn btn-primary" onclick="showChat()" >Reschedule Project</button> -->
                                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                            data-bs-target="#newSpProject">Find new service
                                            provider</button>
                                        <button type="button" class="btn btn-decline" data-bs-toggle="modal"
                                            data-bs-target="#cancelProject">Cancel Project</button>
                                    </div>
                                </div>
                                @endif
                                <!-- Modal -->
                            </div>
                        </div>
                    </div>



                    <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="{{$taskDetails['success']['data']['sp_profile_image']}}"
                                        alt="profile">
                    
                                    <div class="info">
                                                                            <span class="user" id="chatHeaderUser">{{ $first_name }}</span>
                                       
                                    </div>
                                </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">
                                <div class="message-list you">
                                    <div class="msg">

                                    </div>
                                </div>

                                <!-- <div class="message-list me">
                                    <div class="msg">

                                    </div>
                                </div> -->
                            </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>
                                        <!-- <button id="closeButton" class="close-button">x</button> -->
                                    </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>

    <!-- Cancel job Modals -->

    <div class="modal fade cancel-project" id="cancelProject" tabindex="-1" aria-labelledby="cancelProjectLabel"
        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 cancelling <br> below</p>
                    </div>
                    <div class="custom-checkbox">
                        <form>
                            @foreach($cancelReasons as $value)
                            @if($value['forRole'] !=2)
                            <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>
                            @endif
                            @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>

    <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="{{asset('webAssets/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>

    <div class="modal fade cancel-project" id="providerrescheduleProject" tabindex="-1"
        aria-labelledby="providerrescheduleProjectLabel" 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)
                            @if($value['forRole'] !=2)
                            <div class="form-group">
                                <input type="radio" id="r{{ $value['id'] }}" name="reschedule_reason_id"
                                    value="{{ $value['id'] }}">
                                <label for="r{{ $value['id'] }}">{{ $value['reason'] }}</label>
                            </div>
                            @endif
                            @endforeach
                        </form>
                    </div>
                </div>
                <div class="cancel-project-modal-footer">

                    <button type="button" class="btn btn-primary" onclick="checkRescheduleReason()">Submit</button>
                </div>
            </div>
        </div>
    </div>
        <div class="modal fade time_select_modal" id="editSchedule" tabindex="-1" aria-labelledby="editScheduleLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="body-heading">
                        <h6>{{$taskDetails['success']['data']['sub_category_name'] ?? ''}} With {{$displayName}}</h6>
                    </div>
                    <hr>
                    <div class="schedule-body-items mt-3">
                      
                        <form action="">
                        <div class="row mt-3 justify-content-center datetime_selection">
                        <div class="col-md-6">
                                <label for="scheduleDate" class="datetime_label font-size-14">Reschedule Date</label>
                                <select id="scheduleDate" class="form-control">
                                    <option value="">Select a Date</option>
                                    @foreach ($availableDates as $date)
                                        <option value="{{ $date }}">{{ \Carbon\Carbon::parse($date)->format('D-m-d') }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label for="availableTimes" class="datetime_label font-size-14">Available Time Slots</label>
                                <select id="availableTimes" class="form-control">
                                    <option value="">Select a time</option>
                                </select>
                            </div>



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

                <div class="modal-footer mt-4">
                    <button type="button" class="btn btn-primary w-100" onclick="handleRescheduleJob()">Next</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Successfull Completion modal -->

    <div class="modal fade" id="successfulCompletion" tabindex="-1" aria-labelledby="successfulCompletionLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content d-flex flex-column gap-3">
                <div class="modal-header">
                    <a href="{{ route('client.myAccount') }}" class="btn-close"></a>
                </div>
                <div class="modal-body d-flex flex-column gap-2">
                    <div class="successful-img d-flex justify-content-center">
                        <img class="send-icon" src="{{ url('webAssets/assets/images/tick-mark_blue.svg') }}" />
                    </div>
                    <div class="body-text-col text-center">
                        <h6>Your Project has Rescheduled on <span id="resch_day_time"></span></h6>
                    </div>
                </div>
                <div class="modal-footer">
                    <a href="{{ route('client.myAccount') }}" class="btn btn-primary w-100">Thanks</a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="newSpProject" tabindex="-1" aria-labelledby="newSpProjectLabel" 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)
                            @if($value['forRole'] !=2)
                            <div class="form-group">
                                <input type="radio" id="sp{{ $value['id'] }}" name="find_new_SP_reason_id"
                                    value="{{ $value['id'] }}">
                                <label for="sp{{ $value['id'] }}">{{ $value['reason'] }}</label>
                            </div>
                            @endif
                            @endforeach
                        </form>
                    </div>
                </div>
                <div class="cancel-project-modal-footer">

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

@endsection

<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://cdn.jsdelivr.net/npm/flatpickr"></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 utcAvailTime = $('#availableTimes').data('utc'); // Get UTC Start Time


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

        var slotTime = "{{ $taskDetails['success']['data']['schedule_time'] }}"; // Get the UTC time
        var utcTime = moment.utc(slotTime, "hh:mm A").format("HH:mm"); // Format it to 24-hour format
        var localTime = slotTime;
        var dateTimeElement = document.getElementById('date-time-show');
        if (dateTimeElement) {
            dateTimeElement.innerText = localTime; // Set the converted time to the element
        } else {
            console.error('Element #date-time-show not found');
        }
    
    });


    function handleRescheduleJob() {
    const min_hours = parseInt("{{ $min_hours }}"); // Convert min_hours to an integer
    const selectedValue = document.querySelector('input[name="reschedule_reason_id"]:checked');
    const scheduleDate = $('#scheduleDate').val();
    const scheduleStartTime = $('#availableTimes').val(); // Start time in UTC
    const job_id = $('#task_id').text();

    if (!scheduleDate || !scheduleStartTime) {
        toastr.error('Please fill in all fields.');
        return;
    }

    let selectedReason = selectedValue ? selectedValue.value : '';

    // Convert scheduleStartTime to a Date object
    let startTime = new Date(scheduleStartTime);
    
    // Add min_hours to get scheduleEndTime
    let endTime = new Date(startTime);
    endTime.setHours(endTime.getHours() + min_hours); 

    // Format endTime back to ISO string (UTC format)
    const scheduleEndTime = endTime.toISOString();

    const csrfToken = $('meta[name="csrf-token"]').attr('content');

    var dateObject = new Date(scheduleStartTime); // Convert to Date object
            
            // Format time in HH:mm:ss (24-hour format)
            var formattedTime = dateObject.toLocaleTimeString('en-GB', {
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: false
            });
        console.log(formattedTime,"formattedTime")

    const data = {
        _token: csrfToken,
        task_id: job_id,
        reschedule_reason_id: selectedReason,
        date: scheduleDate,
        time: formattedTime,
        slot_time: scheduleStartTime,
        slot_time_end: scheduleEndTime, 
        min_hours: min_hours,
    };

    console.log('Selected reschedule reason:', data);

    // return false;

    $.ajax({
        url: "{{route('client.rescheduleProject')}}",
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(data),
        success: function(response) {
            console.log('Success:', response);

            if (response.success && response.success.status == 200) {
                toastr.success(response.success.message);
                $("#providerCancelProject, #cancelAlert, #editSchedule").modal('hide');
                $("#successfulCompletion").modal('show');

                // Format and display rescheduled date and time
                const formattedDateTime = moment(`${scheduleDate}T${scheduleStartTime}`)
                    .format('MMMM DD [at] hh:mm a');
                $("#resch_day_time").text(formattedDateTime);

            } else if (response.error) {
                toastr.error(response.error.message);
            } else {
                toastr.error("An unexpected error occurred.");
            }
        },
        error: function(error) {
            try {
                var parsedError = JSON.parse(error.responseText);
                toastr.error(parsedError.message || "An error occurred.");
            } catch (e) {
                toastr.error("An unknown error occurred.");
            }
        }
    });
}



document.addEventListener('DOMContentLoaded', () => {

    const today = new Date().toISOString().split('T')[0];
    document.getElementById('scheduleDate').setAttribute('min', today);
    const socketUrl = @json(env('SOCKET_URL'));
    const socket = io(socketUrl, {
        reconnection: false
    });
    let socketId;
    let senderId = {{ $taskDetails['success']['data']['client_id'] }}; // Client ID as sender
    let receiverId = {{ $taskDetails['success']['data']['sp_id'] }}; // Service Provider ID as receiver
    let senderType = "client"; // Sender type
    let receiverType = "provider"; // Receiver type
    let roomId;
    let roomname;
    let jobId = {{ $taskDetails['success']['data']['task_id'] }};
     // Extract job details and escape blade variables correctly as strings
     const clientName = "{{ $taskDetails['success']['data']['client_first_name'] }} {{ $taskDetails['success']['data']['client_last_name'] }}";
     const clientFirstName = "{{ $taskDetails['success']['data']['client_first_name'] }}";
    const providerName = "{{ $taskDetails['success']['data']['first_name'] }}";
    const category = "{{ $taskDetails['success']['data']['category_name'] }}";
    const subCategory = "{{ $taskDetails['success']['data']['sub_category_name'] }}";
    const scheduledDate = "{{ $taskDetails['success']['data']['schedule_date'] }}";
    const scheduledTime = "{{ $taskDetails['success']['data']['schedule_time'] }}";
    const fullScheduledTime = `${scheduledTime} on ${scheduledDate}`;


    socket.on("connection", (data) => {
        socketId = data?.socketId; // Save socket ID
    });

    // Join room for specific task
    const dataForRoom = {
        username: "{{ $taskDetails['success']['data']['client_first_name'] }} {{ $taskDetails['success']['data']['client_last_name'] }}",
        user_from: senderId,
        user_to: receiverId,
        user_from_type: senderType,
        user_to_type: receiverType,
        job_id: jobId

    };


    socket.emit("join room", dataForRoom);

    socket.on('connect', function() {
                        console.log('Socket connected');
                    });
                    
    // Listen for incoming chat messages
    socket.on("chat message", (data) => {
        displayMessage(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
    });

    // Handle the room ID and name
    socket.on('send data', (data) => {
        roomId = data.id;
        roomname = data.roomname;
    });

    // Load old chat messages
    socket.on("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', showConfirmationModal);
    }

    function showConfirmationModal(event) {
        event.preventDefault();
        const messageBody = {
            value: document.getElementById("textInput").value,
            user: "{{ $taskDetails['success']['data']['client_first_name'] }} {{ $taskDetails['success']['data']['client_last_name'] }}",
            room: roomname,
            user_from: senderId,
            user_to: receiverId,
            socket: roomId,
            user_from_type: senderType,
            user_to_type: receiverType,
            job_id: jobId,
        };
        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 == 'client') ? "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 == 'client')? "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
    }


    const jobDetailsElement = document.getElementById('jobDetails');
        jobDetailsElement.innerText = ` ${clientFirstName} has requested ${providerName} for ${subCategory} at ${fullScheduledTime}`;
        });



    document.addEventListener('DOMContentLoaded', (event) => {
    const projectsDetailsButton = document.getElementById('projectsDetailsButton');
    const chatButton = document.getElementById('chatButton');
    const projectsDetailsBlock = document.getElementById('projectsDetailsBlock');
    const chatBlock = document.getElementById('chatBlock');

    // 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');
    }

    // Initialize to show Projects Details
    showProjectsDetails();

    // Add event listeners
    projectsDetailsButton.addEventListener('click', (event) => {
        event.preventDefault(); // Prevent default button action
        showProjectsDetails();

    });

    chatButton.addEventListener('click', (event) => {
        event.preventDefault(); // Prevent default button action
        showChat();
    });
});
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');
    }

</script>


@section('footerItems')
@endsection
<script>
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');
    $("#cancelProject").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;
    console.log('Selected cancel reason:', selectedReason);
    // var url = window.location.href;
    // var parts = url.split('/');
    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('client.cancelJob')}}",
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(data),
        success: function(response) {
            console.log('Success:', response, response.success, response.error);
            if (response.success.status == 200) {
                toastr.success(response.success.message);
                $("#cancelProject").modal('hide');
                $("#cancelAlert").modal('hide');
                setTimeout(function() {
                    window.location.href = "{{ route('client.myAccount') }}";
                }, 2000);
            } else if (response.error) {
                toastr.error(response.error.message);
            } else {
                toastr.error(response.errors);
            }
        },
        error: function(error) {
            var parsedError = JSON.parse(error.responseText);
            toastr.error(parsedError);
        }
    });
}

var firstTimeClick = true; // Track first-time click

function checkRescheduleReason() {
    var selectedValue = document.querySelector('input[name="reschedule_reason_id"]:checked');
    if (!selectedValue) {
        toastr.error('Please select a reschedule reason.');
        return;
    }

    $("#providerrescheduleProject").modal('hide');
    // $('#editSchedule').modal('show');

    if (firstTimeClick) {
        firstTimeClick = false; // Mark as clicked
        showChat();
    } else {
        $('#editSchedule').modal('show');
    }
}



function checkNewRescheduleReason() {
    var selectedValue = document.querySelector('input[name="find_new_SP_reason_id"]:checked');
    if (!selectedValue) {
        toastr.error('Please select a reason.');
        return;
    }
    var selectedReason = selectedValue.value;
    var job_id = $('#task_id').text();
    if (!job_id) {
        toastr.error('Job id is missing!');
        return;
    }

    var csrfToken = $('meta[name="csrf-token"]').attr('content');
    var data = {
        _token: csrfToken,
        task_id: job_id,
        find_new_SP_reason_id: selectedReason,
    };
    $.ajax({
        url: "{{route('client.newSpRescheduleProject')}}",
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(data),
        success: function(response) {
            console.log('Success:', response, response.success, response.error);
            if (response.success.status == 200) {
                toastr.success(response.success.message);
                $("#newSpProject").modal('hide');
                $("#cancelAlert").modal('hide');
                setTimeout(function() {
                    window.location.href = "{{ route('homepage') }}";
                }, 2000);
            } else if (response.error) {
                toastr.error(response.error.message);
            } else {
                toastr.error(response.errors);
            }
        },
        error: function(error) {
            var parsedError = JSON.parse(error.responseText);
            toastr.error(parsedError);
        }
    });
}
$(document).ready(function() {
    $('#scheduleDate').change(function() {
        let selectedDate = $(this).val();
        let spId = "{{ $taskDetails['success']['data']['sp_id'] ?? '' }}"; // Get sp_id

        if (selectedDate && spId) {
            $.ajax({
                url: "/api/client/availablites/times",  // Define this route in web.php
                type: "GET",
                data: {
                    sp_id: spId,
                    date: selectedDate,
                    "current_time": moment().utc().format('YYYY-MM-DDTHH:mm:ss') + "Z",
                    _token: "{{ csrf_token() }}"
                },
                success: function (res) {
                let options = "<option value=''>Select a time</option>";

                if (res.success && res.available_timings.length > 0) {
                    res.available_timings.forEach(element => {
                        let formattedTime = moment(element).format('LT'); // Format time
                        options += `<option value="${element}">${formattedTime}</option>`;
                    });
                } else {
                    options = "<option value=''>No slots available</option>";
                }

                $('#availableTimes').html(options);
            },
            });
        } else {
            $('#availableTimes').empty().append('<option value="">Select a time</option>');
        }
    });
});
function selectTimeSlot(button, time) {
    $(".time-slot").removeClass("selected");
    $(button).addClass("selected");
    console.log("Selected Time:", time);
}
</script>