@props(['assignment'])
<livewire:admin.assignment.modals.cancel-assignment-modal :assignment_id="$assignment->id" />
<livewire:admin.assignment.modals.transfer-assignment-modal :assignment_id="$assignment->id" />
<livewire:admin.assignment.modals.change-stage-modal :assignment_id="$assignment->id" />
<livewire:admin.assignment.modals.change-phase-modal :assignment_id="$assignment->id" />
<livewire:admin.assignment.modals.unlock-assignment-modal :assignment_id="$assignment->id" />
<livewire:admin.assignment.modals.duplicate-assignment-modal :assignment_id="$assignment->id" />
<livewire:admin.assignment.modals.vehicle-inspected-modal :assignment_id="$assignment->id" />
<livewire:admin.assignment.modals.notepad-modal :assignment_id="$assignment->id" />
<livewire:admin.assignment.modals.cycle-time-pause-modal :assignment_id="$assignment->id" />
<livewire:admin.assignment.assignment-actions :assignment_id="$assignment->id" />
<livewire:admin.assignment.modals.send-complete-assignment-modal :assignment_id="$assignment->id" />

@php
    use App\Models\User;
    use Illuminate\Support\Facades\Auth;

    $alloffices = [];

    $showsidebar='YES';

    if (Auth::user()->role == User::ROLE_OFFICE_ADMIN) {

        // Check and explode multiple franchise
        if (Auth::user()->multiple_franchise) {
            $alloffices = explode(',', Auth::user()->multiple_franchise);
        } else {
            $alloffices = [];
        }

        // Add main franchise
        $alloffices[] = Auth::user()->franchise_id;

        // Remove duplicates
        $alloffices = array_unique($alloffices);

        if (!in_array($assignment->franchise_id, $alloffices)) 
        {
        $showsidebar='NO';
        }

    }
@endphp


<div class="assignment-info-section">

 <div class="row">
    @if($showsidebar=='YES')
          <div class="col-lg-2">
                                        <!-- Nav tabs -->
          <div class="nav flex-column nav-pills stagetogglebar" id="v-pills-tab" role="tablist" aria-orientation="vertical">

        <!-- Filter pills -->
        <a class="nav-link" href="{{ route('admin.assignment.show', $assignment->id) }}"  >
        <i class="bi bi-eye me-1"></i> View
        </a>

        <a class="nav-link" href="{{ route('admin.assignment.edit', $assignment->id) }}"  >
        <i class="bi bi-pencil me-1"></i> Edit
        </a>

        <div class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">
        <i class="bi bi-gear me-1"></i> Print
        </a>
        <ul class="dropdown-menu">
        <li>
         <a class="dropdown-item d-flex align-items-center" target="_new" href="{{ route('admin.assignment.print', $assignment->id) }}">
                            <i class="bi bi-file-earmark-pdf"></i><span>Assignment</span>
                        </a>
        </li>
        <li>
         <a class="dropdown-item d-flex align-items-center" target="_new" href="{{ route('admin.assignment.print.contact-letter', $assignment->id) }}">
                            <i class="bi bi-file-earmark-pdf"></i><span>Contact Letter</span>
                        </a>
        </li>
        <li>
             <a class="dropdown-item d-flex align-items-center" target="_new" href="{{ route('admin.assignment.print.cat-letter', $assignment->id) }}">
                            <i class="bi bi-file-earmark-pdf"></i><span>CAT Letter</span>
                        </a>
        </li>
        </ul>
        </div>

                <a class="nav-link align-items-center pe-0 btn-item" href="javascript:void(0)"
                x-data
                x-on:click="$dispatch('openCancelModal', { assignmentId: {{ $assignment->id }} })"
                >     <i class="bi bi-x-circle me-1"></i> Cancel
                </a>

                <a class="nav-link align-items-center pe-0 btn-item" href="{{ route('admin.assignment.dispatch', $assignment->id) }}">
                <i class="bi bi-direction me-1"></i> Dispatch
                </a>

                <div class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">
                <i class="bi bi-shuffle me-1"></i> Transfer File
                </a>
                <ul class="dropdown-menu">
                <li>
                <a class="dropdown-item d-flex align-items-center" href="javascript:void(0)"
                x-data
                x-on:click="$dispatch('openTransferModal', { assignmentId: {{ $assignment->id }} })"
                >
                <i class="bi bi-building"></i>
                <span>Office</span>
                </a>
                </li>
                </ul>
                </div>


        <a class="nav-link align-items-center pe-0 btn-item" href="{{ route('admin.assignment.billing', $assignment->id) }}">
        <i class="bi bi-currency-exchange me-1"></i> Billing
        </a>

        <a class="nav-link align-items-center pe-0 btn-item" href="javascript:void(0)"
            x-data
            x-on:click="$dispatch('openSendCompleteAssignmentModal', { assignmentId: {{ $assignment->id }} })"
            >
            <i class="bi bi-check-lg me-1"></i> Send / Complete
        </a>

        <a class="nav-link align-items-center pe-0 btn-item" href="{{ route('admin.assignment.mobile-upload', $assignment->id) }}">
        <i class="bi bi-upload me-1"></i> Mobile Upload

        </a>

        <div class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">
                <i class="bi bi-file-earmark-pdf me-1"></i> Files
                </a>
                <ul class="dropdown-menu">
                <li>
                <a class="dropdown-item d-flex align-items-center" href="{{ route('admin.assignment.file-label-update', ['id' => $assignment->id]) }}">
                            <i class="bi bi-tags"></i><span>Label Files</span>
                        </a>
                </li>
                <li>
                    <hr class="dropdown-divider">
                    </li>
                    <li>
                        <a class="dropdown-item d-flex align-items-center" href="{{ route('admin.assignment.email-file', ['id' => $assignment->id]) }}">
                            <i class="bi bi-file-earmark-pdf"></i><span>Email Files</span>
                        </a>
                    </li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                </ul>
                </div>

                <a class="nav-link align-items-center pe-0 btn-item" href="{{ route('admin.assignment.pdf-package', $assignment->id) }}">
                                    <i class="bi bi-file-earmark-pdf me-1"></i> PDF Package
                 </a>


                <div class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">
                 <i class="bi bi-file-earmark-pdf me-1"></i> Action
                </a>
                <ul class="dropdown-menu">
                <li>
                <a class="dropdown-item d-flex align-items-center"
                            href="javascript:void(0)"
                            x-data
                            x-on:click="if(confirm('Are you sure you want to unassign this file?')) { $dispatch('unassignFile', { assignmentId: {{ $assignment->id }} }) }">
                            <i class="bi bi-funnel"></i> <span>Unassign</span>
                        </a>
                </li>
               <!--  <li>
                    <hr class="dropdown-divider">
                    </li>
                    <li>
                         <a class="dropdown-item d-flex align-items-center" href="javascript:;"
                        x-data
                        x-on:click="$dispatch('showChangeStageModal', { assignmentId: {{ $assignment->id }} })"
                            >
                                <i class="bi bi-tags"></i>
                                    <span>Change Stage</span>
                        </a>
                    </li> -->
                     <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li style="display: none;">
                        <a class="dropdown-item d-flex align-items-center" href="javascript:void(0)"
                            x-data
                            x-on:click="$dispatch('showUnlockAssignmentModal', { assignmentId: {{ $assignment->id }} })"
                            >
                                <i class="bi bi-tags"></i>
                                <span>Unlock</span>
                        </a>
                    </li>
                    <li style="display: none;">
                        <hr class="dropdown-divider">
                    </li>
                    <li>
                        <a class="dropdown-item d-flex align-items-center" href="{{ route('admin.assignment.follow-up-reminder', $assignment->id) }}">
                            <i class="bi bi-list"></i><span>Follow up reminder</span>
                        </a>
                    </li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li>
                        <a class="dropdown-item d-flex align-items-center" href="javascript:void(0)"
                            x-data
                            x-on:click="$dispatch('downloadCsv', { assignmentId: {{ $assignment->id }} })"
                            >
                            <i class="bi bi-download"></i><span>Download CSV</span>
                        </a>
                    </li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li>
                        <a class="dropdown-item d-flex align-items-center" href="#"
                            x-data
                            x-on:click="$dispatch('showChangePhaseModal', { assignmentId: {{ $assignment->id }} })"
                            >
                            <i class="bi bi-file-person"></i><span>Set Segment</span>
                        </a>
                    </li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li>
                        <a class="dropdown-item d-flex align-items-center" href="javascript:void(0)"
                            x-data
                            x-on:click="$dispatch('showDuplicateAssignmentModal', { assignmentId: {{ $assignment->id }} })"
                            >
                            <i class="bi bi-file-person"></i><span>Duplicate File</span>
                        </a>
                    </li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li>
                        <a class="dropdown-item d-flex align-items-center" href="javascript:void(0)"
                        x-data
                        x-on:click="$dispatch('openCycleTimePauseModal', { assignmentId: {{ $assignment->id }} })"
                            >
                           @php /* @if(is_cycle_time_paused($assignment->id))
                                <i class="bi bi-play-fill"></i>
                                    <span>Resume Cycle Time</span>
                            @else
                                <i class="bi bi-pause-fill"></i>
                                    <span>Pause Cycle Time</span>
                            @endif */ @endphp
                        </a>
                    </li>
                </ul>
                </div>

               <a class="nav-link align-items-center pe-0 btn-item" style="    background: gray;" href="javascript:;"
                        x-data
                        x-on:click="$dispatch('showChangeStageModal', { assignmentId: {{ $assignment->id }} })"
                            >
                                <i class="bi bi-tags"></i>
                    <span>Stages</span>
                        </a>


                <a class="nav-link align-items-center pe-0 btn-item" href="{{ route('admin.assignment.supplement-form', $assignment->id) }}">    <i class="bi bi-copy  me-1"></i> Supplement
            </a>


        <div class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">
                <i class="bi bi-file-earmark-pdf me-1"></i>  Reports
                </a>
                <ul class="dropdown-menu">
                <li>
                 <a class="dropdown-item d-flex align-items-center" href="{{ route('admin.assignment.total-loss-summary', $assignment->id) }}">
                            <i class="bi bi-file-earmark-pdf"></i><span>Total Loss Summary</span>
                        </a>
                </li>
                <li>
                    <hr class="dropdown-divider">
                    </li>
                    <li>
                         <a class="dropdown-item d-flex align-items-center" href="{{ route('admin.assignment.acv-worksheet', $assignment->id) }}">
                            <i class="bi bi-file-earmark-pdf"></i><span>ACV Worksheet</span>
                        </a>
                    </li>
                     <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li>
                        <a class="dropdown-item d-flex align-items-center" href="{{ route('admin.assignment.condition-summary', $assignment->id) }}">
                            <i class="bi bi-file-earmark-pdf"></i><span>Condition Summary</span>
                        </a>
                    </li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>

                    <li>
                        <a class="dropdown-item d-flex align-items-center" href="{{ route('admin.assignment.salvage-bids', $assignment->id) }}">
                            <i class="bi bi-file-earmark-pdf"></i><span>Salvage Bids</span>
                        </a>
                    </li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li>
                        <a class="dropdown-item d-flex align-items-center" href="{{ route('admin.assignment.appraiser-report', $assignment->id) }}">
                            <i class="bi bi-file-earmark-pdf"></i><span>Appraiser Report</span>
                        </a>
                    </li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                </ul>
                </div>

<a class="nav-link align-items-center pe-0 btn-item" href="{{ route('admin.assignment.docs-and-photos', $assignment->id) }}">
               <i class="bi bi-file-earmark-pdf me-1"></i> Docs &amp; Photos
                </a>

 <a class="nav-link align-items-center pe-0 btn-item" href="javascript:void(0)"
                x-data
                x-on:click="$dispatch('openNotepadModal', { assignmentId: {{ $assignment->id }} })"
                >
                  <i class="bi bi-chat-right-text me-1"></i> Note Pad
                </a>


  <div class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">
                <i class="bi bi-file-earmark-pdf me-1"></i> EMS
                </a>
                <ul class="dropdown-menu">
                <li>
               <a class="dropdown-item d-flex align-items-center" href="{{ route('admin.import-ems', $assignment->id) }}">
                            <span>Import EMS</span>
                        </a>
                </li>
                <li>
                    <hr class="dropdown-divider">
                    </li>
                    <li>
                         <a class="dropdown-item d-flex align-items-center" href="{{ route('admin.export-ems', $assignment->id) }}">
                            <span>Export EMS</span>
                        </a>
                    </li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                </ul>
                </div>

 <a class="nav-link align-items-center pe-0 btn-item" href="{{ route('admin.assignment.file-activity', $assignment->id) }}">
                <i class="bi bi-chat-right-text me-1"></i> File Activity
                </a>

                <a class=" nav-link align-items-center pe-0 btn-item" href="javascript:void(0)"
                x-data
                x-on:click="$dispatch('openVehicleInspectedModal', { assignmentId: {{ $assignment->id }} })"
                >
                <i class="bi bi-check me-1"></i> Vehicle Inspected
            </a>



        </div>
    </div>
    <div class="col-lg-10">
        @endif

    <div class="row mt-2">
        <div class="col-4">
            <div class="row">
                <div class="col-6 text-end">
                    <p class="mb-1"><b>Appraiser Name:</b></p>
                </div>
                <div class="col-6 text-start">
                    <p class="mb-1">
                    @if(!empty($assignment->appraiser_id) && $assignment->appraiser && $showsidebar=='YES')
                    <a href="{{ route('admin.appraiser.files', $assignment->appraiser_id) }}" target="_blank" class="text-primary fw-bold">
                    {{ $assignment->appraiser->name }}
                    </a>
                    @elseif(!empty($assignment->appraiser_id) && $assignment->appraiser && $showsidebar=='NO')
                    {{ $assignment->appraiser->name }}                    
                    @else
                    <span class="text-muted">N/A</span>
                    @endif
                    </p>
                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="row">
                <div class="col-6 text-end">
                    <p class="mb-1"><b>Insurance CO:</b></p>
                </div>
                <div class="col-6 text-start">
                    <p class="mb-1">
                        @if (isset($assignment->insuranceCompany) && $showsidebar=='YES')
                        <a href="{{ route('admin.insurance_companies.edit', $assignment->insuranceCompany->id) }}" target="_blank"  class="text-primary fw-bold">
                            {{ $assignment->insuranceCompany->company_name ?? 'N/A' }}
                            @if($assignment->insuranceCompany->insurance_company_type == 'ccc_integrated')
                                <i class="bi bi-star-fill text-warning" style="color: #FFD700 !important;" title="CCC Integrated"></i>
                            @endif
                        </a>
                        @elseif(isset($assignment->insuranceCompany)  && $showsidebar=='NO')
                            {{ $assignment->insuranceCompany->company_name ?? 'N/A' }}
                            @if($assignment->insuranceCompany->insurance_company_type == 'ccc_integrated')
                                <i class="bi bi-star-fill text-warning" style="color: #FFD700 !important;" title="CCC Integrated"></i>
                            @endif
                        @else
                            @if ( !empty($assignment->web_insurance_company) )
                                {{ $assignment->web_insurance_company }}
                            @else
                                N/A
                            @endif
                        @endif
                    </p>
                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="row">
                <div class="col-6 text-end">
                    <p class="mb-1"><b>Ins Adjuster:</b></p>
                </div>
                <div class="col-6 text-start">
                    <p class="mb-1">
                    @if(!empty($assignment->adjuster) && $showsidebar=='YES' )
                    <a href="{{ route('admin.insurance_adjuster.edit', $assignment->adjuster->id) }}" target="_blank"  class="text-primary fw-bold">
                    {{ $assignment->adjuster->name }}
                    </a>
                    @elseif(!empty($assignment->adjuster) && $showsidebar=='NO' )
                    {{ $assignment->adjuster->name }}
                    @else
                    @if ( !empty($assignment->web_adjuster_first_name) )
                                {{ $assignment->web_adjuster_first_name }} {{ $assignment->web_adjuster_last_name }}
                            @else
                                <span class="text-muted">N/A</span>
                            @endif
                    @endif

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

    <div class="row mt-1">
        <div class="col-4">
            <div class="row">
                <div class="col-6 text-end">
                    <p class="mb-1"><b>Phone:</b></p>
                </div>
                <div class="col-6 text-start">
                    <p class="mb-1">{{ $assignment->appraiser?->phone_number ?? 'N/A' }}</p>
                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="row">
                <div class="col-6 text-end">
                    <p class="mb-1"><b>Fax:</b></p>
                </div>
                <div class="col-6 text-start">
                    <p class="mb-1">{{ $assignment->insuranceCompany?->phone_number ?? 'N/A' }}</p>
                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="row">
                <div class="col-6 text-end">
                    <p class="mb-1"><b>Phone:</b></p>
                </div>
                <div class="col-6 text-start">
                    <p class="mb-1">
                        @if (isset ($assignment->adjuster))
                            {{ $assignment->adjuster->phone_number }}
                        @elseif ( !empty($assignment->web_adjuster_phone_number) )
                            {{ $assignment->web_adjuster_phone_number }}
                        @else
                            N/A
                        @endif
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-1">
        <div class="col-4">
            <div class="row">
                <div class="col-6 text-end">
                    <p class="mb-1"><b>Email:</b></p>
                </div>
                <div class="col-6 text-start">
                    <p class="mb-2">{{ $assignment->appraiser?->email ?? 'N/A' }}</p>
                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="row">
                <div class="col-6 text-end">
                    <p class="mb-1"><b>Email:</b></p>
                </div>
                <div class="col-6 text-start">
                    <p class="mb-1">
                        {{ Str::limit($assignment->insuranceCompany?->email_address ?? 'N/A', 30) }}
                    </p>
                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="row">
                <div class="col-6 text-end">
                    <p class="mb-1"><b>Email:</b></p>
                </div>
                <div class="col-6 text-start">
                    <p class="mb-2">
                        @if (isset ($assignment->adjuster))
                            {{ $assignment->adjuster->email }}
                        @elseif ( !empty($assignment->web_adjuster_email_address) )
                            {{ $assignment->web_adjuster_email_address }}
                        @else
                            N/A
                        @endif
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="row my-3">
        <div class="col-12">
            <hr>
        </div>
    </div>

    <div class="row">
        <div class="col">
            <h1 class="h4">Assignment Information

            @if(!empty($assignment->insuranceCompany?->mileage_request_required) && $assignment->insuranceCompany->mileage_request_required === 'YES')
            <span class="alert alert-danger" title="Required Mileage Request" style=' padding: 0px 10px;   font-size: 15px;'>Required Mileage Request</span>
                @endif

            </h1>
            
            @if (!isset($assignment->insuranceCompany))
            <div class="alert alert-danger">
                Please select an insurance company before continuing with the billing process..
            </div>
             @endif

            
                  @if($showsidebar=='NO' )
              <a href="{{ route('admin.assignment.file-activity', $assignment->id) }}" style="float:right" class="btn btn-primary">
                        <i class="bi bi-send"></i>&nbsp;Send Message
                    </a>
               @endif

            @if (is_duplicate_file_no($assignment->file_no))
                <div class="alert alert-danger" title="Duplicate File Number">
                    <i class="bi bi-exclamation-triangle"></i> This is a duplicate file number, please contact support!
                </div>
            @endif


        </div>
    </div>

    <div class="row" style="font-size: 14px; font-weight: bold;">
        <div class="col-12">
            <div class="d-flex gap-2 mb-3">
                <div>
                    File #:
                    <a href="{{ route('admin.assignment.show', $assignment->id) }}">
                        {{ $assignment->file_no ?? 'N/A' }}
                    </a>
                </div>
                <div>|</div>
                <div>
                    Claim #: {{ $assignment->claim_number ?? 'N/A' }}
                </div>
                <div>|</div>
                <div>
                    Office: {{ $assignment->franchise?->company_name ?? 'N/A' }}
                </div>
                <div>|</div>
                <div>
                    Owner: {{ get_owner_name($assignment) }}
                </div>
                <div>|</div>
                <div>
                    Stage: <span style="background-color: {{ $assignment->status?->color ?? '' }}; padding: 3px 10px; border-radius: 5px; display: inline; color: #fff;">{{ $assignment->status?->status ?? 'N/A' }}</span>
                </div>
                <div>|</div>
                <div>
                    Segment: {{ $assignment->phase?->phase ?? 'N/A' }}
                </div>
                @if($assignment->vehicle_inspected)
                    <div>|</div>
                    <div>
                        Inspected: {{ date("m/d/Y, h:i",$assignment->vehicle_inspected ?? 'N/A') }}
                    </div>
                @endif

                <div>|</div>
                @php
                $assignment_cycle_time ='';
                $assignment_cycle_time = get_assignment_cycle_time($assignment->id);
                //$startChicagoTs = \Carbon\Carbon::parse($assignment->created_at)->setTimezone('America/Chicago')->timestamp;
                $startChicagoTs = strtotime($assignment_cycle_time);
            @endphp

            @if ($assignment_cycle_time)
            <div class="live-timer" style="color: red; ">
                <span>Cycle Time:</span>
                <span id="live-timer-{{ $assignment->id }}" class="live_timer_text" data-start-ts="{{ $startChicagoTs }}"></span>
            </div>

            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    const timerElement = document.getElementById('live-timer-{{ $assignment->id }}');
                    // Prefer a server-provided Chicago timestamp to ensure America/Chicago basis
                    const startTimestampSec = Number(timerElement?.dataset?.startTs || 0);
                    let startDate = startTimestampSec > 0 ? new Date(startTimestampSec * 1000) : null;

                    // Fallback: attempt to derive from the human string if data attribute missing
                    if (!startDate) {
                        const cycleTimeText = "{{ $assignment_cycle_time }}";
                        if (cycleTimeText.includes('ago')) {
                            const match = cycleTimeText.match(/(\d+)\s+(day|days|hour|hours|minute|minutes|second|seconds)\s+ago/);
                            if (match) {
                                const value = parseInt(match[1]);
                                const unit = match[2];
                                startDate = new Date();
                                switch(unit) {
                                    case 'day':
                                    case 'days':
                                        startDate.setDate(startDate.getDate() - value);
                                        break;
                                    case 'hour':
                                    case 'hours':
                                        startDate.setHours(startDate.getHours() - value);
                                        break;
                                    case 'minute':
                                    case 'minutes':
                                        startDate.setMinutes(startDate.getMinutes() - value);
                                        break;
                                    case 'second':
                                    case 'seconds':
                                        startDate.setSeconds(startDate.getSeconds() - value);
                                        break;
                                }
                            }
                        } else {
                            startDate = new Date(cycleTimeText);
                        }
                    }

                    if (!startDate || isNaN(startDate.getTime())) {
                        startDate = new Date();
                    }

                    function updateTimer() {
                        const now = new Date();
                        const diff = now - startDate;

                        // Calculate time components
                        const months = Math.floor(diff / (1000 * 60 * 60 * 24 * 30.44));
                        const days = Math.floor((diff % (1000 * 60 * 60 * 24 * 30.44)) / (1000 * 60 * 60 * 24));
                        const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                        const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
                        const seconds = Math.floor((diff % (1000 * 60)) / 1000);

                        // Format the timer display
                        let timerText = '';
                        if (months > 0) {
                            timerText += months + (months === 1 ? ' Month ' : ' Months ');
                        }
                        if (days > 0 || months > 0) {
                            timerText += days + (days === 1 ? ' Day ' : ' Days ');
                        }
                        timerText += hours.toString().padStart(2, '0') + ' Hrs, ' +
                                minutes.toString().padStart(2, '0') + ' Mins, ' +
                                seconds.toString().padStart(2, '0') + ' Sec';

                        timerElement.textContent = timerText;
                    }

                    // Update timer immediately and then every second
                    updateTimer();
                    setInterval(updateTimer, 1000);
                });
            </script>
            @elseif ($assignment_cycle_time != false)
            <div class="live-timer">
                <span>Cycle Time:</span>
                <span>Not started yet</span>
            </div>
            @endif
            </div>
        </div>
    </div>




    @if (session()->has('message'))
        <div class="alert alert-success alert-dismissible fade show mt-3" role="alert">
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            {{ session('message') }}
        </div>
    @endif

    <style>
        .commonsectioncontrol .col-1 {
            width: 10%;
        }
    </style>