@extends("website.service-providers.layouts.layout")
@section('title',"Services")
@section("body")
<link rel="stylesheet" href="{{ asset('css/sp.css') }}">

<section class="banner-services">
   <img class="banner-background-ellipse" src="./assets/images/banner-bg-img.png" alt="">
</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">Dashboard</li>
         </ol>
      </nav>
   </div>
</section>
<section class="dashboard-main">
   <div class="container">
      <div class="row sidebar_row">
         @include("website.service-providers.includes.sidebar")
         @include("website.layouts.modal")
         <div class="main-content">
            <div class="main-content-wrapper service-provider">
               <div class="dashboard-header-items d-flex flex-column gap-16px project-block">
                  <div class="project-block-item">
                     <div class="availablity-block project-link project-linking " style="cursor: pointer;">
                        <a href="{{ route('available.today') }}" style="text-decoration: none; color: inherit; display: flex;gap:12px; align-items: center;">
                           <div class="avalability-img-col">
                              <img src="{{ asset('webAssets/assets/images/calender.svg') }}" alt="calender">
                           </div>
                           <div class="avalability-text-col">
                              <h3 class="heading font-size-18">Bussiness Settings</h3>
                              <p class="para">Add skills, setup work area, manage availability</p>
                           </div>
                        </a>
                     </div>
                  </div>
               </div>
               <div class="project-block">
                  <div class="new-project-block d-flex flex-column gap-12px">
                     <div class="new-projects-heading-items d-flex justify-content-between align-items-center">
                        <h3 class="heading font-size-24">New Projects</h3>
                        <a href="{{ route('sp.myProjects') }}">View all</a>
                     </div>
                     <div class="project-block-item d-flex flex-column gap-12px scrollable-project-block" id="div_job_0"></div>
                  </div>

                  <div class="in-progress-block d-flex flex-column gap-12px">
                     <div class="in-progress-heading-items d-flex justify-content-between align-items-center">
                        <h4 class=" ">Schedule Jobs</h4>
                        <a href="{{ route('sp.myProjects') }}">View all</a>
                     </div>
                     <div id="project-container"></div>
                     <div class="project-block-item d-flex flex-column gap-12px scrollable-project-block" id="div_job_1"></div>
                  </div>

                  <div class="scheduled-projects-block d-flex flex-column gap-12px">
                     <div class="scheduled-projects-items d-flex justify-content-between align-items-center">
                        <h3 class="heading font-size-24">In Progress</h3>
                        <a href="{{ route('sp.myProjects') }}">View all</a>
                     </div>
                     <div class="project-block-item d-flex flex-column gap-12px scrollable-project-block" id="div_job_4"></div>
                  </div>
                  <div class="scheduled-projects-block d-flex flex-column gap-12px">
                     <div class="scheduled-projects-items d-flex justify-content-between align-items-center">
                        <h3 class="heading font-size-24">Ongoing Jobs</h3>
                        <a href="{{ route('sp.myProjects') }}">View all</a>
                     </div>
                     <div class="project-block-item d-flex flex-column gap-12px scrollable-project-block" id="div_job_11"></div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
   $(document).ready(function() {
      $.ajaxSetup({
         headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
         }
      });

      getJobs();

      function getJobs() {
         $.ajax({
            url: "{{ route('sp.allJobs') }}",
            method: 'POST',
            success: function(response) {
               console.log(response.response.data);

               if (response.status == 200) {
                  const data = response.response.data.success;
                  const statusToDivMap = {
                     "job_status_0": "div_job_0",
                     "job_status_1": "div_job_1",
                     "job_status_2": "div_job_2",
                     "job_status_3": "div_job_3",
                     "job_status_4": "div_job_4"
                  };

                  Object.keys(data).forEach(status => {
                     const divId = statusToDivMap[status];
                     const div = document.getElementById(divId);
                     if (data[status] && div) {
                        let count = 0; // Initialize a counter for each status
                        data[status].forEach(job => {
                           if (count >= 20) return; // Restrict to only 2 jobDivs

                           const jobDiv = document.createElement("div");
                           const {
                              sub_category_name,
                              client_first_name,
                              client_last_name,
                              client_profile_image,
                              schedule_date,
                              schedule_time,
                              project_address,
                              description,
                              hourly_rate,
                              sr_id,
                              id
                           } = job;

                           const calendarImg = "{{ asset('webAssets/assets/images/calender.svg') }}";
                           const clockImg = "{{ asset('webAssets/assets/images/clock-noun.svg') }}";
                           const locationImg = "{{ asset('webAssets/assets/images/location.svg') }}";
   
                           // var parts = schedule_date.split('-');
                           // var formattedDate1 = parts[1] + '-' + parts[2] + '-' + parts[0];

                           // var formattedDate = moment.utc(formattedDate1 + ' ' + schedule_time).format("ddd, MMM D, YYYY");
                           // var formattedTime = moment.utc(formattedDate1 + ' ' + schedule_time).local().format("h:mm A");
                  
                           var parts = schedule_date.split('-');
                           var formattedDate1 = parts[1] + '-' + parts[2] + '-' + parts[0];
                           

                           var formattedDate = new Date(parts[0], parts[1] - 1, parts[2]) // Month is 0-indexed in JS

                           var options = { month: 'short', day: '2-digit', year: 'numeric' };
                           var formattedDateStr = formattedDate.toLocaleDateString('en-US', options);

                           // Convert schedule_time (which is in HH:mm format) to 12-hour AM/PM format
                           var timeParts = schedule_time.split(':'); // ['13', '00']
                           var hours = parseInt(timeParts[0], 10); // 13
                           var minutes = timeParts[1]; // 00
                           var period = hours >= 12 ? 'PM' : 'AM';

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

                           // Format time as 01:00 PM (always with 2 digits for minutes)
                           var formattedTime = (hours < 10 ? '0' + hours : hours) + ':' + minutes + ' ' + period;

                           // Combine date and time
                           var formattedDate = formattedDateStr; // You can keep the original date or format it as needed

                           // console.log(formattedDate);  
                           // console.log(formattedTime); 


                           if ('job_status_0' == status) {
                              // New job // service-provider-project-details == replace to service-provider-scheduled-project
                              jobDiv.innerHTML = `
                                 <div class="project-linking project-link" style="cursor: pointer;" onclick="window.location.href='/service-provider-project-details/${id}'">
                                    <div class="project-header-item d-flex align-items-center">
                                       <h3 class="font-size-24 heading">${client_first_name} ${client_last_name.charAt(0)}.</h3>
                                       <p class="grey-color">#${sr_id}</p>
                                    </div>
                                    <div class="project-user-profile-item d-flex ser-profile">
                                       <img class="" src="${client_profile_image}" alt="">
                                       <div class="project-user-inner-item service-provider-inner d-flex flex-column">
                                          <div class="fav-img d-flex align-items-center">
                                             <a target="_blank" class="heading" href="/service-provider-project-details/${id}">${sub_category_name}</a>
                                          </div>
                                          <span class="action-block d-flex align-items-center justify-content-between">
                                             <div class="calender-items d-flex">
                                                <img class="halfMarginRight" src="${calendarImg}" alt="calender">
                                                <p> ${formattedDate}, ${formattedTime}</p>
                                             </div>
                                          </span>
                                          <p class="para font-size-18 costing blue-color fw-bold">$${hourly_rate}</p>
                                       </div>
                                    </div>
                                    <p class="para font-size-18">${description}</p>
                                 </div>
                              `;
                           } else if ('job_status_1' == status) {
                              // Accepted
                              jobDiv.innerHTML = `
                                 <div class="project-linking project-link" style="cursor: pointer;" onclick="window.location.href='/service-provider-scheduled-project/${id}'">
                                    <div class="project-header-item d-flex align-items-center">
                                       <h3 class="font-size-24 heading">${client_first_name} ${client_last_name.charAt(0)}.</h3>
                                       <p class="grey-color">#${sr_id}</p>
                                    </div>
                                    <div class="project-user-profile-item d-flex ser-profile">
                                       <img class="customImg" src="${client_profile_image}" alt="">
                                       <div class="project-user-inner-item service-provider-inner d-flex flex-column">
                                          <h3 class="heading">${sub_category_name}</h3>
                                          <div class="user-scheduled-time d-flex justify-content-between align-items-center">
                                             <span class="d-flex">
                                                <img src="${clockImg}" alt="clock">
                                                <p class="para">${formattedTime}</p>
                                             </span>
                                             <span class="d-flex align-items-center">
                                                <img class="halfMarginRight" src="${calendarImg}" alt="calender">
                                                <p>${formattedDate}</p>
                                             </span>
                                          </div>
                                          <div class="location-item d-flex">
                                             <div class="location-img-col">
                                                <img src="${locationImg}" alt="location">
                                             </div>
                                             <div class="location-text-col">
                                                <p class="para">${project_address}</p>
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                    <p class="para font-size-18">${description}</p>
                                 </div>
                              `;
                           } else if ('job_status_4' == status) {
                              // In Progress
                              jobDiv.innerHTML = `
                                 <div class="project-linking project-link" style="cursor: pointer;" onclick="window.location.href='/service-provider-scheduled-project/${id}'">
                                    <div class="project-header-item d-flex align-items-center">
                                       <h3 class="font-size-24 heading">${client_first_name} ${client_last_name.charAt(0)}.</h3>
                                       <p class="grey-color">#${sr_id}</p>
                                    </div>
                                    <div class="project-user-profile-item d-flex ser-profile">
                                       <img class="" src="${client_profile_image}" alt="">
                                       <div class="project-user-inner-item service-provider-inner d-flex flex-column">
                                          <h3 class="heading">${sub_category_name}</h3>
                                          <div class="user-scheduled-time d-flex justify-content-between align-items-center">
                                             <span class="d-flex">
                                                <img src="${clockImg}" alt="clock">
                                                <p class="para">${formattedTime}</p>
                                             </span>
                                             <span class="d-flex align-items-center">
                                                <img class="halfMarginRight" src="${calendarImg}" alt="calender">
                                                <p>${formattedDate}</p>
                                             </span>
                                          </div>
                                          <div class="location-item d-flex">
                                             <div class="location-img-col">
                                                <img src="${locationImg}" alt="location">
                                             </div>
                                             <div class="location-text-col">
                                                <p class="para">${project_address}</p>
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                    <p class="para font-size-18">${description}</p>
                                 </div>
                              `;
                           }

                           div.appendChild(jobDiv);
                           count++; // Increment the counter
                        });
                     }
                  });

               } else if (response.status == 401) {
                  // Handle Unauthorized Error
               }
            },
            error: function(xhr, status, error) {
               toastr.error('There was some problem.');
            }
         });
      }
   });
</script>
@endsection