@if($records->count())
    <h5 class="mb-3">Travel Records for <strong>{{ $client->name }}</strong></h5>

    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Purpose</th>
                <th>From</th>
                <th>To</th>
                <th>Start</th>
                <th>End</th>
                <th>Estimated Cost</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($records as $index => $record)
            <tr data-bs-toggle="collapse" data-bs-target="#collapseRow{{ $index }}" class="accordion-toggle">
                <td>{{ $record->travel_purpose }}</td>
                <td>{{ $record->travel_from }}</td>
                <td>{{ $record->travel_to }}</td>
                <td>{{ $record->start_date }}</td>
                <td>{{ $record->end_date }}</td>
                <td>₹{{ number_format($record->estimated_cost, 2) }}</td>
                <td>{{ $record->status }}</td>
                <td>
                    <button class="btn btn-sm btn-outline-info" data-bs-toggle="collapse" data-bs-target="#collapseRow{{ $index }}">
                        View Details
                    </button>
                </td>
                
            </tr>
            @php
            $actualExpense = $record->expenses->sum('amount');
            $difference = $actualExpense - $record->estimated_cost;
            @endphp

            <tr>
                <td colspan="8" class="hiddenRow">
                    <div class="collapse p-3 border" id="collapseRow{{ $index }}">
                      <div class="card">
                        <div class="card-header d-flex align-items-center justify-content-between">
                          <h5 class="card-title m-0 me-2">Expense Summary</h5>
                          <div class="dropdown">
                            <button class="btn text-body-secondary p-0" type="button" id="expenseSummaryDropdown{{ $index }}" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                              <i class="mdi mdi-dots-vertical icon-24px"></i>
                            </button>
                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="expenseSummaryDropdown{{ $index }}">
                              <a class="dropdown-item" href="{{ route('travel.export', $client->id) }}" target="_blank">Export Report</a>

                            </div>
                          </div>
                        </div>
                        <div class="card-body pt-lg-3">
                          <div class="mb-3">
                            <p><strong>Travel Mode:</strong> {{ $record->travel_mode ?? 'N/A' }}</p>
                            <p><strong>Description:</strong> {{ $record->note ?? 'No additional information provided.' }}</p>
                          </div>
                  
                          <div class="d-flex align-items-center mb-3">
                            <h3 class="mb-0">₹{{ number_format($actualExpense, 2) }}</h3>
                            <span class="{{ $difference > 0 ? 'text-danger' : 'text-success' }} ms-2">
                              <i class="mdi {{ $difference > 0 ? 'mdi-arrow-up-bold' : 'mdi-arrow-down-bold' }} icon-sm"></i>
                              ₹{{ number_format($difference, 2) }}
                            </span>
                          </div>
                          <p class="mb-0">Estimated Cost: ₹{{ number_format($record->estimated_cost, 2) }}</p>
                  
                          @if($record->expenses->count())
                          <div class="mt-4">
                              <h6>Expense Breakdown</h6>
                              <div class="table-responsive">
                                  <table class="table table-bordered">
                                      <thead class="thead-light">
                                          <tr>
                                              <th>Date</th>
                                              <th>Description</th>
                                              <th class="text-end">Amount (₹)</th>
                                          </tr>
                                      </thead>
                                      <tbody>
                                          @foreach($record->expenses as $expense)
                                              <tr>
                                                  <td>{{ $expense->expense_date }}</td>
                                                  <td>{{ $expense->description }}</td>
                                                  <td class="text-end">₹{{ number_format($expense->amount, 2) }}</td>
                                              </tr>
                                          @endforeach
                                      </tbody>
                                  </table>
                              </div>
                          </div>
                      @endif
                      
                        </div>
                      </div>
                    </div>
                  </td>
                  
            </tr>
        
        
        @endforeach
        
        </tbody>
    </table>

    @php
    $totalDifference = $totalActual - $totalEstimated;
    @endphp



    <div class="col-md-5 ps-md-0">
        <hr class="d-block d-md-none my-0">
        <div class="card-header">
            <div class="d-flex justify-content-between">
                <h5 class="mb-2">Expense Report</h5>
            
            </div>
            <p class="card-subtitle mb-4">Total Expense Overview</p>
        </div>
        <div class="card-body pt-7">
            <div class="d-flex align-items-center mb-4">
                <div class="avatar">
                    <div class="avatar-initial bg-label-primary rounded">
                        <i class="mdi mdi-wallet icon-24px"></i>
                    </div>
                </div>
                <div class="ms-3 d-flex flex-column">
                    <h6 class="mb-1">₹{{ number_format($totalEstimated, 2) }}</h6>
                    <p class="mb-0">Total Estimated Expense</p>
                </div>
            </div>
            <div class="d-flex align-items-center mb-4">
                <div class="avatar">
                    <div class="avatar-initial bg-label-secondary rounded">
                        <i class="mdi mdi-credit-card icon-24px"></i>
                    </div>
                </div>
                <div class="ms-3 d-flex flex-column">
                    <h6 class="mb-1">₹{{ number_format($totalActual, 2) }}</h6>
                    <p class="mb-0">Total Actual Expense</p>
                </div>
            </div>
            <div class="d-flex align-items-center mb-4">
                <div class="avatar">
                    <div class="avatar-initial {{ $totalDifference > 0 ? 'bg-label-danger' : 'bg-label-success' }} rounded">
                        <i class="mdi mdi-cash-check icon-24px"></i>
                    </div>
                </div>
                <div class="ms-3 d-flex flex-column">
                    <h6 class="mb-1">
                        ₹{{ number_format($totalDifference, 2) }}
                    </h6>
                    <p class="mb-0">
                        <span class="{{ $totalDifference > 0 ? 'text-danger' : 'text-success' }}">
                            {{ $totalDifference > 0 ? 'Over Budget' : 'Under Budget' }}
                        </span>
                    </p>
                </div>
            </div>
            <a href="{{ route('travel.export', $client->id) }}" target="_blank" class="btn btn-primary  waves-effect waves-light" type="button">View Full Report</a>
        </div>
    </div>


@else
    <div class="alert alert-warning">No travel records found for this client.</div>
@endif