@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') }}">
<!-- banner background image starts -->
<section class="banner-services">
    <img class="banner-background-ellipse" src="./assets/images/banner-bg-img.png" alt="">
</section>
<style>
    .cancelled-job {
        color: red;
        text-align: center;
        font-size: 16px;
        font-weight: bolder;
    }
    .ongoing-job {
        color: #0d6efd;
        text-align: center;
        font-size: 16px;
        font-weight: bolder;
        border: 1px solid;
        padding: 5px;
    }
</style>
<!--- 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">My Project</li>
                <li class="breadcrumb-item active" aria-current="page" id="breadcrumId">Current</li>
            </ol>
        </nav>
    </div>
</section>

<section class="dashboard-main">
    <div class="container">
        <div class="row">
            @include("website.service-providers.includes.sidebar")
            @include("website.layouts.modal")
            <div class="main-content">
                <div class="main-content-wrapper lg-width my-current-project">
                    <h3 class="heading-text">My Projects</h3>
                    <ul class="nav-buttons d-flex">
                        <div class="ul-action-btn d-flex flex-wrap">
                            <li>
                                <a type="button" class="btn btn-primary past" id="current-btn">Current</a>
                            </li>
                            <li>
                                <a type="button" class="btn btn-secondary past" id="completed-btn">Completed</a>
                            </li>
                            <li>
                                <a type="button" class="btn btn-secondary past" id="cancelled-btn">Cancelled</a>
                            </li>
                        </div>
                    </ul>
                    <!-- Block: Current Jobs Start -->
                    <div class="project-block scrollable-project-block" id="block-current-job"></div>
                    <!-- Block: Current Jobs End -->

                    <!-- Block: Completed Jobs Start -->
                    <div class="project-block scrollable-project-block" id="block-completed-job" style="display:none"></div>
                    <!-- Block: Completed Jobs End -->

                    <!-- Block: Cancelled Jobs Start -->
                    <div class="project-block scrollable-project-block" id="block-cancelled-job" style="display:none"></div>
                    <!-- Block: Cancelled Jobs End -->
                </div>
            </div>
        </div>
    </div>
</section>

<script>
$(document).ready(function () {
    get_current_job();

    // Click on "Current" button
    $("#current-btn").click(function () {
        get_current_job();
        toggleButtons($(this), $("#completed-btn"));
        toggleButtons($(this), $("#cancelled-btn"));
        toggleBlocks($("#block-current-job"), $("#block-completed-job"));
        toggleBlocks($("#block-current-job"), $("#block-cancelled-job"));
        $('#breadcrumId').text('Current');
    });

    // Click on "Completed" button
    $("#completed-btn").click(function () {
        get_completed_job();
        toggleButtons($(this), $("#current-btn"));
        toggleButtons($(this), $("#cancelled-btn"));
        toggleBlocks($("#block-completed-job"), $("#block-current-job"));
        toggleBlocks($("#block-completed-job"), $("#block-cancelled-job"));
        $('#breadcrumId').text('Complete');
    });

    // Click on "Cancelled" button
    $("#cancelled-btn").click(function () {
        get_cancelled_job();
        toggleButtons($(this), $("#current-btn"));
        toggleButtons($(this), $("#completed-btn"));
        toggleBlocks($("#block-cancelled-job"), $("#block-current-job"));
        toggleBlocks($("#block-cancelled-job"), $("#block-completed-job"));
        $('#breadcrumId').text('Cancelled');
    });

    // Toggle buttons active state
    function toggleButtons(activeBtn, inactiveBtn) {
        activeBtn.addClass("btn-primary").removeClass("btn-secondary");
        inactiveBtn.removeClass("btn-primary").addClass("btn-secondary");
    }

    // Toggle blocks visibility
    function toggleBlocks(activeBlock, inactiveBlock) {
        activeBlock.show();
        inactiveBlock.hide();
    }

    // Render the page with data for current, completed, or cancelled jobs
    function renderPage(data, block) {
        const jobBlock = document.getElementById(block);
        jobBlock.innerHTML = ''; // Clear existing content

        data.forEach(d => {
            var tempDiv = document.createElement('div');
            const {
                group_name,
                category_name,
                category_rate,
                description,
                id,
                job_status,
                ongoing_job,
                profile_sp,
                schedule_date,
                schedule_time,
                service_provider,
                slot_time,
                time,
                sr_id,
                address,
                total
            } = d;

            let pageurl = "";
            if (block === 'block-current-job') {
                pageurl = d.job_status == '0' ? "/service-provider-project-details/" : "/service-provider-scheduled-project/";
            } else if (block === 'block-completed-job') {
                pageurl = "/service-provider-complete-project-details/";
            } else if (block === 'block-cancelled-job') {
                pageurl = "/service-provider-cancel-project-details/";
            }

            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') }}";
            const url = pageurl + d.id;
            let cancelledjob = '';
            let ongoingjob = '';
            let total_invoiced = '';
            if (d.job_status == '3') {
                cancelledjob = `
                    <div class="cancelled-job-action d-flex ">
                        <p class="para-text cancelled-job font-size-16" style="color: red;">Job Cancelled</p>
                    </div>`;
            }
            if (d.ongoing_job == '1' && d.job_status != '2') {
                ongoingjob = `
                    <div class="cancelled-job-action d-flex justify-content-end ">
                        <p class="para-text ongoing-job font-size-16">Ongoing Job</p>
                    </div>`;
            }
            if (d.job_status == '2') {
                total_invoiced = `<p class="font-size-16">$${d.total} (Total Invoiced)</p>`;
            }
            let dateObj = new Date(d.schedule_date);
            let timeParts = d.schedule_time.split(':'); // ['13', '00', '00']
            let hours = parseInt(timeParts[0], 10); // 13
            let minutes = timeParts[1]; // 00
            let period = hours >= 12 ? 'PM' : 'AM';
            if (hours > 12) {
                hours -= 12;
            } else if (hours === 0) {
                hours = 12;
            }

            let formattedTime = hours + ':' + minutes + ' ' + period;
            var parts = d.schedule_date.split('-'); 
            var formattedDate1 = parts[1] + '-' + parts[2] + '-' + parts[0]; 
            var formattedDate = formattedDate1;

            console.log(d.id,formattedTime);
            tempDiv.innerHTML = `<div class="project-block-item">
                <a class="project-linking project-link" href="${url}">
                    <div class="project-header-item d-flex align-items-center">
                        <h3 class="font-size-24">${getFirstNameAndInitial(d.service_provider)}</h3>
                        <p class="grey-color font-size-18">#${d.sr_id}</p>
                    </div>
                    <div class="project-user-profile-item d-flex ser-profile">
                        <img src="${d.profile_sp}" alt="">
                        <div class="project-user-inner-item d-flex flex-column">
                            ${ongoingjob}
                            <h5 class="heading-text">${d.group_name}</h5>
                            <h3 class="heading-text blue-color">${d.category_name}</h3>
                            <div class="user-scheduled-time">
                                <span class="d-flex gap-3 align-items-center">
                                    <img class="halfMarginRight" src="${calendarImg}" alt="calendar">
                                    <p>${formattedDate}</p>
                                    <img src="${clockImg}" alt="clock">
                                    <p class="para">${formattedTime}</p>
                                </span>
                            </div>
                            <div class="loc d-flex align-items-center">
                                <img class="halfMarginRight" src="${locationImg}" alt="location">
                                <p class="paragraph">${d.address}</p>
                            </div>
                            ${cancelledjob}
                            ${total_invoiced}
                        </div>
                    </div>
                    <p class="para font-size-18">${d.description}</p>
                </a>
            </div>`;

            var newElement = tempDiv.firstChild;
            jobBlock.appendChild(newElement);
        });
    }

    // Get cancelled jobs from the server
    function get_cancelled_job() {
        $.ajax({
            url: "{{ route('sp.getCancelledJobs') }}",
            method: 'GET',
            success: function (response) {
                if (response.status == 200) {
                    renderPage(response.data, 'block-cancelled-job');
                }
            },
            error: function (xhr, status, error) {
                toastr.error('There was some problem.');
            }
        });
    }

    // Function to get current jobs
    function get_current_job() {
        $.ajax({
            url: "{{ route('sp.getCurrentJobs') }}",
            method: 'GET',
            success: function (response) {
                if (response.status == 200) {
                    renderPage(response.data, 'block-current-job');
                }
            },
            error: function (xhr, status, error) {
                toastr.error('There was some problem.');
            }
        });
    }

    // Function to get completed jobs
    function get_completed_job() {
        $.ajax({
            url: "{{ route('sp.getCompletedJobs') }}",
            method: 'GET',
            success: function (response) {
                if (response.status == 200) {
                    renderPage(response.data, 'block-completed-job');
                }
            },
            error: function (xhr, status, error) {
                toastr.error('There was some problem.');
            }
        });
    }

    function getFirstNameAndInitial(fullName) {
        const nameParts = fullName.split(' ');
        const firstName = nameParts[0];
        const lastNameInitial = nameParts.length > 1 ? nameParts[1].charAt(0) + '.' : '';
        return `${firstName} ${lastNameInitial}`;
    }
});
</script>
@endsection