@extends('Users.app')
<style>
    .overflow-auto::-webkit-scrollbar {
        height: 8px;
    }

    .project-card {
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .cusotomFont {
        font-family: 'Inter', system-ui, sans-serif;
    }

    .custom-scroll-container {
        overflow-x: auto;
    }

    .custom-scroll-container::-webkit-scrollbar {
        height: 12px;
    }

    .custom-scroll-container::-webkit-scrollbar-thumb {
        background: #999;
        border-radius: 8px;
    }

    .custom-scroll-container::-webkit-scrollbar-track {
        background: #f0f0f0;
    }

    .nav-pills .nav-link {
        background-color: #e0e0e0;
        /* light gray */
        color: #333;
        transition: background-color 0.3s ease;
    }

    .nav-pills .nav-link.active {
        background-color: #131313 !important;
        opacity: 0.50;
        color: white !important;
    }

    #calendar {
        background-color: #fff;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
        font-size: 0.9rem;
    }

    .fc-toolbar-title {
        font-size: 1.25rem;
        font-weight: 600;
    }

    .fc .fc-button {
        padding: 0.3rem 0.65rem !important;
    }

    .fc .fc-button-primary {
        background-color: #343a40;
        border-color: #343a40;
    }

    .fc .fc-button-primary:hover {
        background-color: #495057;
        border-color: #495057;
    }

    .fc .fc-button-primary:not(:disabled):active,
    .fc .fc-button-primary:not(:disabled).fc-button-active {
        background-color: #0d6efd;
        border-color: #0d6efd;
    }

    .fc-daygrid-event {
        font-size: 0.75rem;
        padding: 2px 4px;
        border-radius: 4px;
    }

    .fc .fc-prev-button,
    .fc .fc-next-button {
        font-size: 1.5rem !important;
        padding: 8px 8px !important;
        background-color: #27718A;
        border-radius: 6px;
        border: none;
        color: #fff;
    }

    .fc-today-button {
        cursor: pointer;
        height: auto !important;
    }

    .fc .fc-prev-button:hover,
    .fc .fc-next-button:hover {
        background-color: #0b5ed7;
    }

    .fc .fc-icon {
        font-size: 1.2rem !important;
        height: auto !important;
    }

    .icon-chevron {
        transition: transform 0.3s ease;
    }

    .rotate {
        transform: rotate(180deg);
    }

    .modal-footer {
        border-top: none !important;
    }

    #success {
        background: green;
    }

    #error {
        background: red;
    }
</style>

@section('content')
    <div class="container py-4">

        <div class="d-flex justify-content-between align-items-start flex-wrap mb-4">
            <div>
                <h4 class="mb-1">Project Lead Management</h4>
                <p class="text-muted mb-0">Track customers and their multiple projects with deadline reminders</p>
            </div>
            <div class="mt-3 mt-md-0">
                <button class="btn btn-outline-secondary me-2" data-bs-toggle="modal" data-bs-target="#addCustomerModal">
                    Add Customer
                </button>
            </div>
        </div>

        <div class="row g-3 mb-4">
            <div class="col-6 col-md-3">
                <div class="card text-start rounded-4 p-3 h-60" data-bs-toggle="modal"
                    data-bs-target="#upcomingProjectsModal" style="cursor: pointer;">
                    {{-- <div class="fs-4">📅</div> --}}
                    <div class="d-flex justify-content-between">
                        <h6 class="mt-2">Upcoming Projects</h6>
                        <div class="fs">📥</div>
                    </div>
                    <div class="fw-bold fs-3">{{ $upcommingProjects->count() }}</div>
                    <small class="text-muted">Click to view details</small>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card text-start rounded-4 p-3 h-60" data-bs-toggle="modal"
                    data-bs-target="#availableProjectsModal" style="cursor: pointer;">
                    {{-- <div class="fs-4">✅</div> --}}
                    <div class="d-flex justify-content-between">
                        <h6 class="mt-2">Available Projects</h6>
                        <div class="fs">📝</div>
                    </div>
                    <div class="fw-bold fs-3">{{ $availableProjects->count() }}</div>
                    <small class="text-muted">Click to view details</small>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card text-start rounded-4 p-3 h-60" data-bs-toggle="modal"
                    data-bs-target="#overdueProjectsModal" style="cursor: pointer;">
                    {{-- <div class="fs-4">⚠️</div> --}}
                    <div class="d-flex justify-content-between">
                        <h6 class="mt-2">Overdue Projects</h6>
                        <div class="fs">⏳</div>
                    </div>
                    <div class="fw-bold fs-3">{{ $overDueProjects->count() }}</div>
                    <small class="text-muted">Click to view details</small>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card text-start p-3 h-60 rounded-4" data-bs-toggle="modal" data-bs-target="#revenueModal"
                    style="cursor: pointer;">
                    {{-- <div class="fs-4">💰</div> --}}
                    <div class="d-flex justify-content-between">
                        <h6 class="mt-2">Revenue</h6>
                        <div class="fs">💰</div>
                    </div>
                    <div class="fw-bold fs-3">${{ number_format($totalRevenewPaid, 2) }}</div>
                    <small class="text-muted">${{ number_format($totalRevenewDue, 2) }} pending</small>
                </div>
            </div>
        </div>

        {{-- <!-- Recent Activity -->
        <div class="mb-4 p-4 rounded-4 bg-white shadow-sm">
            <h5 class="d-flex align-items-center gap-2 p-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="lucide lucide-activity h-5 w-5" aria-hidden="true">
                    <path
                        d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2">
                    </path>
                </svg>
                Recent Activity
            </h5>

            <!-- Individual Activity Item -->
            <div class="p-3 mb-3 rounded-4 border shadow-sm">
                <div class="d-flex justify-content-between">
                    <div>
                        <strong>Michael Chen</strong> - Research Proposal
                        <span class="badge bg-warning text-dark ms-1">in-progress</span>
                        <div class="small text-muted">Reminder sent Jan 20, 2024</div>
                    </div>
                    <div class="text-end">
                        <div class="fw-bold">$1,200</div>
                        <div class="small text-muted">Due Jun 30, 2024</div>
                    </div>
                </div>
            </div>

            <div class="p-3 mb-3 rounded-4 border shadow-sm">
                <div class="d-flex justify-content-between">
                    <div>
                        <strong>Sarah Johnson</strong> - Personal Statement Writing
                        <span class="badge bg-success ms-1">available</span>
                        <div class="small text-muted">Created Jan 15, 2024</div>
                    </div>
                    <div class="text-end">
                        <div class="fw-bold">$500</div>
                        <div class="small text-muted">Due Aug 15, 2024</div>
                    </div>
                </div>
            </div>

            <div class="p-3 mb-3 rounded-4 border shadow-sm">
                <div class="d-flex justify-content-between">
                    <div>
                        <strong>Sarah Johnson</strong> - Personal Statement Writing
                        <span class="badge bg-primary ms-1">upcomming</span>
                        <div class="small text-muted">Created Jan 15, 2024</div>
                    </div>
                    <div class="text-end">
                        <div class="fw-bold">$500</div>
                        <div class="small text-muted">Due Aug 15, 2024</div>
                    </div>
                </div>
            </div>

            <div class="p-3 mb-3 rounded-4 border shadow-sm">
                <div class="d-flex justify-content-between">
                    <div>
                        <strong>Sarah Johnson</strong> - Personal Statement Writing
                        <span class="badge bg-primary ms-1">upcomming</span>
                        <div class="small text-muted">Created Jan 15, 2024</div>
                    </div>
                    <div class="text-end">
                        <div class="fw-bold">$500</div>
                        <div class="small text-muted">Due Aug 15, 2024</div>
                    </div>
                </div>
            </div>


        </div> --}}




        <div class="mb-2 bg-white rounded-4 shadow-sm p-3">
            <ul class="nav nav-pills d-flex text-center mb-4" id="myTab" role="tablist">
                <li class="nav-item flex-fill" role="presentation">
                    <button class="nav-link active rounded-pill w-100" id="tab1-tab" data-bs-toggle="pill"
                        data-bs-target="#tab1" type="button" role="tab" aria-controls="tab1" aria-selected="true">
                        Customers & Projects
                    </button>
                </li>
                <li class="nav-item flex-fill" role="presentation">
                    <button class="nav-link rounded-pill w-100 " id="tab2-tab" data-bs-toggle="pill" data-bs-target="#tab2"
                        type="button" role="tab" aria-controls="tab2" aria-selected="false">
                        Project Calendar
                    </button>
                </li>
                <li class="nav-item flex-fill" role="presentation">
                    <button class="nav-link rounded-pill w-100" id="tab3-tab" data-bs-toggle="pill" data-bs-target="#tab3"
                        type="button" role="tab" aria-controls="tab3" aria-selected="false">
                        Payment Reminders
                    </button>
                </li>
            </ul>

            <div class="tab-content" id="myTabContent">
                <!-- Customers & Projects -->
                <div class="tab-pane fade show active" id="tab1" role="tabpanel">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <form id="searchForm" class="w-100 mt-3 ">
                            <div class="input-group">
                                <span class="input-group-text bg-light border-end-0"><i class="bi bi-search"></i></span>
                                <input type="text" class="form-control border-start-0 " id="customer_search_fun"
                                    name="customer_search" placeholder="Search customers...">
                        </form>
                    </div>
                    {{-- <select class="form-select w-auto ms-2">
                        <option selected>All Status</option>
                        <option>New</option>
                        <option>Qualified</option>
                        <option>Contacted</option>
                        <option>Enrolled</option>
                        <option>Rejected</option>
                    </select> --}}
                </div>

                <h6 class="fw-bold mb-3">Customers ({{ $realCustomers->count() }})</h6>

                <div class="h-50 overflow-auto">
                    @if (count($realCustomers) == 0)
                        <div class=" p-3 rounded-4 d-flex justify-content-center">
                            <lottie-player src="{{ asset('Empty_box.json') }}" background="transparent" speed="1"
                                style="width: 300px; height: 300px;" loop autoplay>
                            </lottie-player>
                        </div>
                    @else
                        @foreach ($realCustomers as $realCustomer)
                            <div class="card mb-3 p-3 rounded-4">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="d-flex align-items-center customer-toggle"
                                        data-target-id="projects-{{ $realCustomer->id }}" {{-- data-bs-toggle="collapse"
                                            data-bs-target="#projects-{{ $realCustomer->id }}" --}}
                                        aria-expanded="false" aria-controls="projects-{{ $realCustomer->id }}"
                                        style="cursor: pointer;">
                                        <span class="customer-toggle mb-3"
                                            data-target-id="projects-{{ $realCustomer->id }}">
                                            <i class="fa icon-chevron fa-chevron-down"></i>
                                        </span>
                                        <div>
                                            <h6 class="fw-bold mb-1 px-2 text-capitalize">
                                                {{ $realCustomer->name }}
                                                {{-- <span class="badge bg-success">qualified</span> --}}
                                            </h6>
                                            <small class="text-muted">* {{ $realCustomer->college }} *
                                                {{ $realCustomer->course }}</small>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <button class="btn btn-outline-primary me-2" data-bs-toggle="modal"
                                            data-bs-target="#addProjectModal"
                                            onclick="addProjectFun( '{{ $realCustomer->id }}' , '{{ $realCustomer->name }}', '{{ $realCustomer->order->id ?? null }}', '{{ $realCustomer->email }}' )">Add
                                            Project</button>
                                        <div style="position: relative; display: inline-block;">
                                            <button onclick="toggleDropdown(this)"
                                                style="border: none; background-color:white" class="ellipsis-btn">
                                                <!-- Ellipsis icon -->
                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                    fill="none" stroke="currentColor" stroke-width="2"
                                                    stroke-linecap="round" stroke-linejoin="round"
                                                    class="lucide lucide-ellipsis-vertical">
                                                    <circle cx="12" cy="12" r="1"></circle>
                                                    <circle cx="12" cy="5" r="1"></circle>
                                                    <circle cx="12" cy="19" r="1"></circle>
                                                </svg>
                                            </button>
                                            <div class="dropdown-menu"
                                                style="display: none; position: absolute; right: 0; top: 110%; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 8px 0; z-index: 100;">
                                                <button class="dropdown-item"
                                                    style="display:block; padding: 8px 16px; color:#000; text-decoration:none;"
                                                    data-id="{{ $realCustomer->id }}"
                                                    data-name="{{ $realCustomer->name }}"
                                                    data-email="{{ $realCustomer->email }}"
                                                    data-phone="{{ $realCustomer->phone }}"
                                                    data-college="{{ $realCustomer->college }}"
                                                    data-course="{{ $realCustomer->course }}" {{-- data-stage="{{ $realCustomer->stage }}" --}}
                                                    data-intake_month="{{ $realCustomer->intake_month }}"
                                                    data-intake_year="{{ $realCustomer->intake_year }}"
                                                    data-portal_url = "{{ $realCustomer->portal_url }}"
                                                    data-login_id = "{{ $realCustomer->portal_login_id }}"
                                                    data-password = "{{ $realCustomer->portal_password }}"
                                                    data-bs-toggle="modal" data-bs-target="#editCustomerModal">Edit
                                                    Customer</button>
                                                <button class="dropdown-item"
                                                    onclick="deleteCustomer({{ $realCustomer->id }})"
                                                    style="display:block; padding: 8px 16px; color:#dc3545; text-decoration:none;">Delete
                                                    Customer</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Customer project table can go here --}}
                                <div id="projects-{{ $realCustomer->id }}" class="collapse mt-3">
                                    <table class="table table-sm">
                                        <thead>
                                            <tr class="text-muted small">
                                                <th>Topic</th>
                                                <th>Service</th>
                                                <th>Subject</th>
                                                <th>Deadline</th>
                                                <th>Available Date</th>
                                                <th>Order Status</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                            @foreach ($realCustomer->assignment as $singleAssignment)
                                                <tr>
                                                    <td>{{ $singleAssignment->topic ?? 'Null' }}
                                                    </td>
                                                    <td>{{ $singleAssignment->service ?? 'Null' }}
                                                    </td>
                                                    <td class="text-danger">{{ $singleAssignment->subject ?? 'Null' }}
                                                    </td>
                                                    @php

                                                        $today = \Carbon\Carbon::now();
                                                        $date = \Carbon\Carbon::parse($singleAssignment->date);
                                                        $daysDiff = $today->diffInDays($date, false);
                                                        // echo $daysDiff;
                                                        if ($daysDiff < 0) {
                                                            $bgColor = '#ED5353'; // red
                                                        } elseif (abs($daysDiff) <= 10) {
                                                            $bgColor = '#FFD700'; // yellow
                                                        } else {
                                                            $bgColor = '#808080'; // black
                                                        }
                                                    @endphp
                               
                                                    <td
                                                        style="background-color: {{ $bgColor }}; color: white; border-bottom-left-radius:10px;
                                                        border-top-right-radius: 15px;">
                                                        {{ \Carbon\Carbon::parse($singleAssignment->date)->format('d M Y')  ?? "Null"}}
                                                    </td>
                                                    <td class="text-danger"> 
                                                      {{ \Carbon\Carbon::parse($singleAssignment->available_date)->format('d M Y')  ?? "Null"}}
                                                    </td>
                                                    @php
                                                        if($singleAssignment->order_id){
                                                            $orderFound = 'bg-success';
                                                        }else{
                                                            $orderFound = 'bg-danger';
                                                        }
                                                        
                                                    @endphp
                                                    <td>
                                                        <span
                                                            class="badge {{  $orderFound }}">{{ $singleAssignment->order_id ? "Converted" : 'Not Converted' }}</span>
                                                    </td>
                                                    <td style="position: relative;"><i
                                                            class="fas fa-ellipsis-v ellipsis-btn"
                                                            style="cursor: pointer;" onclick="toggleDropdown1(this)"></i>
                                                        <div class="dropdown-menu dropdown-menu-end shadow-sm rounded-3 p-0" style="display: none; position: absolute; right: 0; top: 110%; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 8px 0; z-index: 100;">
                                                        <button type="button" class="dropdown-item"
                                                            data-bs-toggle="modal"
                                                            data-bs-target="#CustomereditProjectModal"
                                                            data-id="{{ $singleAssignment->id }}"
                                                            data-service="{{ $singleAssignment->service }}"
                                                            data-subject="{{ $singleAssignment->subject }}"
                                                            data-word="{{ $singleAssignment->word }}"
                                                            data-date="{{ $singleAssignment->date }}"
                                                            data-available_date="{{ $singleAssignment->available_date }}"
                                                            data-customer_id="{{ $realCustomer->id }}"
                                                            data-topic="{{ $singleAssignment->topic }}"
                                                            onclick="addClassFun()">
                                                            Edit Project
                                                        </button> 

                                                        <button type="button" class="dropdown-item text-danger"
                                                            onclick="ProjectDelete({{ $singleAssignment->id }})">
                                                            Delete Project
                                                        </button>
                                                    </div>

                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        @endforeach
                    @endif

                </div>


            </div> 

            <!-- Project Calendar -->
            <div class="tab-pane fade" id="tab2" role="tabpanel">
                <div id='calendar'>dk</div>
                <div class="d-flex flex-wrap gap-3">
                    <div class="d-flex align-items-center gap-2">
                        <div class="rounded-circle" style="width: 12px; height: 12px; background-color:#27718A"></div>
                        <span class="text-capitalize small text-dark">Upcoming Project</span>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <div class="rounded-circle" style="width: 12px; height: 12px; background-color:#011014"></div>
                        <span class="text-capitalize small text-dark">Available Project</span>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <div class="rounded-circle" style="width: 12px; height: 12px;background-color:#ED5353;"></div>
                        <span class="text-capitalize small text-dark">Overdue Project</span>
                    </div>
                </div>
            </div>

            <!-- Payment Reminders -->
            <div class="tab-pane fade" id="tab3" role="tabpanel">
                <div class="d-flex justify-content-between  align-item-center mb-3">
                    <h5 class="mb-3">Payment Reminder Management</h5>
                    <form action="{{ route('indexProjectLead') }}" method="GET">
                        @csrf
                        <!-- <label class="w-50 align-items-center">Date</label> -->
                        <div class="d-flex justify-content-between gap-3">
                            <input type="hidden" name="tab" value="tab3">
                            <input type="text" placeholder="Created date" class="form-control dateRange mb-3"
                                name="dateRange" id="dateRange">
                            <button type="submit " class="btn btn-primary h-25 calendar-filter">Filter</button>
                            <button type="button" id="clearDate" class="btn btn-light h-25">Clear</button>
                        </div>
                    </form>
                </div>
                <div class="card mb-3 p-3 overflow-auto h-50 rounded-4">
                    <div class="rounded-4">
                        @if (count($partialPaymentUsers) == 0)
                            <div class=" p-3 rounded-4 d-flex justify-content-center">
                                <lottie-player src="{{ asset('Empty_box.json') }}" background="transparent"
                                    speed="1" style="width: 300px; height: 300px;" loop autoplay>
                                </lottie-player>
                            </div>
                        @else
                            @foreach ($partialPaymentUsers as $partialPaymentUser)
                                <div class="border p-3 rounded-4">
                                    <h6 class="mb-1 text-capitalize"><a
                                            href="{{ route('showEditOrderForm', [$partialPaymentUser->id]) }}"
                                            style="color: var(--falcon-headings-color);" target="_blank">
                                            {{ $partialPaymentUser->topic }} </a><span class="badge bg-warning"> {{ $partialPaymentUser->pay_status ?? null }}
                                        </span></h6>
                                    <small class="text-muted">{{ $partialPaymentUser->customer_name }} •
                                        {{ $partialPaymentUser->customer_email }} • {{ $partialPaymentUser->order_code }}
                                        <br>Total Amount:
                                        {{ $partialPaymentUser->curr_name }} {{ $partialPaymentUser->cost }} |
                                        Due Amount: {{ $partialPaymentUser->curr_name }}
                                        {{ $partialPaymentUser->due }}</small> 
                                </div>
                                <br>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </div>

    </div>

    </div>

    <!-- Add Customer Modal -->
    <div class="modal fade" id="addCustomerModal" tabindex="-1" aria-labelledby="addCustomerModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content rounded-4">
                <div class="modal-header">
                    <h5 class="modal-title fw-bold customeFont" id="addCustomerModalLabel">Add New Customer</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    {{-- <p class="text-muted">Enter the details for a new customer.</p> --}}
                    <form action="{{ route('createUser') }}" method="POST">
                        @csrf
                        <div class="row g-3 mb-5">
                            <div class="col-md-6">
                                <label class="form-label customeFont">Customer Name *</label>
                                <input type="text" class="form-control" placeholder="Sarah Johnson" name="name"
                                    required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label customeFont">Email *</label>
                                <input type="email" class="form-control" placeholder="developer@example.com"
                                    name="email" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label customeFont">Contact</label>
                                <span class="d-flex">
                                    <select class="form-select" name="country" style="width: 140px;" required>
                                        <span class="countryList">
                                            <option value="">Country</option>
                                            @foreach ($countryList as $country)
                                                <option value="{{ $country }}"> {{ $country->name }} </option>
                                            @endforeach
                                        </span>
                                    </select>
                                    <input type="text" class="form-control" placeholder="7755220011" name="phone"
                                        required>
                                </span>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label customeFont">University Name</label>
                                <input type="text" class="form-control" placeholder="Enter University Name"
                                    name="university_name" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label customeFont">Course Name</label>
                                <input type="text" class="form-control" placeholder="Enter Course Name"
                                    name="course_name">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label customeFont">Portal Url</label>
                                <input type="text" class="form-control" placeholder="Enter Portal Url"
                                    name="portal_url">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label customeFont">Login Id</label>
                                <input type="text" class="form-control" placeholder="Enter Login Id" name="login_id">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label customeFont">Password</label>
                                <input type="text" class="form-control" placeholder="Enter password" name="password">
                            </div>

                            {{-- <div class="col-md-6">
                                <label class="form-label customeFont">Status</label>
                                <select class="form-select" name="stage" required>
                                    <option selected>Select Status</option>
                                    <option value="Pending">Pending</option>
                                    <option value="Interested">Interested</option>
                                    <option value="May-Be-Later">May Be Later</option>
                                    <option value="Not-Interested">Not Interested</option>
                                    <option value="Converted">Converted</option>

                                </select>
                            </div> --}}
                            <input type="hidden" class="form-control" placeholder="Enter password" name="stage"
                                value="Pending">

                            <div class="col-md-6">
                                <label class="form-label customeFont">Intake Year</label>
                                @php
                                    $startYear = 2022;
                                    $endYear = now()->year + 1;
                                    $years = range($startYear, $endYear);
                                @endphp
                                <select class="form-select" name="intake_year">
                                    <option selected>Select Intake Year</option>
                                    @foreach ($years as $year)
                                        <option value="{{ $year }}">
                                            {{ $year }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <input class="form-control" name="assign_to" type="hidden"
                                value="{{ auth()->user()->id }}" />

                            <div class="col-md-6">
                                <label class="form-label customeFont">Intake Month</label>
                                <select class="form-select" name="intake_month">
                                    <option selected>Select Intake Month</option>
                                    @foreach ($intakeMonths as $month)
                                        <option value="{{ $month }}">
                                            {{ $month }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Websites</label>
                                <select name="web_sort_name" class="form-select" required>
                                    <option value="">Select</option>
                                    @foreach ($websiteName as $web_name)
                                        <option value="{{ $web_name }}">{{ $web_name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Source</label>
                                <select name="source" class="form-select" required>
                                    <option value="">Select</option>
                                    <option value="Chilly">Chilly</option>
                                    <option value="Facebook">Facebook</option>
                                    <option value="Instagram">Instagram</option>
                                    <option value="Telegram">Telegram</option>
                                    <option value="Friends Reference">Friends Reference</option>
                                </select>
                            </div>


                        </div>
                        <div class="modal-footer justify-content-between">
                            <button type="button" class="btn btn-outline-secondary"
                                data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-dark">Add Customer</button>
                        </div>
                    </form>
                </div>

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

    <!-- Add Project Modal -->
    <div class="modal fade" id="addProjectModal" tabindex="-1" aria-labelledby="addProjectModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered m">
            <div class="modal-content rounded-4">

                <div class="modal-header">
                    <h5 class="modal-title fw-bold" id="addProjectModalLabel">Add New Project</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <p class="text-muted">Enter the details for a new project.</p>
                    <form method="POST" id="addProject">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Customer Name</label>
                                <input type="text" class="form-control add_customer_name" name="add_customer_name"
                                    readonly>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Customer Email</label>
                                <input type="email" class="form-control add_customer_email" name="add_customer_email"
                                    readonly>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Topic</label>
                                <input type="text" class="form-control add_customer_topic" name="add_customer_topic">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Service *</label>
                                <select id="" class="form-select ass_group_list" name="type"
                                    onchange="get_subject_list(this, 'https://betacpanel.globalassignmenthelp.com/api', '')"
                                    data-type="blank">
                                    <option value=""> Select Services </option>
                                    <option unit_tag="Pages | Words" value="1">Assignment | Coursework | Term Paper
                                    </option>
                                    <option unit_tag="Pages | Words" value="14">Case Study | Report Writing </option>
                                    <option unit_tag="Pages | Words" value="17">Plagiarism Report</option>
                                    <option unit_tag="Pages | Words" value="16">Essay</option>
                                    <option unit_tag="Pages | Words" value="2">Dissertation & PHD Thesis</option>
                                    <option unit_tag="Pages | Words" value="13">Business Plan</option>
                                    <option unit_tag="Que. | Word/Que." value="4">Online Exam | Question based test
                                        Papers </option>
                                    <option unit_tag="Que. | Word/Que." value="15">Multiple Choice Questions </option>
                                    <option unit_tag="Pages | Words" value="5">Editing | Proofreading | Paraphrasing
                                    </option>
                                    <option unit_tag="Slides" value="8">PowerPoint Presentation</option>
                                    <option unit_tag="Poster" value="9">Poster</option>
                                    <option unit_tag="Leaflet" value="10">Leaflet</option>
                                    <option unit_tag="Pages | Words" value="6">Summary Writing</option>
                                    <option unit_tag="Pages | Words" value="7">Portfolio</option>
                                    <option unit_tag="Pages | Words" value="11">Resume / CV Services
                                    </option>
                                </select>
                                <input type="hidden" class="assignment_name" name="assignment_service" value="">
                                <input type="hidden" class="assignment_subject_nm" name="assignment_subject_nm"
                                    value="">
                            </div>
                            <div class="col-md-6" id="get_subb2">
                                <label class="form-label">Subject</label>
                                <div class="form-group get_subject">
                                    {{-- <input type="text" class="form-control add_customer_subject"
                                        name="add_customer_subject" placeholder="Personal Statement Writing" required> --}}
                                    <select class="form-select" onchange="sle_sub_name(this)" id="assignment_subject"
                                        name="type">
                                        <option value="">Select subject</option>
                                    </select>
                                </div>
                            </div>


                            <div class="col-md-6">
                                <label class="form-label">Word *</label>
                                <input type="number" class="form-control add_customer_word" name="add_customer_word"
                                    placeholder="500" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Available Date *</label>
                                <input type="date" class="form-control add_customer_available_date"
                                    name=" add_customer_available_date" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Deadline *</label>
                                <input type="date" class="form-control add_customer_date" name="add_customer_date"
                                    required>
                            </div>

                        </div>
                        <div class="modal-footer justify-content-between">
                            <button type="button" class="btn btn-outline-secondary"
                                data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-dark ">Add Project</button>
                        </div>
                    </form>
                </div>


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

    <!-- revenue Projects Modal -->
    <div class="modal fade" id="revenueModal" tabindex="-1" aria-labelledby="revenueModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content rounded-4 shadow">

                <div class="modal-header">
                    <h5 class="modal-title fw-bold" id="revenueModalLabel">Projects Revenue
                        ({{ $orderidAndAmount->count() }})</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    @if (count($orderidAndAmount) == 0)
                        <div class=" p-3 rounded-4 d-flex justify-content-center">
                            <lottie-player src="{{ asset('Empty_box.json') }}" background="transparent" speed="1"
                                style="width: 300px; height: 300px;" loop autoplay>
                            </lottie-player>
                        </div>
                    @else
                        <p class="text-muted">Total Revenue in one Month</p>

                        <!-- Table -->
                        <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                            <table class="table table-borderless align-middle mb-0">
                                <thead class="border-bottom">
                                    <tr class="text-muted fw-semibold ">
                                        <th>Order Code</th>
                                        <th>Amount</th>
                                        <th>Date</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($orderidAndAmount as $amount)
                                        <tr>
                                            <td style="border-bottom: 1px solid #ccc;"><strong><a
                                                        href="{{ url('order/edit/' . $amount->order_id) }}"
                                                        class="text-capitalize" style="color:black;" target="_blank">
                                                        {{ $amount->order_code ?? '0' }}</a> </strong>
                                            </td>
                                            <td style="border-bottom: 1px solid #ccc;">{{ $amount->curr_name }} {{ $amount->amount }} </td>
                                            <td style="border-bottom: 1px solid #ccc;">
                                                {{ \Carbon\Carbon::parse($amount->group_key)->format('d M Y') }}</td>
                                        </tr>
                                    @endforeach
                    @endif
                    </tbody>
                    </table>
                </div>

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

    <!-- Upcoming Projects Modal -->
    <div class="modal fade" id="upcomingProjectsModal" tabindex="-1" aria-labelledby="upcomingProjectsModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content rounded-4 shadow">

                <div class="modal-header">
                    <h5 class="modal-title fw-bold" id="upcomingProjectsModalLabel">Upcoming Projects
                        ({{ $upcommingProjects->count() }})</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    @if (count($upcommingProjects) == 0)
                        <div class=" p-3 rounded-4 d-flex justify-content-center">
                            <lottie-player src="{{ asset('Empty_box.json') }}" background="transparent" speed="1"
                                style="width: 300px; height: 300px;" loop autoplay>
                            </lottie-player>
                        </div>
                    @else
                        <p class="text-muted">Projects scheduled to be available soon</p>

                        <!-- Table -->
                        <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                            <table class="table table-borderless align-middle mb-0">
                                <thead class="border-bottom">
                                    <tr class="text-muted fw-semibold ">
                                        <th>Customer Name</th>
                                        <th>Service</th>
                                        <th>Subject</th>
                                        <th>Deadline</th>
                                    </tr>
                                </thead>
                                <tbody>

                                    @foreach ($upcommingProjects as $upcommingProject)
                                        <tr>
                                            <td style="border-bottom: 1px solid #ccc;"><strong><a
                                                        href="{{ url('customer/edit/' . $upcommingProject->bd_leads->id) }}"
                                                        class="text-capitalize" style="color:black;" target="_blank">
                                                        {{ $upcommingProject->bd_leads->name ?? 'null' }}</a> </strong>
                                            </td>
                                            <td style="border-bottom: 1px solid #ccc;"> {{ $upcommingProject->service }}
                                            </td>
                                            <td style="border-bottom: 1px solid #ccc;">{{ $upcommingProject->subject }}
                                            </td> 
                                            <td style="border-bottom: 1px solid #ccc;">{{ \Carbon\Carbon::parse($upcommingProject->date)->format('d M Y') }}</td>
                                        </tr>
                                    @endforeach

                                </tbody>
                            </table>
                        </div>
                    @endif

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

    <!-- Modal Available Projects -->
    <div class="modal fade" id="availableProjectsModal" tabindex="-1" aria-labelledby="availableProjectsModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content rounded-4 shadow-sm">

                <div class="modal-header">
                    <h5 class="modal-title fw-bold" id="availableProjectsModalLabel">Available Projects
                        ({{ $availableProjects->count() }})</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    @if (count($availableProjects) == 0)
                        <div class=" p-3 rounded-4 d-flex justify-content-center">
                            <lottie-player src="{{ asset('Empty_box.json') }}" background="transparent" speed="1"
                                style="width: 300px; height: 300px;" loop autoplay>
                            </lottie-player>
                        </div>
                    @else
                        <p class="text-muted">Projects ready to start</p>

                        <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                            <table class="table align-middle table-borderless mb-0">
                                <thead class="border-bottom text-muted fw-semibold">
                                    <tr>
                                        <th>Customer Name</th>
                                        <th>Service</th>
                                        <th>Subject</th>
                                        <th>Deadline</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Sample row -->
                                    @foreach ($availableProjects as $availableProject)
                                        <tr>
                                            <td style="border-bottom: 1px solid #ccc;"><a
                                                    href="{{ url('customer/edit/' . $availableProject->bd_leads->id) }}"
                                                    class="text-capitalize" style="color:black;" target="_blank">
                                                    <strong>
                                                        {{ $availableProject->bd_leads->name ?? 'null' }} </strong></a>
                                            </td>
                                            <td style="border-bottom: 1px solid #ccc;">
                                                {{-- <div class="fw-semibold">Personal Statement Writing</div>
                                                <div class="small text-muted">PRJ24001</div> --}}
                                                {{ $availableProject->service }}
                                            </td>
                                            <td style="border-bottom: 1px solid #ccc;">
                                                {{-- <span class="badge bg-success-subtle text-success">available</span> --}}
                                                {{ $availableProject->subject }}
                                            </td> 
                                            <td style="border-bottom: 1px solid #ccc;"> {{ \Carbon\Carbon::parse($availableProject->date)->format('d M Y') }}
                                            </td>
                                        </tr>
                                    @endforeach

                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>

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

    <!-- Overdue Projects Modal -->
    <div class="modal fade" id="overdueProjectsModal" tabindex="-1" aria-labelledby="overdueProjectsModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content rounded-4">
                <div class="modal-header">
                    <h5 class="modal-title fw-bold" id="overdueProjectsModalLabel">Overdue Projects
                        ({{ $overDueProjects->count() }})</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    @if (count($overDueProjects) == 0)
                        <div class=" p-3 rounded-4 d-flex justify-content-center">
                            <lottie-player src="{{ asset('Empty_box.json') }}" background="transparent" speed="1"
                                style="width: 300px; height: 300px;" loop autoplay>
                            </lottie-player>
                        </div>
                    @else
                        <p class="text-muted mb-3">Projects that have passed their deadline</p>

                        <!-- Horizontal Scroll Area -->
                        <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                            <table class="table align-middle text-nowrap table-hover">
                                <thead class="table-light">
                                    <tr>
                                        <th>Customer Name</th>
                                        <th>Service</th>
                                        <th>Subject</th>
                                        <th>Deadline</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($overDueProjects as $overDueProject)
                                        <tr>

                                            {{-- <td style="border-bottom: 1px solid #ccc;"> <strong>
                                                    {{ $overDueProject->bd_leads->name ?? 'null' }} </strong> </td> --}}
                                            <td style="border-bottom: 1px solid #ccc;"><a
                                                    href="{{ url('customer/edit/' . $overDueProject->bd_leads->id) }}"
                                                    class="text-capitalize" style="color:black;" target="_blank">
                                                    <strong>
                                                        {{ $overDueProject->bd_leads->name ?? 'null' }} </strong></a>
                                            </td>
                                            <td style="border-bottom: 1px solid #ccc;">
                                                {{-- <div class="fw-semibold">Personal Statement Writing</div>
                                            <div class="small text-muted">PRJ24001</div> --}}
                                                {{ $overDueProject->service }}
                                            </td>
                                            <td style="border-bottom: 1px solid #ccc;">
                                                {{-- <span class="badge bg-success-subtle text-success">available</span> --}}
                                                {{ $overDueProject->subject }}
                                            </td> 
                                            <td style="border-bottom: 1px solid #ccc;"> {{ \Carbon\Carbon::parse($overDueProject->date)->format('d M Y') }} </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Hidden Project Detail Section -->
    <div id="customer1" class="project-details-wrapper" style="display: none;">
        <div class="project-card p-3 mb-4">
            <div class="d-flex justify-content-between flex-wrap mb-3">
                <div>
                    <p><strong>Email:</strong> sarah.johnson@email.com</p>
                    <p><strong>Phone:</strong> +1 (555) 123-4567</p>
                </div>
                <div class="text-end">
                    <p><strong>Intake:</strong> Fall 2024</p>
                    <p><strong>Created:</strong> Jan 15, 2024</p>
                </div>
            </div>

            <div class="custom-scroll-container">
                <table class="table table-hover text-nowrap">
                    <thead>
                        <tr>
                            <th>Project</th>
                            <th>Amount</th>
                            <th>Available</th>
                            <th>Deadline</th>
                            <th>Status</th>
                            <th>Payment</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Personal Statement Writing <div class="text-muted small">PRJ24001</div>
                            </td>
                            <td>$500</td>
                            <td>Aug 1, 2024</td>
                            <td class="text-danger">Aug 15, 2024<br><small>352 days overdue</small></td>
                            <td><span class="badge bg-success">available</span></td>
                            <td><span class="badge bg-danger">pending</span></td>
                        </tr>
                        <tr>
                            <td>SOP Review & Edit <div class="text-muted small">PRJ24002</div>
                            </td>
                            <td>$300</td>
                            <td>Aug 3, 2024</td>
                            <td class="text-danger">Aug 12, 2024<br><small>355 days overdue</small></td>
                            <td><span class="badge bg-primary">upcoming</span></td>
                            <td><span class="badge bg-danger">pending</span></td>
                        </tr>
                        <!-- more rows... -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>


    <!-- Edit Customer Modal -->
    <div class="modal fade" id="editCustomerModal" tabindex="-1" aria-labelledby="editCustomerModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-4 shadow">
                <div class="modal-header">
                    <h5 class="modal-title fw-bold" id="editCustomerModalLabel">Edit Customer</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-3 text-muted">Update customer information and details.</p>
                    <form action="{{ route('editUser') }}" method="POST">
                        @csrf
                        <input type="hidden" name="cust_id" id="editCustomerId">
                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Customer Name *</label>
                                <input type="text" class="form-control" id="editCustomerName" name="name">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Email *</label>
                                <input type="email" class="form-control" id="editCustomerEmail" name="email">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Contact</label>
                                <input type="text" class="form-control" id="editCustomerPhone" name="phone">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">University Name</label>
                                <input type="text" class="form-control" id="editCustomerCollege" name="college">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Course Name</label>
                                <input type="text" class="form-control" id="editCustomerCourse" name="course">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Portal Url</label>
                                <input type="text" class="form-control" id="editCustomerPortal_url"
                                    name="protal_url">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Login Id</label>
                                <input type="text" class="form-control" id="editCustomerLogin_id" name="login_id">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Password</label>
                                <input type="text" class="form-control" id="editCustomerPassword" name="password">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Intake Month</label>
                                <select class="form-select" id="editCustomerIntakeMonth" name="intake_month">
                                    <option selected>Select Intake Month</option>
                                    @foreach ($intakeMonths as $month)
                                        <option value="{{ $month }}">
                                            {{ $month }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Intake Year</label>
                                @php
                                    $startYear = 2022;
                                    $endYear = now()->year + 1;
                                    $years = range($startYear, $endYear);
                                @endphp
                                <select class="form-select" id="editCustomerIntakeYear" name="intake_year">
                                    <option selected>Select Intake Year</option>
                                    @foreach ($years as $year)
                                        <option value="{{ $year }}">
                                            {{ $year }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            {{-- <div class="col-12">
                                <label class="form-label customeFont">Status</label>
                                <select class="form-select" id="editCustomerStage" name="stage">
                                    <option selected>Select Status</option>
                                    <option value="Pending">Pending</option>
                                    <option value="Interested">Interested</option>
                                    <option value="May-Be-Later">May Be Later</option>
                                    <option value="Not-Interested">Not Interested</option>
                                    <option value="Converted">Converted</option>
                                </select>
                            </div> --}}
                        </div>
                        <div class="modal-footer justify-content-between">
                            <button type="submit" class="btn btn-dark">Update Customer</button>
                            <button type="button" class="btn btn-outline-secondary"
                                data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!--Customer Edit Project Modal -->
    <div class="modal fade" id="CustomereditProjectModal" tabindex="-1" aria-labelledby="CustomereditProjectModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content rounded-4 p-3">
                <div class="modal-header border-0">
                    <h5 class="modal-title fw-bold" id="CustomereditProjectModalLabel">Edit Project</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <form id="editProjectForm" action="{{ route('editCustomerProject') }}" method="POST">
                        @csrf
                        <input type="hidden" name="assignment_id" id="assignment_id">
                        <input type="hidden" name="assignment_customer_id" id="assignment_customer_id">
                        <div class="row">
                             <div class="col-md-6 mb-3">
                                <label class="form-label">Topic</label>
                                <input type="text" class="form-control" name="assignment_topic" id="assignment_topic">
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Service</label>
                                <select class="form-select ass_group_list assignment_service" name=""
                                    id="assignment_services"
                                    onchange="get_subject_list(this, 'https://betacpanel.globalassignmenthelp.com/api', '')"
                                    onclick="addClassFun()" data-type="blank">
                                    <option value=""> Select Services </option>
                                    <option unit_tag="Pages | Words" value="1">Assignment | Coursework | Term Paper
                                    </option>
                                    <option unit_tag="Pages | Words" value="14">Case Study | Report Writing </option>
                                    <option unit_tag="Pages | Words" value="17">Plagiarism Report</option>
                                    <option unit_tag="Pages | Words" value="16">Essay</option>
                                    <option unit_tag="Pages | Words" value="2">Dissertation & PHD Thesis</option>
                                    <option unit_tag="Pages | Words" value="13">Business Plan</option>
                                    <option unit_tag="Que. | Word/Que." value="4">Online Exam | Question based test
                                        Papers</option>
                                    <option unit_tag="Que. | Word/Que." value="15">Multiple Choice Questions </option>
                                    <option unit_tag="Pages | Words" value="5">Editing | Proofreading | Paraphrasing
                                    </option>
                                    <option unit_tag="Slides" value="8">PowerPoint Presentation</option>
                                    <option unit_tag="Poster" value="9">Poster</option>
                                    <option unit_tag="Leaflet" value="10">Leaflet</option>
                                    <option unit_tag="Pages | Words" value="6">Summary Writing</option>
                                    <option unit_tag="Pages | Words" value="7">Portfolio</option>
                                    <option unit_tag="Pages | Words" value="11">Resume / CV Services
                                    </option>
                                </select>
                                <input type="hidden" class="assignment_name" name="assignment_service" value="">
                                 <input type="hidden" class="assignment_subject_nm" name="assignment_subject_nm"
                                    value="">
                            </div>
                            <div class="col-md-6 mb-3" id="get_subb2">
                                <label class="form-label">Subject</label>
                                <div class="form-group get_subject">
                                    <select class="form-select assignment_subjects" onchange="sle_sub_name(this)"
                                        id="assignment_subject" name="type">
                                        {{-- <option value="">Select subject</option> --}}
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Words</label>
                                <input type="number" class="form-control" name="assignment_word" id="assignment_word">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Available Date</label>
                                <input type="date" class="form-control" name="assignment_available"
                                    id="assignment_available">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Deadline</label>
                                <input type="date" class="form-control" name="assignment_deadline"
                                    id="assignment_deadline">
                            </div>
                        </div>

                        <div class="d-flex justify-content-end gap-2">
                            <button type="submit" class="btn btn-dark px-4">Update Project</button>
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        function toggleCustomerDetails(id) {
            const allDetails = document.querySelectorAll('.customer-details');
            allDetails.forEach(detail => {
                if (detail.id !== id) detail.style.display = 'none';
            });

            const section = document.getElementById(id);
            section.style.display = section.style.display === 'none' || section.style.display === '' ? 'block' : 'none';
        }
    </script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.9/index.global.min.css">
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.9/index.global.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.17/index.global.min.js'></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/main.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" />

    @php
        $events = [];

        foreach ($upcommingProjects as $project) {
            $events[] = [
                'title' => $project->topic ?? 'Null',
                'start' => $project->date,
                'color' => '#27718A',
                'textColor' => '#ffffff',
                'url'   => url('customer/edit/' . $project->bd_leads->id ?? 1), 
            ];
        }

        foreach ($availableProjects as $project) {
            $events[] = [
                'title' => $project->topic ?? 'Null',
                'start' => $project->date,
                'color' => '#011014',
                'textColor' => '#ffffff',
                'url'   => url('customer/edit/' . $project->bd_leads->id ?? 1),
            ];
        }

        foreach ($overDueProjects as $project) {
            $events[] = [
                'title' => $project->topic ?? 'Null',
                'start' => $project->date,
                'color' => '#ED5353',
                'textColor' => '#ffffff',
                'url'   => url('customer/edit/' . $project->bd_leads->id ?? 1 ),
            ];
        }
    @endphp
    <script>
        const calendarEvents = @json($events);
        let calendar;
        let calendarInitialized = false;
        document.addEventListener('DOMContentLoaded', function() {
            console.log("Script started");
            const tab2Btn = document.querySelector('button[data-bs-target="#tab2"]');
            console.log("tab2", tab2Btn);

            tab2Btn.addEventListener('shown.bs.tab', () => {
                console.log("Tab2 shown");
                if (!calendarInitialized) {
                    const calendarEl = document.getElementById('calendar');

                    calendar = new FullCalendar.Calendar(calendarEl, {
                        initialView: 'dayGridMonth',
                        height: 'auto',
                        headerToolbar: {
                            left: '',
                            center: 'title',
                            right: 'prev,next today'
                        },
                        events: calendarEvents,
                    });

                    calendar.render();
                    calendarInitialized = true;
                }
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            toastr.options = {
                'closeButton': true,
                'debug': false,
                'newestOnTop': false,
                'progressBar': false,
                'positionClass': 'toast-top-right',
                'preventDuplicates': false,
                'showDuration': '1000',
                'hideDuration': '1000',
                'timeOut': '5000',
                'extendedTimeOut': '1000',
                'showEasing': 'swing',
                'hideEasing': 'linear',
                'showMethod': 'fadeIn',
                'hideMethod': 'fadeOut',
            }
        });
        $('#success').click(function(event) {
            toastr.success('You clicked Success toast');
        });
        $('#error').click(function(event) {
            toastr.error('You clicked Error Toast')
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            $('.customer-toggle').on('click', function() {
                const targetId = $(this).data('target-id');
                const $target = $('#' + targetId);
                $target.collapse('toggle');
            });

            $(document).on('shown.bs.collapse', function(e) {
                const $icon = $(e.target).prev().find('.icon-chevron');
                $icon.removeClass('fa-chevron-down').addClass('fa-chevron-up');
            });

            $(document).on('hidden.bs.collapse', function(e) {
                const $icon = $(e.target).prev().find('.icon-chevron');
                $icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
            });
        });

        function toggleDropdown(button) {
            const menu = button.nextElementSibling;
            menu.style.display = menu.style.display === 'block' ? 'none' : 'block';

            document.querySelectorAll('.dropdown-menu').forEach(el => {
                if (el !== menu) el.style.display = 'none';
            });
        }

        document.addEventListener('click', function(e) {
            if (!e.target.closest('.ellipsis-btn')) {
                document.querySelectorAll('.dropdown-menu').forEach(menu => menu.style.display = 'none');
            }
        });

        function toggleDropdown1(button) {
            const menu = button.nextElementSibling;
            menu.style.display = menu.style.display === 'block' ? 'none' : 'block';

            document.querySelectorAll('.dropdown-menu').forEach(el => {
                if (el !== menu) el.style.display = 'none';
            });
        }

        function addProjectFun(id, name, orderId, email) {
            $('.add_customer_name').val(name);
            $('.add_customer_email').val(email);
            $("#addProject").off('submit').on('submit', function(e) {
                e.preventDefault();
                let formData = new FormData(this);
                formData.append('cust_id', id);
                formData.append('order_id', orderId)
                $.ajax({
                    url: "{{ route('addCustomerProject') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        console.log('response', response);
                        if (response.status == 200) {
                            toastr.success('Project added successfully');
                            $('#addProject')[0].reset(); // clear form
                            $('#addProjectModal').modal('hide');
                            setTimeout(() => {
                                window.location.reload();
                            }, 300)
                        } else {
                            toastr.error('Something went worng');
                        }
                    },
                    error: function(xhr) {
                        console.error("Error fetching order details:", xhr);
                        toastr.info('Error Occure');
                    }

                });
            });

        }

        function getServiceIdByText(serviceText) {
            const select = document.getElementById('assignment_services');
            for (let option of select.options) {
                if (option.text.trim() === serviceText.trim()) {
                    return option.value;
                }
            }
            return null; // Not found
        }

        function get_subject_list(selectEl, root_url1, assignment_subject_nm) {
            const $select = $(selectEl);
            const g_id = parseInt($select.val());
            const parentContainer = $select.closest('.col-md-6'); // Find nearest column

            // Toggle subject section visibility
            if ([6, 7, 8, 9, 10, 17].includes(g_id)) {
                $('#get_subb2').hide(); // This is a unique ID — assumed global
            } else {
                $('#get_subb2').show();
            }

            // Get selected option details
            const selectedOption = $select.find('option:selected');
            const unit_tag = selectedOption.attr('unit_tag') || '';
            const assignmentName = selectedOption.text().trim();

            // Set assignment name (hidden input)
            parentContainer.find('.assignment_name').val(assignmentName);

            // Show loader
            $("#wait, .overlays_ajax").show();

            $.ajax({
                url: root_url1 + "/get_subjects",
                type: "POST",
                data: {
                    g_id,
                    unit_tag,
                    assignment_subject_nm,
                    type: "web",
                    urgency: "",
                    service_group_id: g_id,
                    service_group_name: assignment_subject_nm,
                    _token: $("meta[name='csrf-token']").attr("content")
                },
                beforeSend: function() {
                    $('#assignment_subject').val(''); // Reset subject dropdown
                },
                success: function(html) {
                    html = html.replace(/sle_sub_name\((.*?)\)/g, 'sle_sub_name(this)');


                    $('.get_subject').html(html);


                    $('#assignment_subject').addClass('form-select assignment_subject');
                    $('input.assignment_subject_nm').attr('name', 'assignment_subject_nm');

                    const subjectText = $('#get_subb2').data('assignment_subject');

                    if (subjectText) {
                        $('#assignment_subject option').filter(function() {
                            return $(this).text().trim() === subjectText.trim();
                        }).prop('selected', true).trigger('change');
                    }
                    const selectedSubjectText = $('#assignment_subject option:selected').text().trim();
                    $('input.assignment_subject_nm').val(selectedSubjectText);
                    // console.log("selectedSubjectText", selectedSubjectText);

                    if (unit_tag) {
                        if (unit_tag === 'Que. | Word/Que.') {
                            $('.sPage').html(unit_tag);
                            $('#questions').append('<label>Select Urgency</label>');
                        } else {
                            $('.sPage').html(unit_tag.replace('|', '/').replace(/\s+/g, ''));
                        }
                    }
                    $('#assignment_subject').trigger('change'); // This will run sle_sub_name()


                    $("#wait, .overlays_ajax").hide();
                },
                error: function(xhr) {
                    console.error("Failed to fetch subjects:", xhr.responseText);
                    $("#wait, .overlays_ajax").hide();
                }
            });
        }

        function sle_sub_name(selectEl) {
            const selectedText = $(selectEl).find('option:selected').text().trim();
            console.log("selectedText", selectedText);
            $('input.assignment_subject_nm').val(selectedText);
        }

        function ass_select(ass_id, group_unit, group_id, words, w, q) {
            $("#wait").show();
            $(".overlays_ajax").show();

            $('.assignment').val(ass_id);
            $('#group_unit_hidden').val(group_unit);

            let pages_count_slected = $(".pages_count").val() || "";

            if (group_id == 4) {
                let no_of_q = $('#no_of_q').val();
                let no_of_w = $('#no_of_w').val();

                if (no_of_q !== '' && no_of_w !== '') {
                    pages_count_slected = Math.ceil((no_of_q * no_of_w) / words);
                    pages_count_slected = exact_page_count_get(pages_count_slected); // custom func
                    $('.pages_count').val(pages_count_slected);
                } else {
                    pages_count_slected = 1;
                    $('.pages_count').val(pages_count_slected);

                    if ($('#no_of_q').val() == '') {
                        $('.no_of_q').val(w);
                    }
                    if ($('#no_of_w').val() == '') {
                        $('.no_of_w').val(q);
                    }
                }

                $('#questin_chk, #questin_chk1').show();
                $('#q_w_calcu, #q_w_calcu1').show();
                $('#pages_count_parent, #count_pages, #count_pages_parent').hide();
            } else {
                // Non-question-based group
                $('#pages_count_parent, #count_pages_parent, #count_pages').show();
                if (group_id != 11) {
                    $('#pages_count_parent').show();
                }

                $('#questin_chk, #questin_chk1').hide();
                $('#q_w_calcu, #q_w_calcu1').hide();

                if (pages_count_slected === '') {
                    pages_count_slected = '';
                    if (group_id == 11) {
                        $('#pages_count_parent').hide();
                        pages_count_slected = 1;
                    }
                    $('#pages_count').val(pages_count_slected);
                }
            }

            let pages_count_txt = $(".pages_count option:selected").text();

            // Call a helper function, likely another Ajax or DOM update
            changewords_order(group_unit, ass_id, pages_count_slected, '');
        }

        function changewords_order(group_unit, ass_id, p_cnt_sle) {
            let g_arr = group_unit.split('|');
            $('#lable_word').html(g_arr[0]);
            let sle = '<option value="">Select</option>';
            let respages = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17",
                "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "40", "50", "60", "70",
                "80", "90", "100", "110", "120", "130", "140", "150", "160", "180", "200", "250"
            ];

            $.each(respages, function(key, val) {
                let u_sec = '';
                if (g_arr.length > 1) {
                    u_sec = ' / ' + (val * 250) + g_arr[1];
                }

                let selected = '';
                let pages = g_arr[0];
                if (val == 1) {
                    if (pages.trim() === 'Pages') pages = 'Page';
                    else if (pages.trim() === 'Slides') pages = 'Slide';
                }

                if (pages === 'Poster' || pages === 'Leaflet') {
                    pages = 'Pages / ' + pages;
                }

                if (p_cnt_sle && val == p_cnt_sle) {
                    selected = 'selected';
                }

                sle += `<option value="${val}" ${selected}>${val} ${pages} ${u_sec}</option>`;
            });

            $(".pages_count").html(sle);

            let urgency = $('.urgency').val();
            if (!urgency) urgency = '';

            // changeurgency_order(ass_id, urgency);
        }

        document.addEventListener('DOMContentLoaded', function() {
            var editModal = document.getElementById('editCustomerModal');

            editModal.addEventListener('show.bs.modal', function(event) {
                var button = event.relatedTarget;

                // Get data attributes
                var cust_id = button.getAttribute('data-id');
                var name = button.getAttribute('data-name');
                var email = button.getAttribute('data-email');
                var phone = button.getAttribute('data-phone');
                var course = button.getAttribute('data-course');
                var college = button.getAttribute('data-college');
                var intake_month = button.getAttribute('data-intake_month');
                var intake_year = button.getAttribute('data-intake_year');
                // var stage = button.getAttribute('data-stage');
                var portal_url = button.getAttribute('data-portal_url');
                var login_id = button.getAttribute('data-login_id');
                var password = button.getAttribute('data-password');


                document.getElementById('editCustomerId').value = cust_id;
                document.getElementById('editCustomerName').value = name;
                document.getElementById('editCustomerEmail').value = email;
                document.getElementById('editCustomerPhone').value = phone;
                document.getElementById('editCustomerCourse').value = course;
                document.getElementById('editCustomerCollege').value = college;
                // document.getElementById('editCustomerStage').value = stage;
                document.getElementById('editCustomerIntakeYear').value = intake_year;
                document.getElementById('editCustomerIntakeMonth').value = intake_month;
                document.getElementById('editCustomerPortal_url').value = portal_url;
                document.getElementById('editCustomerLogin_id').value = login_id;
                document.getElementById('editCustomerPassword').value = password;
            });

            var editProjectModel = document.getElementById('CustomereditProjectModal');

            editProjectModel.addEventListener('show.bs.modal', function(event) {
                $('#assignment_subject').addClass('form-select');
                var button = event.relatedTarget;
                // console.log("button", button);

                var assignmentId = button.getAttribute('data-id');
                var service = button.getAttribute('data-service');
                var subject = button.getAttribute('data-subject');
                var words = button.getAttribute('data-word');
                var date = button.getAttribute('data-date');
                var available_date = button.getAttribute('data-available_date');
                var customer_id = button.getAttribute('data-customer_id');
                var topics = button.getAttribute('data-topic');

                // console.log("assignmentId", assignmentId, 'service', service, 'subject', subject, 'words', words, 'date', date, 'available_date', available_date);
                document.getElementById('assignment_id').value = assignmentId;
                let serviceName = getServiceIdByText(service);
                document.getElementById('assignment_services').value = serviceName;
                $('.assignment_subjects').addClass('form-select');
                get_subject_list($('#assignment_services')[0],
                    'https://betacpanel.globalassignmenthelp.com/api', subject);

                document.getElementById('assignment_word').value = words;
                document.getElementById('assignment_deadline').value = date;
                document.getElementById('assignment_available').value = available_date;
                document.getElementById('assignment_customer_id').value = customer_id;
                document.getElementById('assignment_topic').value = topics;

                const subjectSelect = document.querySelector('#assignment_subject\\ assignment_subjects');
                if (subjectSelect) {
                    subjectSelect.value = subject;
                }
            });

        });

        function addClassFun() {
            setTimeout(() => {
                $(".get_subject select").addClass("form-select");
            }, 100);
        }

        function deleteCustomer(id) {
            $.ajax({
                url: "{{ route('deleteCustomer') }}", //"{{ route('addCustomerProject') }}"
                type: 'POST',
                data: {
                    id: id
                },
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(response) {
                    console.log("response", response);

                    if (response.status === 200) {
                        toastr.success(response.message);
                        window.location.reload();
                    } else {
                        toastr.error(response.message);
                    }
                },
                error: function(error) {
                    toastr.error("Error occure when deleting customer")
                }
            });

        }

        function ProjectDelete(id) {
            $.ajax({
                url: "{{ route('deleteProjectId') }}", //"{{ route('addCustomerProject') }}"
                type: 'POST',
                data: {
                    id: id
                },
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(response) {
                    console.log("response", response);

                    if (response.status === 200) {
                        toastr.success(response.message);
                        window.location.reload();
                    } else {
                        toastr.error(response.message);
                    }
                },
                error: function(error) {
                    toastr.error("Error occure when deleting customer")
                }
            });
        }
    </script>

    <script>
        $(document).ready(function() {
            toastr.options = {
                closeButton: true,
                progressBar: true,
                positionClass: "toast-top-right",
                timeOut: "5000"
            };

            @if (session('success'))
                toastr.success("{{ session('success') }}");
            @endif

            @if (session('error'))
                toastr.error("{{ session('error') }}");
            @endif
        });
document.addEventListener("DOMContentLoaded", function () {
    const params = new URLSearchParams(window.location.search);
    const activeTab = params.get("tab"); // e.g. "tab3"

    if (activeTab) {
        const triggerEl = document.querySelector(`[data-bs-target="#${activeTab}"]`);
        if (triggerEl) {
            $('#tab1').removeClass('show active');
            const tab = new bootstrap.Tab(triggerEl);
            tab.show();
            $('#tab3').addClass('show active');
        }
    } else {
        // fallback: if no ?tab=..., default to tab1
        const defaultEl = document.querySelector('[data-bs-target="#tab1"]');
        if (defaultEl) {
            new bootstrap.Tab(defaultEl).show();
        }
    }
});

        $(document).ready(function() {
            $('#clearDate').on('click', function() {
                $('#dateRange').val('');

                if ($('#dateRange').data('daterangepicker')) {
                    $('#dateRange').data('daterangepicker').setStartDate(moment());
                    $('#dateRange').data('daterangepicker').setEndDate(moment());
                    $('#dateRange').val('');
                }

                let baseUrl = window.location.href.split('?')[0];
                window.history.replaceState({}, document.title, baseUrl);

                window.location.href = baseUrl;
            });
        });
        
    </script>
    <script>
        $(document).on('change', '#assignment_subject', function() {
            const txt = $(this).find('option:selected').text().trim();
            $('.assignment_subject_nm').val(txt === 'Select subject' ? '' : txt);
        });
    </script>
@endsection