@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"><a href="{{ route('profile.achievement') }}">My Business</a></li>
                <li class="breadcrumb-item active" aria-current="page">Income Details</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 achievement-income">

                    <!-- Month and Year Selection Section -->
                    <div class="month-year-selection">
                        <form id="date-filter-form" method="GET" action="{{ url()->current() }}">
                            <div class="d-flex gap-2">
                                <select name="month" id="month" class="form-select">
                                    @foreach(range(1, 12) as $m)
                                    <option value="{{ $m }}" {{ request('month', date('m')) == $m ? 'selected' : '' }}>
                                        {{ \Carbon\Carbon::create()->month($m)->format('F') }}
                                    </option>
                                    @endforeach
                                </select>

                                <select name="year" id="year" class="form-select">
                                    @foreach(range(date('Y') - 5, date('Y') + 5) as $y)
                                    <option value="{{ $y }}" {{ request('year', date('Y')) == $y ? 'selected' : '' }}>
                                        {{ $y }}
                                    </option>
                                    @endforeach
                                </select>

                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </form>
                    </div>
                    <!-- End Month and Year Selection Section -->

                    <div class="achievement-header-items d-flex justify-content-between align-items-center">
                        <h3 class="heading-text">{{ request('type', 'income') == 'payout' ? 'Payouts' : 'Income' }}</h3>
                        <p class="para d-flex gap-8px align-items-center">
                            <span id="current-date"></span>
                        </p>
                    </div>


                    <div class="project-block">
                        <div class="project-block-item achievement">
                            <div class="project-linking">
                                <div class="income-stats d-flex flex-wrap gap-8px">
                                    <div class="earn-block">
                                        <h3 class="font-size-32 blue-color">
                                            ${{ $data['income']['total_income'] ?? '0' }}</h3>
                                        <p class="para">Total Earned</p>
                                    </div>
                                    <div class="earn-block">
                                        <h3 class="font-size-32 blue-color">
                                            ${{ $data['income']['sent_to_bank'] ?? '0' }}</h3>
                                        <p class="para">Sent to bank</p>
                                    </div>
                                    <div class="earn-block">
                                        <h3 class="font-size-32 blue-color">
                                            {{ $data['income']['total_projects'] ?? '0' }}</h3>
                                        <p class="para">Projects Count</p>
                                    </div>
                                    <div class="earn-block">
                                        <h3 class="font-size-32 blue-color">
                                            {{ $data['income']['total_Job_Invoice_hours'] ?? '0' }}</h3>
                                        <p class="para">Hours Invoiced</p>
                                    </div>
                                    <div class="earn-block">
                                        <h3 class="font-size-32 blue-color">
                                            {{ $data['income']['number_of_tips'] ?? '0' }}</h3>
                                        <p class="para">Tip Count</p>
                                    </div>
                                    <div class="earn-block">
                                        <h3 class="font-size-32 blue-color">${{ $data['income']['total_tip'] ?? '0' }}
                                        </h3>
                                        <p class="para">Tip Earnings</p>
                                    </div>
                                </div>

                                <div class="income-inner-header flex items-center newInvoiceBlock d-flex gap-3">
                                    <a href="{{ url()->current() }}?type=income"
                                        class="text-blue-500 text-lg font-bold mr-4  ">Invoice</a>
                                    <a href="{{ url()->current() }}?type=payout"
                                        class="text-gray-500 text-lg active_link_underlined">Payouts</a>
                                </div>


                                <div id="invoice-section"
                                    class="{{ request('type', 'income') == 'income' ? 'd-block' : 'd-none' }}">
                                    <div class="income-block d-flex flex-column gap-24px">
                                        <div class="income-items">
                                            <div class="income-text">
                                                <div class="income-items d-flex">
                                                    <div class="accordion d-flex flex-column gap-8px" id="payOut">
                                                        @foreach ($data['income']['job_invoices'] ?? [] as $invoice)
                                                        <div class="accordion-item payout-accordion-item py-2">
                                                            <h2 class="accordion-header">
                                                                <button class="accordion-button payout" type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#incomeInvoice{{ $loop->index }}"
                                                                    aria-expanded="true"
                                                                    aria-controls="incomeInvoice{{ $loop->index }}">
                                                                    <p class="grey-color fw-bold">
                                                                        {{ $invoice['category_name'] ?? 'No category' }}
                                                                    </p>
                                                                    <p class="blue-color fw-bold ml-auto">
                                                                        ${{ $invoice['rate'] ?? '0' }}</p>
                                                                </button>
                                                            </h2>
                                                            <div id="incomeInvoice{{ $loop->index }}"
                                                                class="accordion-collapse collapse"
                                                                data-bs-parent="#payOut">
                                                                <div class="accordion-body payout">
                                                                    <div
                                                                        class="income-text-inner d-flex flex-column gap-8px">
                                                                        <p class="para">
                                                                            With {{ 
                                                                                    $invoice['client_name'] 
                                                                                    ? (count($nameParts = explode(' ', $invoice['client_name'])) > 1 
                                                                                        ? $nameParts[0] . ' ' . substr($nameParts[1], 0, 1) 
                                                                                        : $nameParts[0]) 
                                                                                    : 'No client' 
                                                                                }}
                                                                        </p>
                                                                        <p class="para">
                                                                            {{ \Carbon\Carbon::parse($invoice['created_at'])->format('M d, Y h:i a') }}
                                                                        </p>
                                                                    </div>
                                                                    <div class="sent-alert-badge text-end">
                                                                        <span
                                                                            class="status-notfification fw-bold">Sent</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <hr class="m-0">
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>



                                <div id="payout-section"
                                    class="{{ request('type', 'income') == 'payout' ? 'd-block' : 'd-none' }}">
                                    <div class="income-block d-flex flex-column gap-24px">
                                        <!-- Payout Invoices Section -->
                                        <div class="income-items">
                                            <div class="income-text">
                                                <div class="accordion d-flex flex-column gap-2" id="payOut">
                                                    @foreach ($data['payouts']['data'] as $payout)
                                                    <div class="accordion-item payout-accordion-item py-2">
                                                        <!-- Accordion Button as Payout Header -->
                                                        <h2 class="accordion-header">
                                                            <button
                                                                class="accordion-button d-flex align-items-center payout new-payout-controller"
                                                                type="button" data-bs-toggle="collapse"
                                                                data-bs-target="#payout{{ $loop->index }}"
                                                                aria-expanded="false"
                                                                aria-controls="payout{{ $loop->index }}">
                                                                <span class="heading-text fw-bold">
                                                                {{ \Carbon\Carbon::parse($payout['date'])->format('F d, Y') }}
                                                            </span>
                                                                <p class="blue-color fw-bold job-invoices-payouts">
                                                                    ${{ $data['payouts']['data'][0]['total_amount'] ?? '0' }}
                                                                </p>
                                                            </button>
                                                        </h2>
                                                        <!-- Collapsible Section for Loop Content -->
                                                        <div id="payout{{ $loop->index }}"
                                                            class="accordion-collapse collapse"
                                                            data-bs-parent="#payOut">
                                                            <span class="blue-color fw-bold job-invoices-payouts">
                                                                <span class="small-text grey-color">
                                                                    Invoices(s)
                                                                </span>
                                                            </span>

                                                            <div class="accordion-body payout">
                                                                @foreach ($payout['invoices'] as $job)
                                                                <div class="income-text-inner d-flex flex-column gap-2">
                                                                    
                                                                    <div class="d-flex gap-2 justify-content-between">
                                                                        <p class="para">{{ $job['sub_category_name'] ?? 'N/A' }}</p>
                                                                        <p class="para job-invoices-payouts">${{ $job['amount'] ?? '0' }}</p>
                                                                    </div>
                                                                    
                                                                    <p class="para">
                                                                       
                                                                        {{ \Carbon\Carbon::parse($job['created_at'])->format('F d, Y') }}
                                                                    </p>
                                                                </div>
                                                                <hr class="m-0">
                                                                @endforeach
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</section>

@endsection

<script>
// document.addEventListener('DOMContentLoaded', function() {
//     const invoiceSection = document.getElementById('invoice-section');
//     const payoutSection = document.getElementById('payout-section');

//     document.querySelectorAll('.income-inner-header a').forEach(link => {
//         link.addEventListener('click', function(event) {
//             event.preventDefault();  Prevent default navigation
//             const href = this.getAttribute('href');  Use `this` instead of `event.target`
//             Toggle sections based on the link's href
//             if (href.includes('type=income')) {
//                 invoiceSection.classList.add('d-block');
//                 invoiceSection.classList.remove('d-none');
//                 payoutSection.classList.remove('d-block');
//                 payoutSection.classList.add('d-none');
//             } else if (href.includes('type=payout')) {
//                 payoutSection.classList.add('d-block');
//                 payoutSection.classList.remove('d-none');
//                 invoiceSection.classList.remove('d-block');
//                 invoiceSection.classList.add('d-none');
//             }
//         });
//     });
//     Set current date at the top
//     document.getElementById('current-date').textContent = new Date().toLocaleDateString(undefined, {
//         year: 'numeric',
//         month: 'long'
//     });
// });

// Updated script for underlined
document.addEventListener('DOMContentLoaded', function() {
    const invoiceSection = document.getElementById('invoice-section');
    const payoutSection = document.getElementById('payout-section');
    const links = document.querySelectorAll('.income-inner-header a');

    function setActiveLink(selectedType) {
        links.forEach(link => {
            if (link.getAttribute('href').includes(`type=${selectedType}`)) {
                link.classList.add('active_link_underlined');
                localStorage.setItem('selectedTab', selectedType); // Store selection
            } else {
                link.classList.remove('active_link_underlined');
            }
        });
    }

    document.querySelectorAll('.income-inner-header a').forEach(link => {
        link.addEventListener('click', function(event) {
            event.preventDefault(); // Prevent default navigation
            const href = this.getAttribute('href'); // Use `this` instead of `event.target`

            // Determine the clicked type
            const selectedType = href.includes('type=income') ? 'income' : 'payout';

            // Apply active class to clicked link
            setActiveLink(selectedType);

            // Toggle sections based on the link's href
            if (href.includes('type=income')) {
                invoiceSection.classList.add('d-block');
                invoiceSection.classList.remove('d-none');
                payoutSection.classList.remove('d-block');
                payoutSection.classList.add('d-none');
            } else if (href.includes('type=payout')) {
                payoutSection.classList.add('d-block');
                payoutSection.classList.remove('d-none');
                invoiceSection.classList.remove('d-block');
                invoiceSection.classList.add('d-none');
            }
        });
    });

    // Apply active tab on page load
    const savedTab = localStorage.getItem('selectedTab') || 'income'; // Default to "income"
    setActiveLink(savedTab);

    // Set current date at the top
    document.getElementById('current-date').textContent = new Date().toLocaleDateString(undefined, {
        year: 'numeric',
        month: 'long'
    });
});


</script>