@extends("website.layouts.layout")
@section('title',"Past Projects")
@section("body")
<!--Banner-->
<!-- banner background image starts -->
<section class="banner-services">
    <img class="banner-background-ellipse" src="./assets/images/banner-bg-img.png" alt="">
</section>
<!--- services section -->
<section class="services-breadcrumb-section dashboard-breadcrumb">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{route('homepage')}}">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Completed Project</li>
            </ol>
        </nav>

    </div>
</section>
<section class="dashboard-main">
    <div class="container">
        <!-- <img src="./assets/images/hamburger-menu.svg" alt="hamburger-icon" width="30" class="hamburger-icon"> -->
        <div class="row sidebar_row">
            @include("website.clients.includes.sidebar")
            <div class="main-content">
                <div class="main-content-wrapper lg-width 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-secondary  past" href="{{route('client.myAccount')}}">Current </a></li>
                            <li><a type="button" class="btn btn-primary current" href="{{route('client.pastProjects')}}">Completed</a></li>
                            <li><a type="button" class="btn btn-secondary  past" href="{{route('client.cancelJobWeb')}}">Cancelled</a></li>
                        </div>
                    </ul>
                    <div class="project-block scrollable-project-block">
                        @if(isset($jobs['success']['job_status_2']) && empty(!$jobs['success']['job_status_2']) || isset($jobs['success']['job_status_3']) && empty(!$jobs['success']['job_status_3']) )
                        @foreach($jobs['success']['job_status_2'] as $job)
                        <div class="project-block-item">
                            <div class="project-linking project-link">
                                <a class="" href="{{route('client.completeProjectDetails',$job['task_id'])}}">
                                    <div class="project-header-item d-flex align-items-center ">
                                    @php
                                        $serviceProvider = trim($job['service_provider']);
                                        $nameParts = explode(' ', $serviceProvider);
                                        $firstName = $nameParts[0];
                                        $lastNameInitial = isset($nameParts[1]) ? strtoupper($nameParts[1][0]) : '';
                                        $displayName = $firstName . ' ' . $lastNameInitial;
                                    @endphp

                                    <h3 class="heading">{{ $displayName }}</h3>
                                    <p class="para sr-no">#{{$job['project_id']}}</p>
                                        <!-- <p class="para-text">$ {{$job['category_rate']}}</p> -->
                                    </div>                        
                                    <div class="project-user-profile-item ser-profile d-flex">
                                        <img src="{{$job['profile_sp']}}" alt="">
                                        <div class="project-user-inner-item d-flex flex-column">
                                        <h3 class="heading-text" style="color: #0d6efd;">{{$job['category_name']}}</h3>
                                        <h3 class="heading-text">{{$job['sub_category_name']}}</h3>                               
                                        <span class="d-flex "><img src="{{asset('webAssets/assets/images/ic_round-star.svg')}}"
                                                        alt="clock">
                                                        <p class="para sr-no">{{$job['rating']}} rating</p>
                                                </span>                           
                                            <div
                                                class="user-scheduled-time d-flex gap-3 align-items-center">
                                                <span class="d-flex "><img src="{{asset('webAssets/assets/images/clock-noun.svg')}}"
                                                        alt="clock">
                                          
                                                    <p class="para para_time" data-utc-time="{{ $job['schedule_time'] }}"></p>
                                                </span>
                                                <span class="d-flex gap-2 align-items-center"><img
                                                        src="{{asset('webAssets/assets/images/calender.svg')}}" class="ml-2" alt="calender">
                                                    <p>{{date('D-M-d-Y', strtotime($job['schedule_date']))}}</p>
                                                </span>
                                            </div>
                                            <div
                                                class="user-scheduled-time d-flex  align-items-center">
                                               
                                                <!-- <span class="d-flex align-items-center"><img
                                                        src="{{asset('webAssets/assets/images/uit_calender.png')}}" class="ml-2" alt="calender"> -->
                                                     <span color="grey-color" style="color:grey">$</span>   
                                                     <p>{{$job['total']}} (Total Invoiced)</p>
                                                </span>                                                
                                            </div>
                                        </div>
                                    </div>
                                    <p class="para">{{$job['description']}}</p>
                                </a>                          
        
                                @if($job['tip_status'] == '0' &&  $job['rating_status'] == '0')
                                <button type="button" class="btn btn-secondary fw-light mt-3" data-bs-toggle="modal"
                                    data-bs-target="#reviewTip{{$job['task_id']}}">
                                    Review & Tip
                                </button>
                                @elseif($job['no_tip'] == '0' && $job['tip_status'] == '0')
                                <button type="button" class="btn btn-secondary fw-light" data-bs-toggle="modal"
                                    data-bs-target="#reviewTipTwo{{$job['task_id']}}">
                                     Tip
                                </button>
                                @endif
                            </div>
                        </div>
                       <div class="modal fade tip-review" id="reviewTip{{$job['task_id']}}" tabindex="-1" aria-labelledby="reviewtip{{$job['task_id']}}Label" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content review-tip-content">
                                    <div class="modal-header review-tip-header">
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body review-tip-body d-flex flex-column gap-16px">
                                        <form id="reviewForm{{$job['task_id']}}" method="POST">
                                        @php
                                            $serviceProvider = trim($job['service_provider']);
                                            $nameParts = explode(' ', $serviceProvider);
                                            $firstName = $nameParts[0];
                                            $lastNameInitial = isset($nameParts[1]) ? strtoupper($nameParts[1][0]) : '';
                                            $displayName = $firstName . ' ' . $lastNameInitial;
                                        @endphp

                                        <div class="review-tipbody-items d-flex flex-column gap-4px">
                                            <h3 class="head text-center font-size-16">  
                                                Rate {{ $displayName }}
                                            </h3>
                                            <p class="para text-center">
                                                Rate {{ $displayName }} according to your Project completion experience.
                                            </p>
                                        </div>
                                            <div class="review-comment-section">
                                                <div class="comment-header d-flex justify-content-center gap-8px">
                                                    <div class="comment-text-col">
                                                        <div class="star-rating review-tip d-flex gap-8px">
                                                            <!-- You might want to adjust this part based on how your star rating works -->
                                                            <input id="reviewTip1{{$job['task_id']}}" type="radio" name="stars" value="1" />
                                                            <label for="reviewTip1{{$job['task_id']}}" class="multi-star" title="1 stars">
                                                                <i class="fa fa-star" aria-hidden="true"></i>
                                                            </label>
                                                            <input id="reviewTip2{{$job['task_id']}}" type="radio" name="stars" value="2" />
                                                            <label for="reviewTip2{{$job['task_id']}}" class="multi-star" title="2 stars">
                                                                <i class="fa fa-star" aria-hidden="true"></i>
                                                            </label>
                                                            <input id="reviewTip3{{$job['task_id']}}" type="radio" name="stars" value="3" />
                                                            <label for="reviewTip3{{$job['task_id']}}" class="multi-star" title="3 stars">
                                                                <i class="fa fa-star" aria-hidden="true"></i>
                                                            </label>
                                                            <input id="reviewTip4{{$job['task_id']}}" type="radio" name="stars" value="4" />
                                                            <label for="reviewTip4{{$job['task_id']}}" class="multi-star" title="4 stars">
                                                                <i class="fa fa-star" aria-hidden="true"></i>
                                                            </label>
                                                            <input id="reviewTip5{{$job['task_id']}}" type="radio" name="stars" value="5" />
                                                            <label for="reviewTip5{{$job['task_id']}}" class="multi-star" title="5 star">
                                                                <i class="fa fa-star" aria-hidden="true"></i>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="comments-block">
                                                <label for="tipArea{{$job['task_id']}}" class="form-label">Comment</label>
                                                <textarea class="form-control" id="tipArea{{$job['task_id']}}" name="review" rows="3"></textarea>
                                            </div>
                                            <input type="hidden" name="client_id" value="{{$job['client_id']}}">
                                            <input type="hidden" name="sp_id" value="{{$job['service_provider_id']}}">
                                            <input type="hidden" name="ctg_id" value="{{$job['category_id']}}">
                                            <input type="hidden" name="task_id" value="{{$job['task_id']}}">
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-primary w-100 submit-review" data-task-id="{{$job['task_id']}}">Submit</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                            <!-- Review Tip Modal 2 -->

                        <div class="modal fade  tip-review" id="reviewTipTwo{{$job['task_id']}}" tabindex="-1" aria-labelledby="reviewtipLabel"
                            aria-hidden="true">
                            <div class="modal-dialog ">
                            <form id="tipForm{{$job['task_id']}}" method="POST">
                                <div class="modal-content review-tip-content gap-12px">
                                    <div class="modal-header review-tip-header">
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body review-tip-body d-flex flex-column gap-16px">
                                        <div class="review-tipbody-items d-flex flex-column gap-4px">
                                            <h3 class="head text-center font-size-16">Do you want Give Tip to {{ $displayName }} </h3>
                                            <p class="para text-center">Tip {{ $displayName }} according to your Project completion Experience</p>
                                        </div>
                                        <div class="service-provider-select">
                                            <div class="select">
                                                <h6 class="heading">Tip</h6>
                                                <select name="tip_amount" class="form-select form-select-lg mb-3" aria-label="Large select example" data-task-id="{{$job['task_id']}}" onchange="manualTip('{{$job['task_id']}}')">
                                                    <option value="">Select here </option>
                                                    <option value="10">10%</option>
                                                    <option value="20">20% </option>
                                                    <option value="30">30%</option>
                                                    <option value="manual">Add Manually</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="tip-block{{$job['task_id']}}" style="display: none;">
                                            <label for="tipArea{{$job['task_id']}}" class="form-label">Enter Tip Amount</label>
                                            <input type="text" class="form-control" id="tipamount{{$job['task_id']}}" name="amount">
                                        </div>
                                    </div>
                                        <input type="hidden" name="client_task_id" value="{{$job['task_id']}}">
                                        <input type="hidden" class="text-bold totalValue{{$job['task_id']}}" name="totalamount" value="{{$job['total']}}">
                                        <input type="hidden" class="text-bold totalTipPay{{$job['task_id']}}" name="totalTipPay" value="">
                                        <input type="hidden" class="text-bold tipamountPay{{$job['task_id']}}" name="tipamountPay" value="">
                                        <input type="hidden" class="text-bold stripeFeePay{{$job['task_id']}}" name="stripeFeePay" value="">
                                        <input type="hidden" name="stripe_provider_account_id" value="{{$job['stripe_provider_account_id']}}">
                                        <input type="hidden" name="stripe_client_id" value="{{$job['stripe_client_id']}}">
                                        <div> 
                                            Tip of 
                                            <span class="fw-bold">$</span>
                                            <span class="fw-bold tipValue{{$job['task_id']}}">0</span> 
                                            <span class="stripeFeeText{{$job['task_id']}}">+ $0.00 stripe fee</span>
                                            will be add to your balance. 
                                        </div>

                                    <div class="modal-footer d-flex gap-4px review-tip-action-btn justify-content-between">
                                        <button type="button" data-task-id="{{$job['task_id']}}" class="btn btn-secondary nevermindpaySubmit">Never mind</button>
                                        <button type="button" data-task-id="{{$job['task_id']}}" class="btn btn-primary paytipSubmit totalTipText{{$job['task_id']}}">Pay</button>
                                    </div>                                    
                                </div>
                            </form>
                            </div>
                        </div>

                        @endforeach
                      
                        @else
                        <div class="project-block-item">
                            <p>No Past jobs available.</p>
                        </div>
                        @endif
                    </div>
                </div>

            </div>

        </div>
    </div>
</section>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    const cardData = null;
    // console.log(cardData);
    function manualTip(taskId) {
        const selectElement = document.querySelector(`select[name="tip_amount"][data-task-id="${taskId}"]`);
        const tipBlock = document.querySelector(`.tip-block${taskId}`);
        const tipValue = document.querySelector(`.tipValue${taskId}`);
        const totalValue = document.querySelector(`.totalValue${taskId}`);
        const stripeFeeText = document.querySelector(`.stripeFeeText${taskId}`);
        const totalTipText = document.querySelector(`.totalTipText${taskId}`);
        const totalTipPay = document.querySelector(`.totalTipPay${taskId}`);

        if (stripeFeeText) stripeFeeText.textContent = '+ $0.00 stripe fee';
        if (totalTipText) totalTipText.textContent = 'Pay';
        if (totalTipPay) totalTipPay.value = '';
        tipValue.textContent = 0;

        if (selectElement.value) {
            const tipAmount = parseFloat(selectElement.value);
            const totalAmount = parseFloat(totalValue.value);
            if (selectElement.value === 'manual') {
                tipBlock.style.display = 'block';
                $('input[name="amount"]').on('input', function() {
                    this.value = this.value.replace(/[^0-9.]/g, '');
                    if (this.value.indexOf('.') !== -1) {
                        this.value = this.value.replace(/^(\d*\.\d{0,2}).*/, '$1');
                    }
                    let amount = parseFloat(this.value);
                    if (isNaN(amount) || this.value === '') {
                        tipValue.textContent = 0;
                    } else {
                        let formattedValue = amount.toFixed(2);
                        tipValue.textContent = formattedValue;
                        showEstimatedStripeFee(taskId);
                    }
                });
            } else {
                tipBlock.style.display = 'none'; 
                if (!isNaN(tipAmount) && !isNaN(totalAmount) && totalAmount !== 0) {
                    const tipPercentage = (tipAmount * totalAmount) / 100;
                    tipValue.textContent = `${tipPercentage.toFixed(2)}`;
                    showEstimatedStripeFee(taskId);
                } else {
                    tipValue.textContent = 'Invalid values';
                    console.error('Invalid number values for tip or total.');
                }
            }
            let cardBlock = document.querySelector(`.card-block${taskId}`);
            if (!cardBlock) {
                cardBlock = document.createElement('div');
                cardBlock.className = `card-block${taskId}`;
                cardBlock.style.display = 'block'; // Show the card block
                cardData.forEach(card => {
                    const cardItem = document.createElement('div');
                    cardItem.className = 'payment-body-items d-flex justify-content-between align-items-center mb-2';

                    const cardSelectRadio = document.createElement('div');
                    cardSelectRadio.className = 'card-select-radio d-flex gap-8px flex-grow-1';

                    const inputRadio = document.createElement('input');
                    inputRadio.className = 'payment-option';
                    inputRadio.type = 'radio';
                    inputRadio.name = 'payment_method_id';
                    inputRadio.id = card.card_id;
                    inputRadio.value = card.payment_method_id;

                    const paymentBodyActionBtn = document.createElement('div');
                    paymentBodyActionBtn.className = 'payment-body-action-btn d-flex gap-12px align-items-center justify-content-between w-100';

                    const cardInfo = document.createElement('p');
                    cardInfo.className = 'grey-color';
                    cardInfo.textContent = `${card.brand} XXXX ${card.last4}`;

                    const cardInnerPaymentDetails = document.createElement('div');
                    cardInnerPaymentDetails.className = 'card-inner-payment-deatils d-flex gap-12px ';

                    const expDate = document.createElement('p');
                    expDate.className = 'grey-color';
                    expDate.textContent = `${card.exp_month} / ${card.exp_year}`;

                    const cvv = document.createElement('p');
                    cvv.className = 'grey-color';
                    cvv.textContent = 'CVV';
                    inputRadio.addEventListener('change', () => {
                        showEstimatedStripeFee(taskId);
                    });
                    // Assemble the card item
                    cardInnerPaymentDetails.appendChild(expDate);
                    cardInnerPaymentDetails.appendChild(cvv);
                    paymentBodyActionBtn.appendChild(cardInfo);
                    paymentBodyActionBtn.appendChild(cardInnerPaymentDetails);
                    cardSelectRadio.appendChild(inputRadio);
                    cardSelectRadio.appendChild(paymentBodyActionBtn);
                    cardItem.appendChild(cardSelectRadio);
                    cardBlock.appendChild(cardItem);
                });
                tipBlock.parentNode.insertBefore(cardBlock, tipBlock.nextSibling);
            } else {
                cardBlock.style.display = 'block'; 
            }
        } else {
            const cardBlock = document.querySelector(`.card-block${taskId}`);
            if (cardBlock) {
                cardBlock.style.display = 'none';
            }
            tipBlock.style.display = 'none'; 
        }
    }
    function showEstimatedStripeFee(taskId) {
        const selectedCardRadio = document.querySelector(`input[name="payment_method_id"]:checked`);
        const selectedCard = cardData.find(card => card.payment_method_id === selectedCardRadio?.value);
        const tipValue = parseFloat(document.querySelector(`.tipValue${taskId}`).textContent) || 0;
        const totalTipPay = document.querySelector(`.totalTipPay${taskId}`);
        const stripeFeePay = document.querySelector(`.stripeFeePay${taskId}`);
        const tipamountPay = document.querySelector(`.tipamountPay${taskId}`);


        // console.log('tipValue',tipValue);
        if (selectedCard && !isNaN(tipValue)) {
            const brand = selectedCard.brand.toUpperCase();
            const isInternational = selectedCard.isInternational;

            // const estimatedFee = estimateStripeFee(tipValue, brand, isInternational);
            const { totalWithFees, stripeFee } = estimateStripeFee(tipValue, brand, isInternational);
            console.log(totalWithFees,stripeFee);

            const stripeFeeText = document.querySelector(`.stripeFeeText${taskId}`);
            if (stripeFeeText) {
                stripeFeeText.textContent = `+ $${stripeFee.toFixed(2)} stripe fee`;
            }
            const totalTipText = document.querySelector(`.totalTipText${taskId}`);
            if (totalTipText) {
                totalTipText.textContent = `Pay $${(totalWithFees).toFixed(2)}`;
            }
            if (totalTipPay) {
                totalTipPay.value = (totalWithFees).toFixed(2);
                console.log('totalTipPay',totalTipPay.value);
                tipamountPay.value = tipValue.toFixed(2);
                stripeFeePay.value = stripeFee.toFixed(2);
            }
        }
    }
    function estimateStripeFee(amount, brand, isInternational) {
        const fixedFee = 0.30;
        let percentage;
        if (isInternational) {
            percentage = 0.039; // 3.9% for international cards (any brand)
        } else if (brand.toLowerCase() === 'amex') {
            percentage = 0.035; // 3.5% for domestic Amex
        } else {
            percentage = 0.029; // 2.9% for domestic non-Amex
        }
         const totalWithFees = (amount + fixedFee) / (1 - percentage);
        const stripeFee = totalWithFees - amount;
        console.log('percentage', percentage, 'amount', amount,'fixedFee',fixedFee,'total',totalWithFees,'stripeFee',stripeFee);
        return {
            totalWithFees: parseFloat(totalWithFees.toFixed(2)),
            stripeFee: parseFloat(stripeFee.toFixed(2))
        };
        // return parseFloat((amount * percentage + fixedFee).toFixed(2));
    }



    document.querySelectorAll('.star-rating input').forEach((input) => {
        input.addEventListener('change', function() {
            const stars = this.parentElement.querySelectorAll('label .fa-star');
            stars.forEach((star, index) => {
                if (index < this.value) {
                    star.style.color = 'gold'; // Fill color
                } else {
                    star.style.color = '#ccc'; // Unfilled color
                }
            });
        });
    });

    $(document).ready(function() {
    // Loop through each '.para' element
    $('.para_time').each(function() {
        // Get the UTC time stored in the data attribute
        var utcTime = $(this).data('utc-time');
        
        // Convert the UTC time to local time using moment.js
      //  var localTime = moment.utc(utcTime, "HH:mm:ss").local().format('LT'); // 'LT' for localized time format
        var localTime = utcTime;
        // Update the text of the paragraph to the local time
        $(this).text(localTime);
    });
});
document.addEventListener('DOMContentLoaded', function () {
    // Select all modals with ID prefix "reviewTipTwo"
    document.querySelectorAll('[id^="reviewTipTwo"]').forEach(modal => {
        modal.addEventListener('shown.bs.modal', function () {
            const taskId = this.id.replace('reviewTipTwo', '');
            
            const stripeFeeText = document.querySelector(`.stripeFeeText${taskId}`);
            const totalTipText = document.querySelector(`.totalTipText${taskId}`);
            const totalTipPay = document.querySelector(`.totalTipPay${taskId}`);
            const tipValue = document.querySelector(`.tipValue${taskId}`);
            const manualInput = this.querySelector('input[name="amount"]');
            const tipSelect = document.querySelector(`select[name="tip_amount"][data-task-id="${taskId}"]`);

            if (stripeFeeText) stripeFeeText.textContent = '+ $0.00 stripe fee';
            if (totalTipText) totalTipText.textContent = 'Pay';
            if (totalTipPay) totalTipPay.value = '';
            if (tipValue) tipValue.textContent = '0';
            if (manualInput) manualInput.value = '';
            if (tipSelect) tipSelect.value = ''; // Reset dropdown
        });
    });
});

</script>

@endsection
@section('footerItems')
@endsection