@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>

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

        </div>
    </section>

    <section class="dashboard-main">
        <div class="container">
            <div class="row">
                @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>
                            </div>
                        </ul>
                        <!--Block: Current Jobs Start-->
                        <div class="project-block" id="block-current-job"></div>
                        <!--Block: Current Jobs End-->
                        <div class="pagination-controls d-flex justify-content-center align-items-center">
                            <button id="prev-page" class="btn btn-secondary" disabled>Previous</button>
                            <span id="page-info" class="mx-3"></span>
                            <button id="next-page" class="btn btn-secondary">Next</button>
                        </div>

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

<script>
    $(document).ready(function(){
        let currentPage = 1;
        const itemsPerPage = 2;
        let totalItems = 0;
        let totalPages = 0;

        get_current_job();

        $("#current-btn").click(function(){
            currentPage = 1;
            get_current_job();
            toggleButtons($(this), $("#completed-btn"));
            toggleBlocks($("#block-current-job"), $("#block-completed-job"));
        });

        $("#completed-btn").click(function(){
            get_completed_job();
            toggleButtons($(this), $("#current-btn"));
            toggleBlocks($("#block-completed-job"), $("#block-current-job"));
        });

        $("#prev-page").click(function() {
            if (currentPage > 1) {
                currentPage--;
                get_current_job();
            }
        });

        $("#next-page").click(function() {
            if (currentPage < totalPages) {
                currentPage++;
                get_current_job();
            }
        });

        function toggleButtons(activeBtn, inactiveBtn) {
            activeBtn.addClass("btn-primary").removeClass("btn-secondary");
            inactiveBtn.removeClass("btn-primary").addClass("btn-secondary");
        }

        function toggleBlocks(activeBlock, inactiveBlock) {
            activeBlock.show();
            inactiveBlock.hide();
        }

        function renderPage(data, page) {
            const jobBlock = document.getElementById('block-current-job');
            jobBlock.innerHTML = ''; // Clear existing content
            const start = (page - 1) * itemsPerPage;
            const end = start + itemsPerPage;
            const items = data.slice(start, end);

            items.forEach(d => {
                var tempDiv = document.createElement('div');
                const {category_name,category_rate,description,id,job_status,profile_sp,schedule_date,schedule_time,service_provider,slot_time,time,sr_id,address} = data;
                const calendarImg = "{{ asset('webAssets/assets/images/calender.svg') }}";
                const tickImg = "{{ asset('webAssets/assets/images/sm-tick.svg') }}";
                const declineImg = "{{ asset('webAssets/assets/images/sm-decline.svg') }}";
                const locationImg = "{{ asset('webAssets/assets/images/location.svg') }}";
                const clockImg = "{{ asset('webAssets/assets/images/clock-noun.svg') }}";
                tempDiv.innerHTML = `<div class="project-block-item">
                    <a class="project-linking" href="">
                        <div class="project-header-item d-flex align-items-center">
                            <h3 class="font-size-24">${d.service_provider}</h3>
                            <p class="grey-color font-size-18">#${d.sr_id}</p>
                        </div>
                        <div class="project-user-profile-item d-flex">
                            <img src="${d.profile_sp}" alt="">
                            <div class="project-user-inner-item d-flex flex-column">
                                <h3 class="heading">${d.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">${d.schedule_time}</p></span>
                                    <span class="d-flex align-items-center">
                                        <img class="halfMarginRight" src="${calendarImg}" alt="calendar"><p>${d.schedule_date}</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>
                            </div>
                        </div>
                        <p class="para font-size-18">${d.description}</p>
                    </a>
                </div>`;
                var newElement = tempDiv.firstChild;
                jobBlock.appendChild(newElement);
            });

            $("#page-info").text(`Page ${currentPage} of ${totalPages}`);
            $("#prev-page").prop('disabled', currentPage === 1);
            $("#next-page").prop('disabled', currentPage === totalPages);
        }

        function handlePagination(data) {
            totalItems = data.length;
            totalPages = Math.ceil(totalItems / itemsPerPage);
            renderPage(data, currentPage);
        }

        function get_current_job() {
            $.ajax({
                url: "{{ route('sp.getCurrentJobs') }}",
                method: 'GET',
                success: function(response) {
                    if (response.status == 200) {
                        handlePagination(response.data);
                    } else if (response.status == 401) {
                    }
                },
                error: function(xhr, status, error) {
                    toastr.error('There was some problem.');
                }
            });
        }

        function get_completed_job() {
            $.ajax({
                url: "{{ route('sp.getCompletedJobs') }}",
                method: 'GET',
                success: function(response) {
                    if (response.status == 200) {
                        handleData(response.data);
                    } else if (response.status == 401) {
                    }
                },
                error: function(xhr, status, error) {
                    toastr.error('There was some problem.');
                }
            });
        }

        function handleData(data){
            const jobBlock = document.getElementById('block-completed-job');
            data.forEach(d => {
                var tempDiv = document.createElement('div');
                const {category_name,category_rate,description,id,job_status,profile_sp,schedule_date,schedule_time,service_provider,slot_time,time,sr_id,address} = data;
                const calendarImg = "{{ asset('webAssets/assets/images/calender.svg') }}";
                const tickImg = "{{ asset('webAssets/assets/images/sm-tick.svg') }}";
                const declineImg = "{{ asset('webAssets/assets/images/sm-decline.svg') }}";
                const locationImg = "{{ asset('webAssets/assets/images/location.svg') }}";
                const clockImg = "{{ asset('webAssets/assets/images/clock-noun.svg') }}";
                tempDiv.innerHTML = `<div class="project-block-item">
                    <a class="project-linking" href="">
                        <div class="project-header-item d-flex align-items-center">
                            <h3 class="font-size-24">${d.service_provider}</h3>
                            <p class="grey-color font-size-18">#${d.sr_id}</p>
                        </div>
                        <div class="project-user-profile-item d-flex">
                            <img src="${d.profile_sp}" alt="">
                            <div class="project-user-inner-item d-flex flex-column">
                                <h3 class="heading">${d.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">${d.schedule_time}</p></span>
                                    <span class="d-flex align-items-center">
                                        <img class="halfMarginRight" src="${calendarImg}" alt="calendar"><p>${d.schedule_date}</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>
                            </div>
                        </div>
                        <p class="para font-size-18">${d.description}</p>
                    </a>
                </div>`;
                var newElement = tempDiv.firstChild;
                jobBlock.appendChild(newElement);
            });
        }
    });
</script>
@endsection