@extends("website.service-providers.layouts.layout")
@section('title', "Services")
@section("body")
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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"><a href="{{route('sp.myProjects')}}">My
                        Project</a></li>
                <li class="breadcrumb-item active" aria-current="page"><a href="{{route('sp.myProjects')}}">Current</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">Current Project Details</li>
            </ol>
        </nav>

    </div>
</section>
<style>
.cancelled-job {
    color: red;
    text-align: center;
    font-size: 16px;
    font-weight: bolder;
    border: 1px solid;
}

.ongoing-job {
    color: #0d6efd;
    text-align: center;
    font-size: 16px;
    font-weight: bolder;
    border: 1px solid;
    padding: 5px;
}
</style>
<section class="dashboard-main">
    <div class="container">
        <div class="row">
            @include("website.service-providers.includes.sidebar")
            @include("website.layouts.modal")
            <div class="main-content client">
                <div class="main-content-wrapper scheduled-project">

                    <div class=" provider-current">


                        <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($data['success']['data']['job_status']== 3)
                                    <div class="unread-msgs-block align-items-center">
                                        <h4 class="" style="color:red">This task was cancelled on
                                            {{$data['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="{{$data['success']['data']['client_profile']}}" alt="user">
                                        <div class="arnette-header-items flex-grow-1">
                                            @php
                                            $serviceProvider = $data['success']['data']['client_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">#{{$data['success']['data']['project_id']}}</p>
                                                <span id="task_id"
                                                    style="display: none;">{{$data['success']['data']['task_id']}}</span>
                                            </div>
                                            <div class="project-user-inner-item d-flex flex-column gap-0">
                                                <h3 class="heading-text">
                                                    {{$data['success']['data']['category_name']}}</h3>
                                                <h3 class="heading-text blue-color">
                                                    {{$data['success']['data']['sub_category']['name']}}</h3>
                                                @php
                                                use Carbon\Carbon;
                                                $formattedDate =
                                                Carbon::parse($data['success']['data']['date_time']['schedule_date'])->format('D,
                                                M d, Y');
                                                $formattedTime = Carbon::createFromFormat('H:i:s',
                                                $data['success']['data']['date_time']['schedule_time'])->format('h:i
                                                A');
                                                @endphp
                                                <div
                                                    class="user-scheduled-time d-flex justify-content-between align-items-center">
                                                    <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 gap-2 align-items-center"><img
                                                            src="{{asset('webAssets/assets/images/uit_calender.png')}}"
                                                            alt="calender">
                                                        <p>{{ $formattedDate }}</p>
                                                    </span>
                                                </div>
                                                @if($ongoing_job == '1')
                                                <div class="cancelled-job-action d-flex justify-content-end ">
                                                    <p class="para-text ongoing-job font-size-18">Ongoing Job</p>
                                                </div>
                                                @endif
                                            </div>
                                        </div>

                                    </div>
                                    <div class="project-details d-flex flex-column">
                                        <h3 class="font-size-18">Project Details</h3>
                                        <p class="para">{{$data['success']['data']['project_details']}}</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($data['success']['data']['project_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={{ $data['success']['data']['latitude'] }},{{ $data['success']['data']['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">
                                                {{$data['success']['data']['project_address']}}</p>
                                        </span>
                                    </div>
                                   
                                    @if($data['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">
                                                <h4 class="font-size-16"># Service</h4>
                                                <h4 class="font-size-16">Cost</h4>
                                            </div>
                                            <!-- <div class="hourly-rate d-flex justify-content-between">

                                                        <p class="para">Hourly rate</p>
                                                        <p class="para">
                                                            ${{$data['success']['data']['hourly_rate']}}/hr
                                                        </p>
                                                    </div> -->
                                            <div class="hourly-rate d-flex justify-content-between">


                                                @if($data['success']['data']['pricing_type'] == 'fixed')
                                                <p class="para">Fixed Rate</p>
                                                <p class="para">${{$data['success']['data']['hourly_rate'] ?? ''}}/fr
                                                </p>
                                                @else
                                                <p class="para">Hourly Rate</p>
                                                <p class="para">${{$data['success']['data']['hourly_rate'] ?? ''}}/hr
                                                </p>
                                                @endif
                                            </div>

                                            <hr>
                                        </div>
                                        <div class="total-expense-col d-flex justify-content-between mb-4">
                                            <h3 class="font-size-18">Total</h3>
                                            <h3 class="font-size-18">
                                                ${{$data['success']['data']['total']}}
                                            </h3>
                                        </div>
                                        <div class="project-action-btns d-flex gap-8px flex-wrap" id="all_button_div">
                                            @if($job_status == '1')
                                            @if($ongoing_job == '1' && $resume_job == '1')
                                            <button type="button" class="btn btn-secondary flex-grow-1"
                                                data-bs-toggle="modal"
                                                data-bs-target="#editSchedule">Edit/Reschedule</button>
                                            <button type="button" class="btn btn-decline flex-grow-1"
                                                data-bs-toggle="modal" data-bs-target="#providerCancelProject">End
                                                Project</button>
                                            <button id="startProjectButton" type="button"
                                                class="btn btn-primary  flex-grow-1 ongoing_job"
                                                onclick="handleStartJob(this)">
                                                <span class="button-text">Resume Project</span>
                                                <span class="spinner-border spinner-border-sm d-none" role="status"
                                                    aria-hidden="true"></span>
                                            </button>
                                            @elseif($ongoing_job == '1' && $resume_job == '0')
                                            <p>This is Ongoing job, please reschedule to continue the job.</p>
                                            <button type="button" class="btn btn-secondary flex-grow-1"
                                                data-bs-toggle="modal"
                                                data-bs-target="#editSchedule">Edit/Reschedule</button>
                                            <button type="button" class="btn btn-decline flex-grow-1"
                                                data-bs-toggle="modal" data-bs-target="#providerCancelProject">End
                                                Project</button>
                                            @else
                                            <button type="button" class="btn btn-secondary flex-grow-1"
                                                data-bs-toggle="modal"
                                                data-bs-target="#providerrescheduleProject">Edit/Reschedule</button>
                                            <button type="button" class="btn btn-decline flex-grow-1"
                                                data-bs-toggle="modal" data-bs-target="#providerCancelProject">Cancel
                                                Project</button>
                                            <button id="startProjectButton" type="button"
                                                class="btn btn-primary  flex-grow-1 ongoing_job"
                                                onclick="handleStartJob(this)">
                                                <span class="button-text">Start Project</span>
                                                <span class="spinner-border spinner-border-sm d-none" role="status"
                                                    aria-hidden="true"></span>
                                            </button>
                                            @endif
                                            @elseif($job_status == '0')
                                            <button type="button" class="btn btn-secondary flex-grow-1"
                                                data-bs-toggle="modal"
                                                data-bs-target="#providerrescheduleProject">Edit/Reschedule</button>
                                            <button type="button" class="btn btn-decline flex-grow-1"
                                                data-bs-toggle="modal" data-bs-target="#providerCancelProject">Cancel
                                                Project</button>
                                            <button id="startProjectButton" type="button"
                                                class="btn btn-primary  flex-grow-1 ongoing_job"
                                                onclick="handleStartJob(this)">
                                                <span class="button-text">Start Project</span>
                                                <span class="spinner-border spinner-border-sm d-none" role="status"
                                                    aria-hidden="true"></span>
                                            </button>
                                            @elseif($job_status == '4')
                                            <a href="{{ route('sp.createInvoice', ['task_id' => $task_id]) }}"
                                                class="btn btn-primary w-100">Create Invoice</a>
                                            @endif
                                        </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="{{$data['success']['data']['client_profile']}}"
                                        alt="profile">
                                    <!-- <img src="{{ url('webAssets/assets/images/123.png') }}" alt="profile" /> -->
                                    <div class="info">
                                                                            <span class="user" id="chatHeaderUser">{{ $first_name }}</span>
                                        <span class="time">Active</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>
                                <!-- Work Request Message -->
                                <div class="message-wrap">
                                    <div class="message-list you">
                                        <div class="msg"></div>
                                    </div>
                                </div>

                                <!-- Chat Input Area -->
                                <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>
    </div>

</section>
@endsection



<!-- Modals -->
<!-- Cancel job Modals -->

<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 cancelling this project </p>
                </div>
                <div class="custom-checkbox">
                    <form>
                        @foreach($cancelReasons as $value)
                        @if($value['forRole'] =='1')
                        <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>
<!-- 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="{{ url('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>

<!-- Edit Modal -->
<!-- Cancel job Modals -->

<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 </p>
                </div>
                <div class="custom-checkbox">
                    <form>
                        @foreach($cancelReasons as $value)
                        @if($value['forRole'] !='0')
                        <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>
<!-- Cancel Delete Account Modal -->
<!-- <div class="modal fade" 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>{{$category_name}} With {{$displayName}}</h6>
                </div>
                <hr>
                <div class="schedule-body-items mt-3">
                    <form action="">
                        <div class="row mt-3">
                            <div class="col-md-6">
                                <label for="scheduleDate">Reschedule Date</label>
                                <input type="date" value="{{$date_time['schedule_date']}}" class="form-control" id="scheduleDate">
                            </div>
                            <div class="col-md-6">
                                <label for="scheduleTime">Reschedule Time</label>
                                <input type="time" value="{{$date_time['schedule_time']}}" class="form-control" name="time" id="scheduleTime">
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-6">
                                <label for="startTime">Start Time</label>
                                <input type="time" value="{{$slot_time}}"  name="slot_time" class="form-control" id="scheduleStartTime">
                            </div>
                            <div class="col-md-6">
                                <label for="EndTime">End Time</label>
                                <input type="time" value="{{$slot_time_end}}"  name="slot_time_end" class="form-control" id="scheduleEndTime">
                            </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> -->

<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 {{$displayName}}</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="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('sp.myProjects') }}" 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('sp.myProjects') }}" class="btn btn-primary w-100">Thanks</a>
            </div>
        </div>
    </div>
</div>


<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://cdn.jsdelivr.net/npm/flatpickr"></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 = "{{ \Carbon\Carbon::parse($data['success']['data']['date_time']['schedule_time'])->format('h:i A') }}";
    var slotTime = "{{ $data['success']['data']['date_time']['schedule_time'] }}";
    // alert(slotTime)
    // var utcTime = moment.utc(slotTime, "hh:mm").format("HH:mm");
    // var localTime = moment.utc(utcTime, "HH:mm").local().format('LT');
    //     var localTime = slotTime;
    //     var dateTimeElement = document.getElementById('date-time-show');
    //     if (dateTimeElement) {
    //         dateTimeElement.innerText = localTime; // Set the converted local time
    //     } else {
    //         console.error('Element #date-time-show not found');
    //     }

    flatpickr("#scheduleDate", {
        minDate: "today", // Disables past dates
        dateFormat: "Y-m-d", // Custom format: Thu-Jan-29-2025
        disable: [
            function(date) {
                return !(date.getDate() % 8); // Disable every multiple of 8
            }
        ]
    });



    // Split the time string into components (hour, minute, second)
    var timeParts = slotTime.split(':'); // ['00', '30', '00']

    var hours = parseInt(timeParts[0], 10); // 00
    var minutes = timeParts[1]; // 30
    var period = hours >= 12 ? 'PM' : 'AM'; // Determine AM or PM

    // Convert hours to 12-hour format
    if (hours === 0) {
        hours = 12; // Midnight should be 12
    } else if (hours > 12) {
        hours -= 12; // Convert hours above 12 to 12-hour format
    }

    // Format time as 12-hour format with AM/PM
    var formattedTime = (hours < 10 ? '0' + hours : hours) + ':' + minutes + ' ' + period;

    // Update the content in the date-time element
    var dateTimeElement = document.getElementById('date-time-show');
    if (dateTimeElement) {
        dateTimeElement.innerText = formattedTime; // Set the formatted local time (e.g., 12:30 AM)
    } else {
        console.error('Element #date-time-show not found');
    }


    flatpickr("#scheduleStartTime", {
        enableTime: true,
        noCalendar: true,
        dateFormat: "h:i K",
        defaultDate: localStartTime || new Date(), // Use the value or current time if no value
    });

    // Initialize flatpickr for scheduleEndTime
    flatpickr("#scheduleEndTime", {
        enableTime: true,
        noCalendar: true,
        dateFormat: "h:i K",
        minuteIncrement: 1, // Adjusts dropdown precision for minutes
        secondIncrement: 1,
        defaultDate: localEndTime || new Date(), // Use the value or current time if no value
    });

});
document.addEventListener('DOMContentLoaded', function() {
    // Get the UTC time string from the Blade template
    var slotTime =
        "{{ \Carbon\Carbon::parse($data['success']['data']['date_time']['schedule_time'])->format('h:i A') }}";

    // Convert the UTC time to local time using moment.js
    // var utcTime = moment.utc(slotTime, "hh:mm A").format("HH:mm");
    // var localTime = moment.utc(utcTime, "HH:mm").local().format('LT'); // Convert to local time
    var localTime = slotTime;
    // Ensure the element exists before updating it
    var dateTimeElement = document.getElementById('date-time-show');
    if (dateTimeElement) {
        dateTimeElement.innerText = localTime; // Set the converted local time
    } else {
        console.error('Element #date-time-show not found');
    }
});

// Set today's date as the minimum date
const today = new Date().toISOString().split('T')[0];
document.getElementById('scheduleDate').setAttribute('min', today);


document.addEventListener('DOMContentLoaded', () => {
    const socketUrl = @json(env('SOCKET_URL'));
    const socket = io(socketUrl, {
        reconnection: false
    });

    let socketId;
    const senderId = "{{ $data['success']['data']['sp_id'] }}"; // Example senderId
    const receiverId = "{{ $data['success']['data']['client_id'] }}"; // Example receiverId
    const senderType = "provider"; // Example senderType
    const receiverType = "client"; // Example receiverType
    const jobId = "{{ $data['success']['data']['task_id'] }}";
    let roomId;
    let roomname;
    // Extract job details and escape blade variables correctly as strings
    const fullClientName = "{{ $data['success']['data']['client_name'] }}";
    const subCategory = "{{ $data['success']['data']['sub_category']['name'] }}";
    const scheduledDate = "{{ $data['success']['data']['date_time']['schedule_date'] }}";
    const scheduledTime = "{{ $data['success']['data']['date_time']['schedule_time'] }}";
    const dateTimeString = `${scheduledDate}T${scheduledTime}`; // Create a date-time string
    const dateTime = new Date(dateTimeString); // Create a Date object
    const clientName = fullClientName.split(' ')[0]; // Get the first part of the full name

    const options = {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    };
    const formattedDate = dateTime.toLocaleDateString('en-US', options);
    const formattedTime = dateTime.toLocaleTimeString('en-US', {
        hour: 'numeric',
        minute: 'numeric',
        hour12: true
    });

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

    const dataForRoom = {
        username: "{{ $data['success']['data']['service_provider']['first_name'] }} {{ $data['success']['data']['service_provider']['last_name'] }}",
        user_from: senderId,
        user_to: receiverId,
        user_from_type: senderType,
        user_to_type: receiverType,
        job_id: jobId,
    };

    socket.emit("join room", dataForRoom);
    // Format the time and date


    socket.on("chat message", (data) => {
        displayMessage(data);
    });

    socket.emit("old chat", {
        user_from: senderId,
        user_to: receiverId,
        user_from_type: senderType,
        user_to_type: receiverType,
        job_id: jobId,
    });


    socket.on('send data', (data) => {
        roomId = data.id;
        roomname = data.roomname;
    });

    socket.on("old chat response", (data) => {
        if (data.status) {
            dMessage(data, senderId);
        }
    });

    const submitButton = document.querySelector('#submitButton');

    if (submitButton) {
      
        submitButton.addEventListener('click', showConfirmationModal);
    }

    function showConfirmationModal(event) {
        event.preventDefault();
        const messageBody = {
            value: document.getElementById("textInput").value,
            user: "userName",
            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);
        document.getElementById("textInput").value = "";
    }

       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";
            console.log('dMessage',authorClass);
            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 ? "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 =
        `You are booked ! by ${clientName} for ${subCategory} at ${formattedTime} ${formattedDate}`;

});

function handleStartJob(button) {
    const job_id = $('#task_id').text();
    const csrfToken = $('meta[name="csrf-token"]').attr('content');
    button.disabled = true;

    // Hide the text and show the spinner
    const textSpan = button.querySelector('.button-text');
    const spinner = button.querySelector('.spinner-border');

    textSpan.textContent = 'Processing'; // Update button text
    spinner.classList.remove('d-none'); // Show the spinner

    const data = {
        _token: csrfToken,
        task_id: job_id,
    };

    $.ajax({
        url: "{{route('sp.startJob')}}",
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(data),
        success: function(response) {
            console.log('Success:', response);
            if (response.status === 200) {
                toastr.success(response.message);
                setTimeout(() => {
                    window.location.reload();
                }, 1000);
            } else {
                toastr.error(response.error?.message || response.errors);
                resetButtonState(button, textSpan, spinner);
            }
        },
        error: function() {
            resetButtonState(button, textSpan, spinner);
        }
    });
}

function resetButtonState(button, textSpan, spinner) {
    button.disabled = false;
    textSpan.textContent = 'Start Project';
    spinner.classList.add('d-none');
}

function handlePriceTypeChange(e) {
    const isHourly = e.target.value === 'hourly';
    $("#block-fixed-rate").css("display", isHourly ? "none" : "");
    $("#block-hourly-rate").css("display", isHourly ? "" : "none");
}

function checkCancelReason() {
    const 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() {
    const selectedValue = document.querySelector('input[name="cancel_reason_id"]:checked');
    if (!selectedValue) {
        toastr.error('Please select a cancel reason.');
        return;
    }
    const selectedReason = selectedValue.value;
    console.log('Selected cancel reason:', selectedReason);
    const job_id = $('#task_id').text();
    const csrfToken = $('meta[name="csrf-token"]').attr('content');

    const 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) {
            console.log('Success:', response);
            if (response.success.status === 200) {
                toastr.success(response.success.message);
                $("#providerCancelProject").modal('hide');
                $("#cancelAlert").modal('hide');
                setTimeout(() => {
                    window.location.href = "{{ route('sp.myProjects') }}";
                }, 2000);
            } else {
                toastr.error(response.error?.message || response.errors);
            }
        },
        error: function(error) {
            const parsedError = JSON.parse(error.responseText);
            toastr.error(parsedError);
        }
    });
}
var firstTimeClick = true; // Track first-time click

function checkRescheduleReason() {
    const selectedValue = document.querySelector('input[name="reschedule_reason_id"]:checked');
    if (!selectedValue) {
        toastr.error('Please select a reschedule reason.');
        return;
    }
    // $('#editSchedule').modal('show');
    $("#providerrescheduleProject").modal('hide');
    if (firstTimeClick) {
        firstTimeClick = false; // Mark as clicked
        showChat();
    } else {
        $('#editSchedule').modal('show');
    }
}

function handleRescheduleJob() {
    const selectedValue = document.querySelector('input[name="reschedule_reason_id"]:checked');
    const scheduleDate = $('#scheduleDate').val();
    const scheduleTime = $('#scheduleTime').val();
    const scheduleStartTime = $('#scheduleStartTime').val();
    const scheduleEndTime = $('#scheduleEndTime').val();
    const job_id = $('#task_id').text();

    if (!scheduleDate || !scheduleStartTime || !scheduleEndTime) {
        toastr.error('Please fill in all fields.');
        return;
    }
    let selectedReason = '';
    if (selectedValue) {
        selectedReason = selectedValue.value;
    }


    const csrfToken = $('meta[name="csrf-token"]').attr('content');
    // Convert scheduleStartTime to a Date object
    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 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: scheduleTimeZ,
        slot_time: utcStartTime,
        slot_time_end: utcEndTime,
    };

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

    $.ajax({
        url: "{{route('sp.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").modal('hide');
                $("#cancelAlert").modal('hide');
                $("#editSchedule").modal('hide');
                $("#successfulCompletion").modal('show');
                const formattedDateTime = moment(`${scheduleDate}T${scheduleTime}`).format(
                    'MMMM DD [at] hh:mm a');
                $("#resch_day_time").text(formattedDateTime);
            } else {
                const errorMessage = response.error?.message || 'An unexpected error occurred';
                toastr.error(errorMessage);
                // toastr.error(response.error?.message || response.errors);
            }
        },
        error: function(error) {
            const parsedError = JSON.parse(error.responseText);
            toastr.error(parsedError);
            const response = xhr.responseJSON;

            // Handle error message
            const errorMessage = response.error?.message || 'An unexpected error occurred';
            toastr.error(errorMessage);

            // Optionally, handle validation errors (if available)
            if (response.errors) {
                for (const key in response.errors) {
                    toastr.error(response.errors[key]);
                }
            }
        }
    });
}

document.addEventListener('DOMContentLoaded', () => {
    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>