{{-- Booking Code + Status --}}
<div class="booking-id-section">
    <div class="booking-id">
        <span class="booking-id-label">Booking Code:</span>
        <span class="booking-id-value">#{{ $booking->booking_code }}</span>
        <button class="copy-btn" onclick="copyText('#{{ $booking->booking_code }}')" title="Copy Code">
            <svg width="18" height="20" viewBox="0 0 16 20" fill="none">
                <path d="M1.54944 2.71375L1.54667 4.8105V15.185C1.54667 16.9578 2.98378 18.3949 4.75654 18.3949L13.2665 18.3952C12.9613 19.2581 12.1382 19.8764 11.1708 19.8764H4.75654C2.16558 19.8764 0.0651855 17.776 0.0651855 15.185V4.8105C0.0651855 3.84189 0.684885 3.01803 1.54944 2.71375ZM13.6454 0.119141C14.8727 0.119141 15.8677 1.11406 15.8677 2.34136V15.1809C15.8677 16.4082 14.8727 17.4031 13.6454 17.4031H4.75654C3.52924 17.4031 2.53432 16.4082 2.53432 15.1809V2.34136C2.53432 1.11406 3.52924 0.119141 4.75654 0.119141H13.6454ZM13.6454 1.60062H4.75654C4.34744 1.60062 4.0158 1.93226 4.0158 2.34136V15.1809C4.0158 15.59 4.34744 15.9216 4.75654 15.9216H13.6454C14.0545 15.9216 14.3862 15.59 14.3862 15.1809V2.34136C14.3862 1.93226 14.0545 1.60062 13.6454 1.60062Z" fill="#545454" />
            </svg>
        </button>
    </div>

    <div class="booking-status">
        <span class="badge px-4 py-2 fs-6
            @if($booking->booking_status == 'active') bg-success
            @elseif($booking->booking_status == 'pending') bg-warning text-dark
            @elseif($booking->booking_status == 'confirmed') bg-info
            @elseif($booking->booking_status == 'completed') bg-secondary
            @else bg-danger @endif text-white">
            {{ ucfirst(str_replace('_', ' ', $booking->booking_status)) }}
        </span>
        <div class="text-muted small mt-1 text-end">
            Booked on: {{ $booking->created_at->format('M d, Y \a\t h:i A') }}
        </div>
    </div>
</div>

{{-- Warehouse Info --}}
<div class="book-space">
<div class="section-title">Warehouse Information</div>
<div class="detail-card">
    <div class="track-detail-wp">
        <div class="detail-card track-wp">
            <div class="deatil-wp">
                <p class="label">{{ $booking->warehouse->address }}</p>
                <p class="value">{{ $booking->warehouse->city }}, {{ $booking->warehouse->state }} {{ $booking->warehouse->zipcode }}</p>
            </div>
            <div class="deatil-wp">
                <p class="label">Start Date</p>
                <p class="value">{{ $booking->start_date->format('M d, Y') }}</p>
            </div>
            <div class="deatil-wp">
                <p class="label">End Date</p>
                <p class="value">{{ $booking->end_date->format('M d, Y') }}</p>
            </div>
        </div>
        <div class="detail-card track-wp">
            <div class="deatil-wp">
                <p class="label">Rental Period</p>
                <p class="value pending-color">{{ $booking->rental_days }} Day(s)</p>
            </div>
            <div class="deatil-wp">
                <p class="label">Product Category</p>
                <p class="value">{{ $booking->productCategory->name }}</p>
            </div>
            <div class="deatil-wp">
                <p class="label">Storage Type</p>
                <p class="value green">{{ $booking->storageType->name }}</p>
            </div>
        </div>
    </div>
</div>
</div>

{{-- Space Details --}}
<div class="book-space">
    <div class="section-title">Space Details</div>
    <div class="detail-card">
        <div class="track-detail-wp">        
            <div class="section-title">
                @if ($booking->input_type === 'pallet')
                    Pallet Dimensions
                @else
                    Carton Dimensions
                @endif
            </div>
            
            <div class="detail-card track-wp">
                <div class="deatil-wp">
                    <p class="label">Input Method</p>
                    <p class="value pending-color">{{ ucfirst($booking->input_type) }}</p>
                </div>
                <div class="deatil-wp">
                    <p class="label">Total Space</p>
                    <p class="value">{{ number_format($booking->calculated_sqft, 2) }} Sq.Ft</p>
                </div>
                <div class="deatil-wp">
                    <p class="label">Pallets</p>
                    <p class="value green">{{ $booking->calculated_pallets ?? '-' }}</p>
                </div>
                <div class="deatil-wp">
                    <p class="label">Space Price</p>
                    <p class="value green">${{ number_format($booking->space_price, 2) }}</p>
                </div>
            </div>

            {{-- Conditional Dimensions Display --}}
            <div class="detail-card track-wp">
                @if ($booking->input_type === 'pallet')
                    <div class="deatil-wp">
                        <p class="label">Count</p>
                        <p class="value">{{ $booking->pallet_count }}</p>
                    </div>
                    <div class="deatil-wp">
                        <p class="label">Length</p>
                        <p class="value">{{ $booking->pallet_length }}</p>
                    </div>
                    <div class="deatil-wp">
                        <p class="label">Width</p>
                        <p class="value">{{ $booking->pallet_width }}</p>
                    </div>
                    <div class="deatil-wp">
                        <p class="label">Height</p>
                        <p class="value">{{ $booking->pallet_height ?? 'N/A' }}</p>
                    </div>
                @else
                    {{-- Example for carton or other input types --}}
                    <div class="deatil-wp">
                        <p class="label">Cartons</p>
                        <p class="value">{{ $booking->carton_count ?? '-' }}</p>
                    </div>
                    <div class="deatil-wp">
                        <p class="label">Length</p>
                        <p class="value">{{ $booking->carton_length ?? '-' }}</p>
                    </div>
                    <div class="deatil-wp">
                        <p class="label">Width</p>
                        <p class="value">{{ $booking->carton_width ?? '-' }}</p>
                    </div>
                    <div class="deatil-wp">
                        <p class="label">Height</p>
                        <p class="value">{{ $booking->carton_height ?? 'N/A' }}</p>
                    </div>
                @endif
            </div>       
        </div>       
    </div>
</div>

{{-- Labor Services --}}
@if($booking->laborItems?->count() > 0)
<div class="book-space">
<div class="section-title">Labor Services</div>
<div class="common-table">
    <div class="table-responsive">
        <table class="table table-sm">
            <thead class="table-light">
                <tr>
                    <th>Labor Type</th>
                    <th class="text-center">Qty</th>
                    <th class="text-center">Hours</th>
                    <th class="text-end">Rate/Hour</th>
                    <th class="text-end">Total</th>
                </tr>
            </thead>
            <tbody>
                @foreach($booking->laborItems as $item)
                <tr>
                    <td>{{ $item->laborType->name }}</td>
                    <td class="text-center">{{ $item->quantity }}</td>
                    <td class="text-center">{{ $item->hours }}</td>
                    <td class="text-end">${{ number_format($item->rate_per_hour, 2) }}</td>
                    <td class="text-end fw-bold">${{ number_format($item->total_cost, 2) }}</td>
                </tr>
                @endforeach
            </tbody>
            <tfoot>
                <tr class="">
                    <th colspan="4" class="text-end">Total Labor Cost:</th>
                    <th class="text-end">${{ number_format($booking->labor_cost, 2) }}</th>
                </tr>
            </tfoot>
        </table>
    </div>
</div>
</div>
@endif

{{-- Equipment Rentals --}}
@if($booking->equipmentItems?->count() > 0)
<div class="book-space">
<div class="section-title">Equipment Rentals</div>
<div class="common-table">
    <div class="table-responsive">
        <table class="table table-sm">
            <thead class="table-light">
                <tr>
                    <th>Equipment</th>
                    <th class="text-center">Qty</th>
                    <th class="text-center">Charge Type</th>
                    <th class="text-end">Rate</th>
                    <th class="text-center">Usage</th>
                    <th class="text-end">Total</th>
                </tr>
            </thead>
            <tbody>
                @foreach($booking->equipmentItems as $item)
                <tr>
                    <td>{{ $item->equipmentType->name }}</td>
                    <td class="text-center">{{ $item->quantity }}</td>
                    <td class="text-center">{{ ucfirst($item->charge_type) }}</td>
                    <td class="text-end">${{ number_format($item->rate, 2) }}</td>
                    <td class="text-center">{{ $item->usage_amount }}</td>
                    <td class="text-end fw-bold">${{ number_format($item->total_cost, 2) }}</td>
                </tr>
                @endforeach
            </tbody>
            <tfoot>
                <tr class="table-warning">
                    <th colspan="5" class="text-end">Total Equipment Cost:</th>
                    <th class="text-end">${{ number_format($booking->equipment_cost, 2) }}</th>
                </tr>
            </tfoot>
        </table>
    </div>
</div>
</div>
@endif

{{-- Additional Services --}}
@if($booking->services?->count() > 0)
<div class="section-title">Additional Services</div>
<div class="detail-card common-table">
    <div class="table-responsive">
        <table class="table table-sm">
            <thead class="table-light">
                <tr>
                    <th>Service</th>
                    <th class="text-center">Quantity</th>
                    <th class="text-end">Unit Price</th>
                    <th class="text-end">Total</th>
                </tr>
            </thead>
            <tbody>
                @foreach($booking->services as $service)
                <tr>
                    <td>{{ $service->pivot->service_name }}</td>
                    <td class="text-center">{{ $service->pivot->quantity }}</td>
                    <td class="text-end">${{ number_format($service->pivot->unit_price, 2) }}</td>
                    <td class="text-end fw-bold">${{ number_format($service->pivot->total_cost, 2) }}</td>
                </tr>
                @endforeach
            </tbody>
            <tfoot>
                <tr class="table-success text-white">
                    <th colspan="3" class="text-end">Total Services Cost:</th>
                    <th class="text-end">${{ number_format($booking->additional_services_cost, 2) }}</th>
                </tr>
            </tfoot>
        </table>
    </div>
</div>
@endif

{{-- Final Payment Summary --}}
<div class="book-space">
<div class="section-title">Payment Summary</div>
<div class="detail-card">
    <table class="table table-borderless text-white mb-0">
        <tr>
            <td>Space Rental Cost:</td>
            <td class="text-end">${{ number_format($booking->space_price, 2) }}</td>
        </tr>
        @if($booking->labor_cost > 0)
        <tr>
            <td>Labor Cost:</td>
            <td class="text-end">${{ number_format($booking->labor_cost, 2) }}</td>
        </tr>
        @endif
        @if($booking->equipment_cost > 0)
        <tr>
            <td>Equipment Cost:</td>
            <td class="text-end">${{ number_format($booking->equipment_cost, 2) }}</td>
        </tr>
        @endif
        @if($booking->additional_services_cost > 0)
        <tr>
            <td>Additional Services:</td>
            <td class="text-end">${{ number_format($booking->additional_services_cost, 2) }}</td>
        </tr>
        @endif
        <tr class="border-top border-white">
            <td class="fw-bold">Subtotal:</td>
            <td class="text-end fw-bold">${{ number_format($booking->subtotal, 2) }}</td>
        </tr>
        @if($booking->tax_amount > 0)
        <tr>
            <td>Tax & Fees:</td>
            <td class="text-end">${{ number_format($booking->tax_amount, 2) }}</td>
        </tr>
        @endif
        <tr class="border-top border-white">
            <td>
                <h5 class="mb-0">Total Amount Paid:</h5>
            </td>
            <td class="text-end">
                <h5 class="mb-0 text-success">${{ number_format($booking->final_price, 2) }}</h5>
            </td>
        </tr>
    </table>
</div>
</div>

{{-- Notes --}}
@if($booking->notes)
<div class="section-title">Notes</div>
<div class="detail-card p-4 bg-light">
    <p class="mb-0 text-muted">{{ $booking->notes }}</p>
</div>
@endif

{{-- Extend Button --}}
@if($booking->canBeExtended())
<div class="text-center mt-4">
    <button class="ark__create--quote-btn btn-lg px-5"
        onclick="prepareExtensionModal({{ $booking->id }}, '{{ $booking->booking_code }}', '{{ $booking->end_date->format('Y-m-d') }}', '{{ addslashes($booking->warehouse->name) }}')"
        data-bs-toggle="modal" data-bs-target="#warehouseExtensionModal">
        Request Extension
    </button>
</div>
@endif

{{-- Styles --}}


{{-- Copy Script --}}
<script>
    function copyText(text) {
        navigator.clipboard.writeText(text).then(() => {
            // Optional: show toast
            const toast = document.createElement('div');
            toast.innerHTML = 'Copied: ' + text;
            toast.style.cssText = 'position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:12px 24px;border-radius:50px;z-index:10000;';
            document.body.appendChild(toast);
            setTimeout(() => toast.remove(), 2000);
        });
    }
</script>