{{-- resources/views/admin/warehouse-bookings/show.blade.php --}}
@extends('admin.layouts.base')

@section('title', 'Booking Details - ' . $booking->booking_code)

@section('content')
<div id="kt_app_content_container" class="app-container container-fluid">

    <!-- Page Header with Breadcrumb -->
    <div class="card card-flush mb-7">
        <div class="card-body">
            <div class="d-flex align-items-center justify-content-between">
                <div class="w-100">
                    <div class="d-flex align-items-center mb-4">
                        <div class="w-100">
                            <h2 class="text-gray-900 fw-bold">Booking Management</h2>
                            <div class="text-muted">
                                <a href="{{ route('admin.warehouse-bookings.index') }}" class="text-muted text-hover-primary">Bookings</a>
                                /
                                <span class="text-dark fw-semibold">#{{ $booking->booking_code }}</span>
                            </div>
                        </div>
                        <div class="card-toolbar d-flex w-100">
                            <a href="{{ route('admin.warehouse-bookings.by-warehouse', $booking->warehouse->id) }}" class="btn btn-light me-3 w-100">
                                <i class="fas fa-warehouse me-2"></i> View Warehouse Bookings
                            <a href="{{ route('admin.warehouse-bookings.index') }}" class="btn btn-light w-100">
                                <i class="fa-solid fa-arrow-left me-2"></i> All Bookings
                            </a>
                        </div>
                    </div>

                    <div class="d-flex flex-wrap align-items-center gap-4">
                        <div class="d-flex align-items-center">
                            <div class="symbol symbol-40px symbol-circle me-3">
                                <div class="symbol-label bg-light-{{
                                    $booking->booking_status == 'confirmed' || $booking->booking_status == 'active' ? 'success' :
                                    ($booking->booking_status == 'pending' ? 'warning' :
                                    ($booking->booking_status == 'completed' ? 'info' : 'danger'))
                                }}">
                                    <i class="ki-duotone ki-{{
                                        $booking->booking_status == 'confirmed' || $booking->booking_status == 'active' ? 'check' :
                                        ($booking->booking_status == 'pending' ? 'clock' :
                                        ($booking->booking_status == 'completed' ? 'check-circle' : 'cross-circle'))
                                    }} fs-2 text-{{
                                        $booking->booking_status == 'confirmed' || $booking->booking_status == 'active' ? 'success' :
                                        ($booking->booking_status == 'pending' ? 'warning' :
                                        ($booking->booking_status == 'completed' ? 'info' : 'danger'))
                                    }}"></i>
                                </div>
                            </div>
                            <div>
                                <div class="fw-bold fs-5">Status:
                                    <span class="badge badge-lg badge-light-{{
                                        $booking->booking_status == 'confirmed' || $booking->booking_status == 'active' ? 'success' :
                                        ($booking->booking_status == 'pending' ? 'warning' :
                                        ($booking->booking_status == 'completed' ? 'info' : 'danger'))
                                    }} text-uppercase ms-2">
                                        {{ ucfirst($booking->booking_status) }}
                                    </span>
                                </div>
                                <div class="text-muted">Booking Reference: #{{ $booking->booking_code }}</div>
                            </div>
                        </div>

                        <div class="border-start border-gray-300 ps-4">
                            <div class="text-muted">Duration</div>
                            <div class="fw-bold fs-5 text-primary">{{ $booking->rental_days }} Days</div>
                        </div>

                        <div class="border-start border-gray-300 ps-4">
                            <div class="text-muted">Period</div>
                            <div class="fw-bold">{{ $booking->start_date->format('M d, Y') }} → {{ $booking->end_date->format('M d, Y') }}</div>
                        </div>
                    </div>
                </div>

                {{-- <div class="mt-4 mt-lg-0">
                    <div class="btn-group">
                        <button type="button" class="btn btn-light-primary dropdown-toggle" data-bs-toggle="dropdown">
                            <i class="ki-duotone ki-setting-3 fs-2 me-2"></i>Actions
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#sendNotificationModal">
                                <i class="ki-duotone ki-notification fs-2 me-2"></i>Send Notification
                            </a>
                            <a class="dropdown-item" href="#" onclick="window.print()">
                                <i class="ki-duotone ki-printer fs-2 me-2"></i>Print Details
                            </a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item text-danger" href="#"
                               onclick="confirmDelete('{{ route('admin.warehouse-bookings.destroy', $booking->id) }}')">
                                <i class="ki-duotone ki-trash fs-2 me-2"></i>Delete Booking
                            </a>
                        </div>
                    </div>
                </div> --}}
            </div>
        </div>
    </div>

    <div class="row g-7">
        <!-- Left Column: Booking Details -->
        <div class="col-xl-8">

            <!-- Customer & Warehouse Information -->
            <div class="row g-7 mb-7">
                <div class="col-md-6">
                    <div class="card card-flush h-100">
                        <div class="card-header border-0 pt-7">
                            <h3 class="card-title align-items-start flex-column">
                                <span class="card-label fw-bold text-dark">Customer Information</span>
                                <span class="text-muted mt-1 fw-semibold fs-7">Primary Contact</span>
                            </h3>
                        </div>
                        <div class="card-body pt-4">
                            <div class="d-flex align-items-center mb-7">
                                <div class="symbol symbol-50px symbol-circle me-5">
                                    <img src="https://ui-avatars.com/api/?name={{ urlencode($booking->user->fullname) }}&background=0D8ABC&color=fff" alt="{{ $booking->user->fullname }}">
                                </div>
                                <div class="flex-grow-1">
                                    <div class="fw-bold fs-4 text-gray-900">{{ $booking->user->fullname }}</div>
                                    <div class="text-muted">{{ $booking->user->email }}</div>
                                    @if($booking->user->phone)
                                    <div class="text-gray-600 mt-1">
                                        <i class="ki-duotone ki-phone fs-3 me-2"></i>{{ $booking->user->phone }}
                                    </div>
                                    @endif
                                </div>
                            </div>
                            <div class="separator separator-dashed my-7"></div>
                            <div class="text-muted mb-2">Booking Created</div>
                            <div class="fw-bold">
                                <i class="ki-duotone ki-calendar-8 fs-3 text-primary me-2"></i>
                                {{ $booking->created_at->format('M d, Y H:i') }}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card card-flush h-100">
                        <div class="card-header border-0 pt-7">
                            <h3 class="card-title align-items-start flex-column">
                                <span class="card-label fw-bold text-dark">Warehouse Details</span>
                                <span class="text-muted mt-1 fw-semibold fs-7">Storage Location</span>
                            </h3>
                        </div>
                        <div class="card-body pt-4">
                            <div class="d-flex align-items-center mb-7">
                                <div class="symbol symbol-50px symbol-circle me-5">
                                    <div class="symbol symbol-50px symbol-circle me-5">
                                        <img src="https://ui-avatars.com/api/?name={{ urlencode($booking->warehouse->name) }}&background=0D8ABC&color=fff" alt="{{ $booking->user->fullname }}">
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <div class="fw-bold fs-4 text-gray-900">{{ $booking->warehouse->name }}</div>
                                    <div class="text-muted">{{ $booking->warehouse->city }}, {{ $booking->warehouse->zone ?? 'N/A' }}</div>
                                </div>
                            </div>
                            <div class="separator separator-dashed my-7"></div>
                            <div class="row g-4">
                                <div class="col-6">
                                    <div class="text-muted mb-2">Space Type</div>
                                    <div class="fw-bold text-capitalize">
                                        {{ str_replace('_', ' ', $booking->input_type) }}
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="text-muted mb-2">Total Space</div>
                                    <div class="fw-bold text-success">{{ number_format($booking->calculated_sqft) }} sqft</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Space & Storage Details -->
            <div class="card card-flush mb-7">
                <div class="card-header border-0 pt-7">
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label fw-bold text-dark">Storage Space Details</span>
                        <span class="text-muted mt-1 fw-semibold fs-7">Product Dimensions & Requirements</span>
                    </h3>
                </div>
                <div class="card-body">
                    <div class="row g-7">
                        <!-- Space Overview -->
                        <div class="col-md-6">
                            <div class="card card-bordered h-100">
                                <div class="card-header">
                                    <h4 class="card-title">Space Requirements</h4>
                                </div>
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center mb-4">
                                        <span class="text-muted">Calculated Space</span>
                                        <span class="fw-bold fs-3 text-primary">{{ number_format($booking->calculated_sqft) }} sqft</span>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center mb-4">
                                        <span class="text-muted">Pallet Equivalent</span>
                                        <span class="fw-bold fs-5">{{ $booking->calculated_pallets }} Pallets</span>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="text-muted">Daily Rate</span>
                                        <span class="fw-bold">${{ number_format($booking->space_price / $booking->rental_days, 2) }}/day</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Dimensions -->
                        <div class="col-md-6">
                            <div class="card card-bordered h-100">
                                <div class="card-header">
                                    <h4 class="card-title">Product Dimensions</h4>
                                </div>
                                <div class="card-body">
                                    @if($booking->input_type === 'pallet')
                                    <div class="row text-center">
                                        <div class="col-4">
                                            <div class="text-muted">Pallets</div>
                                            <div class="fw-bold fs-2 text-primary">{{ $booking->pallet_count }}</div>
                                        </div>
                                        <div class="col-4">
                                            <div class="text-muted">Length</div>
                                            <div class="fw-bold fs-2">{{ $booking->pallet_length }}"</div>
                                        </div>
                                        <div class="col-4">
                                            <div class="text-muted">Width</div>
                                            <div class="fw-bold fs-2">{{ $booking->pallet_width }}"</div>
                                        </div>
                                    </div>
                                    @else
                                    <div class="row text-center">
                                        <div class="col-3">
                                            <div class="text-muted">Cartons</div>
                                            <div class="fw-bold fs-2 text-primary">{{ $booking->carton_count }}</div>
                                        </div>
                                        <div class="col-3">
                                            <div class="text-muted">L</div>
                                            <div class="fw-bold fs-2">{{ $booking->carton_length }}"</div>
                                        </div>
                                        <div class="col-3">
                                            <div class="text-muted">W</div>
                                            <div class="fw-bold fs-2">{{ $booking->carton_width }}"</div>
                                        </div>
                                        <div class="col-3">
                                            <div class="text-muted">H</div>
                                            <div class="fw-bold fs-2">{{ $booking->carton_height }}"</div>
                                        </div>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Additional Services -->
            @if($booking->laborItems->count() > 0 || $booking->equipmentItems->count() > 0 || $booking->services->count() > 0)
            <div class="card card-flush">
                <div class="card-header border-0 pt-7">
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label fw-bold text-dark">Additional Services</span>
                        <span class="text-muted mt-1 fw-semibold fs-7">Labor, Equipment & Other Services</span>
                    </h3>
                </div>
                <div class="card-body">
                    <!-- Labor Services -->
                    @if($booking->laborItems->count() > 0)
                    <div class="mb-7">
                        <div class="d-flex align-items-center mb-5">
                            <div class="symbol symbol-30px symbol-circle me-3">
                                <div class="symbol-label bg-light-info">
                                    <i class="ki-duotone ki-user-tick fs-2 text-info"></i>
                                </div>
                            </div>
                            <h4 class="fw-bold mb-0">Labor Services</h4>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-hover align-middle table-row-bordered table-row-dashed gy-4">
                                <thead>
                                    <tr class="fw-bold fs-6 text-gray-800 border-bottom border-gray-200">
                                        <th class="min-w-200px px-5">Labor Type</th>
                                        <th class="text-center min-w-100px">Quantity</th>
                                        <th class="text-center min-w-100px">Hours</th>
                                        <th class="text-end min-w-100px">Rate/Hour</th>
                                        <th class="text-center min-w-120px">Total Cost</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($booking->laborItems as $labor)
                                    <tr>
                                        <td>
                                            <div class="fw-bold">{{ $labor->laborType->name }}</div>
                                        </td>
                                        <td class="text-center">
                                            <span class="badge badge-light-primary fw-bold">{{ $labor->quantity }}</span>
                                        </td>
                                        <td class="text-center fw-bold">{{ $labor->hours }}</td>
                                        <td class="text-end fw-bold text-success">${{ number_format($labor->rate_per_hour, 2) }}</td>
                                        <td class="text-end fw-bold">${{ number_format($labor->total_cost, 2) }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    @endif

                    <!-- Equipment Rental -->
                    @if($booking->equipmentItems->count() > 0)
                    <div class="mb-7">
                        <div class="d-flex align-items-center mb-5">
                            <div class="symbol symbol-30px symbol-circle me-3">
                                <div class="symbol-label bg-light-warning">
                                    <i class="ki-duotone ki-truck fs-2 text-warning"></i>
                                </div>
                            </div>
                            <h4 class="fw-bold mb-0">Equipment Rental</h4>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-hover align-middle table-row-bordered table-row-dashed gy-4">
                                <thead>
                                    <tr class="fw-bold fs-6 text-gray-800 border-bottom border-gray-200">
                                        <th class="min-w-200px px-5">Equipment</th>
                                        <th class="text-center min-w-100px">Quantity</th>
                                        <th class="min-w-120px">Charge Type</th>
                                        <th class="text-center min-w-100px">Usage</th>
                                        <th class="text-end min-w-100px">Rate</th>
                                        <th class="text-center min-w-120px">Total Cost</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($booking->equipmentItems as $equipment)
                                    <tr>
                                        <td>
                                            <div class="fw-bold">{{ $equipment->equipmentType->name }}</div>
                                        </td>
                                        <td class="text-center">
                                            <span class="badge badge-light-warning fw-bold">{{ $equipment->quantity }}</span>
                                        </td>
                                        <td>
                                            <span class="badge badge-light-info">{{ ucfirst($equipment->charge_type) }}</span>
                                        </td>
                                        <td class="text-center fw-bold">{{ $equipment->usage_amount }}</td>
                                        <td class="text-end fw-bold text-success">${{ number_format($equipment->rate, 2) }}</td>
                                        <td class="text-end fw-bold">${{ number_format($equipment->total_cost, 2) }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    @endif

                    <!-- Additional Services -->
                    @if($booking->services->count() > 0)
                    <div>
                        <div class="d-flex align-items-center mb-5">
                            <div class="symbol symbol-30px symbol-circle me-3">
                                <div class="symbol-label bg-light-success">
                                    <i class="ki-duotone ki-setting-3 fs-2 text-success"></i>
                                </div>
                            </div>
                            <h4 class="fw-bold mb-0">Additional Services</h4>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-hover align-middle table-row-bordered table-row-dashed gy-4">
                                <thead>
                                    <tr class="fw-bold fs-6 text-gray-800 border-bottom border-gray-200">
                                        <th class="min-w-250px">Service Name</th>
                                        <th class="text-center min-w-100px">Quantity</th>
                                        <th class="text-end min-w-120px">Unit Price</th>
                                        <th class="text-end min-w-120px">Total Cost</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($booking->services as $service)
                                    <tr>
                                        <td>
                                            <div class="fw-bold">{{ $service->pivot->service_name ?? $service->name }}</div>
                                        </td>
                                        <td class="text-center">
                                            <span class="badge badge-light-success fw-bold">{{ $service->pivot->quantity ?? 1 }}</span>
                                        </td>
                                        <td class="text-end fw-bold text-success">${{ number_format($service->pivot->unit_price ?? 0, 2) }}</td>
                                        <td class="text-end fw-bold">${{ number_format($service->pivot->total_cost ?? 0, 2) }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
            @endif

        </div>

        <!-- Right Column: Status & Financial -->
        <div class="col-xl-4">

            <!-- Status Management Card -->
            <div class="card card-flush mb-7">
                <div class="card-header border-0 pt-7">
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label fw-bold text-dark">Status Management</span>
                        <span class="text-muted mt-1 fw-semibold fs-7">Update Booking Status</span>
                    </h3>
                </div>
                <div class="card-body">
                    <form id="status-update-form">
                        @csrf
                        <input type="hidden" name="booking_id" value="{{ $booking->id }}">

                        <div class="mb-7">
                            <label class="form-label fw-bold mb-3">Current Status</label>
                            <div class="d-flex align-items-center">
                                <div class="symbol symbol-40px symbol-circle me-3">
                                    <div class="symbol-label bg-light-{{
                                        $booking->booking_status == 'confirmed' || $booking->booking_status == 'active' ? 'success' :
                                        ($booking->booking_status == 'pending' ? 'warning' :
                                        ($booking->booking_status == 'completed' ? 'info' : 'danger'))
                                    }}">
                                        <i class="ki-duotone ki-{{
                                            $booking->booking_status == 'confirmed' || $booking->booking_status == 'active' ? 'check' :
                                            ($booking->booking_status == 'pending' ? 'clock' :
                                            ($booking->booking_status == 'completed' ? 'check-circle' : 'cross-circle'))
                                        }} fs-2 text-{{
                                            $booking->booking_status == 'confirmed' || $booking->booking_status == 'active' ? 'success' :
                                            ($booking->booking_status == 'pending' ? 'warning' :
                                            ($booking->booking_status == 'completed' ? 'info' : 'danger'))
                                        }}"></i>
                                    </div>
                                </div>
                                <div>
                                    <div class="fw-bold fs-4 text-gray-900">{{ ucfirst($booking->booking_status) }}</div>
                                    <div class="text-muted">Last updated: {{ $booking->updated_at->format('M d, Y H:i') }}</div>
                                </div>
                            </div>
                        </div>

                        <div class="mb-7">
                            <label for="new_status" class="form-label fw-bold mb-3">Update to New Status</label>
                            <select class="form-select form-select-solid" id="new_status" name="status" data-control="select2" data-placeholder="Select new status">
                                <option value="pending" {{ $booking->booking_status == 'pending' ? 'selected' : '' }}>Pending</option>
                                <option value="confirmed" {{ $booking->booking_status == 'confirmed' ? 'selected' : '' }}>Confirmed</option>
                                <option value="active" {{ $booking->booking_status == 'active' ? 'selected' : '' }}>Active</option>
                                <option value="completed" {{ $booking->booking_status == 'completed' ? 'selected' : '' }}>Completed</option>
                                <option value="cancelled" {{ $booking->booking_status == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                                <option value="expired" {{ $booking->booking_status == 'expired' ? 'selected' : '' }}>Expired</option>
                            </select>
                        </div>

                        <div class="mb-7">
                            <label for="admin_note" class="form-label fw-bold mb-3">Admin Notes</label>
                            <textarea class="form-control" id="admin_note" name="admin_note" rows="4" placeholder="Add internal notes about this status change..."></textarea>
                            <div class="form-text text-muted mt-2">
                                <i class="ki-duotone ki-information-2 fs-3 me-2"></i>
                                This note will be added to booking history and included in email notification.
                            </div>
                        </div>

                        <div class="d-flex justify-content-end gap-3">
                            <button type="button" class="btn btn-light" id="cancel-status-change">Cancel</button>
                            <button type="submit" class="btn btn-primary" id="save-status-btn">
                                <span class="indicator-label">Update Status</span>
                                <span class="indicator-progress">Please wait...
                                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                </span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Warehouse Space Status -->
            <div class="card card-flush mb-7">
                <div class="card-header border-0 pt-7">
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label fw-bold text-dark">Warehouse Capacity</span>
                        <span class="text-muted mt-1 fw-semibold fs-7">Current Space Utilization</span>
                    </h3>
                </div>
                <div class="card-body">
                    <div class="d-flex flex-column gap-6">
                        <!-- Utilization Progress -->
                        <div>
                            @php
                                $percent = $availability['max_capacity'] > 0 ? ($availability['used_space'] / $availability['max_capacity']) * 100 : 0;
                                $barClass = $percent > 90 ? 'danger' : ($percent > 70 ? 'warning' : 'success');
                            @endphp
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <span class="text-muted">Space Utilization</span>
                                <span class="fw-bold fs-5">{{ number_format($percent, 1) }}%</span>
                            </div>
                            <div class="progress h-8px bg-light-{{ $barClass }}">
                                <div class="progress-bar bg-{{ $barClass }}" role="progressbar" style="width: {{ $percent }}%"></div>
                            </div>
                        </div>

                        <!-- Capacity Stats -->
                        <div class="row g-4">
                            <div class="col-6">
                                <div class="card card-bordered card-p-0">
                                    <div class="card-body text-center p-4">
                                        <div class="text-muted mb-2">Total Capacity</div>
                                        <div class="fw-bold fs-3">{{ number_format($availability['max_capacity']) }}</div>
                                        <div class="text-muted fs-7">sqft</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="card card-bordered card-p-0">
                                    <div class="card-body text-center p-4">
                                        <div class="text-muted mb-2">Available Space</div>
                                        <div class="fw-bold fs-3 text-success">{{ number_format($availability['available_space']) }}</div>
                                        <div class="text-muted fs-7">sqft</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Usage Details -->
                        <div>
                            <div class="text-muted mb-3">Space Allocation</div>
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span>Used Space</span>
                                <span class="fw-bold">{{ number_format($availability['used_space']) }} sqft</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <span>This Booking</span>
                                <span class="fw-bold text-primary">{{ number_format($booking->calculated_sqft) }} sqft</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Financial Summary -->
            <div class="card card-flush">
                <div class="card-header border-0 pt-7">
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label fw-bold text-dark">Financial Summary</span>
                        <span class="text-muted mt-1 fw-semibold fs-7">Booking Costs & Charges</span>
                    </h3>
                </div>
                <div class="card-body">
                    <div class="d-flex flex-column gap-5">
                        <!-- Cost Breakdown -->
                        <div>
                            <div class="text-muted mb-3">Cost Breakdown</div>
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <span>Space Rental</span>
                                <span class="fw-bold">${{ number_format($booking->space_price, 2) }}</span>
                            </div>
                            @if($booking->labor_cost > 0)
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <span>Labor Services</span>
                                <span class="fw-bold">${{ number_format($booking->labor_cost, 2) }}</span>
                            </div>
                            @endif
                            @if($booking->equipment_cost > 0)
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <span>Equipment Rental</span>
                                <span class="fw-bold">${{ number_format($booking->equipment_cost, 2) }}</span>
                            </div>
                            @endif
                            @if($booking->additional_services_cost > 0)
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <span>Additional Services</span>
                                <span class="fw-bold">${{ number_format($booking->additional_services_cost, 2) }}</span>
                            </div>
                            @endif
                        </div>

                        <!-- Totals -->
                        <div class="border-top border-gray-300 pt-5">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <span>Subtotal</span>
                                <span class="fw-bold fs-5">${{ number_format($booking->subtotal, 2) }}</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <span>
                                    <span class="badge badge-light-primary me-2">Markup</span>
                                </span>
                                <span class="fw-bold text-primary">${{ number_format($booking->tax_amount, 2) }}</span>
                            </div>
                            {{-- <div class="d-flex justify-content-between align-items-center mb-4">
                                <span>Taxes</span>
                                <span class="fw-bold">${{ number_format($booking->tax_amount, 2) }}</span>
                            </div> --}}
                        </div>

                        <!-- Final Amount -->
                        <div class="border-top border-gray-300 pt-5">
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="fs-4 fw-bold">Total Amount</span>
                                <span class="fs-2 fw-bolder text-success">${{ number_format($booking->final_price, 2) }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Customer Notes -->
            @if($booking->notes)
            <div class="card card-flush mt-7">
                <div class="card-header border-0 pt-7">
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label fw-bold text-dark">Customer Notes</span>
                        <span class="text-muted mt-1 fw-semibold fs-7">Additional Information</span>
                    </h3>
                </div>
                <div class="card-body">
                    <div class="alert alert-light-primary border border-primary border-dashed rounded">
                        <div class="d-flex">
                            <i class="ki-duotone ki-information fs-2 text-primary me-4"></i>
                            <div class="flex-grow-1">
                                <div class="text-gray-700 fst-italic">{{ $booking->notes }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif

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

<!-- Send Notification Modal -->
<div class="modal fade" id="sendNotificationModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="fw-bold">Send Notification</h2>
                <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal">
                    <i class="ki-duotone ki-cross fs-1"></i>
                </div>
            </div>
            <form id="notification-form">
                @csrf
                <input type="hidden" name="booking_id" value="{{ $booking->id }}">
                <div class="modal-body">
                    <div class="mb-4">
                        <label class="form-label">Notification Type</label>
                        <select class="form-select" name="type">
                            <option value="status_update">Status Update</option>
                            <option value="payment_reminder">Payment Reminder</option>
                            <option value="general">General Information</option>
                        </select>
                    </div>
                    <div class="mb-4">
                        <label class="form-label">Message</label>
                        <textarea class="form-control" name="message" rows="4" placeholder="Enter notification message..." required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Send Notification</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.card-flush {
    border: 0;
    box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.08);
}
.card-bordered {
    border: 1px solid #E4E6EF;
}
.card-p-0 .card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #E4E6EF;
}
.card-p-0 .card-body {
    padding: 1.5rem;
}
.progress.h-8px {
    height: 8px;
}
.symbol.symbol-50px.symbol-circle img {
    object-fit: cover;
}
.table-row-dashed tbody tr {
    border-bottom-style: dashed;
}
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready(function() {
    // Get current status from PHP
    const currentStatus = '{{ $booking->booking_status }}';
    const updateUrl = "{{ route('admin.warehouse-bookings.update-status', $booking->id) }}";

    // Initialize Select2
    $('#new_status').select2({
        minimumResultsForSearch: Infinity,
        width: '100%',
        dropdownParent: $('#status-update-form')
    });

    // Status transition rules
    const allowedTransitions = {
        'pending':   ['confirmed', 'cancelled', 'expired'],
        'confirmed': ['active', 'cancelled', 'expired'],
        'active':    ['completed', 'cancelled'],
        'completed': [],
        'cancelled': [],
        'expired':   []
    };

    // Get color class based on status
    function getStatusColorClass(status) {
        if (status === 'confirmed' || status === 'active') {
            return 'success';
        } else if (status === 'pending') {
            return 'warning';
        } else if (status === 'completed') {
            return 'info';
        } else {
            return 'danger';
        }
    }

    // Update status options based on current status
    function updateStatusOptions() {
        const select = $('#new_status');
        const allowed = allowedTransitions[currentStatus] || [];

        select.find('option').each(function() {
            const val = $(this).val();
            if (val === '' || val === currentStatus || allowed.includes(val)) {
                $(this).prop('disabled', false).removeClass('text-muted');
            } else {
                $(this).prop('disabled', true).addClass('text-muted');
            }
        });

        // Pre-select current status if nothing chosen
        if (select.val() === '') {
            select.val(currentStatus).trigger('change');
        }
    }

    updateStatusOptions();

    // Reset status form
    function resetStatusForm() {
        $('#new_status').val(currentStatus).trigger('change');
        $('#admin_note').val('');
    }

    $('#cancel-status-change').on('click', resetStatusForm);

    // Status update form submission
    $('#status-update-form').on('submit', function(e) {
        e.preventDefault();

        const newStatus = $('#new_status').val();
        const adminNote = $('#admin_note').val().trim();

        if (!newStatus || newStatus === currentStatus) {
            Swal.fire('No Change', 'Please select a different status.', 'info');
            return;
        }

        const allowed = allowedTransitions[currentStatus] || [];
        if (!allowed.includes(newStatus)) {
            Swal.fire({
                icon: 'error',
                title: 'Invalid Status Change',
                html: `<strong>Cannot change from "${currentStatus}" to "${newStatus}"</strong><br><br>
                       Allowed transitions: <strong>${allowed.join(', ') || 'None'}</strong>`,
                confirmButtonColor: '#d33'
            });
            return;
        }

        // Get color classes for current and new status
        const currentColorClass = getStatusColorClass(currentStatus);
        const newColorClass = getStatusColorClass(newStatus);
      const redirectUrl = "{{ route('admin.warehouse-bookings.by-warehouse', $booking->warehouse) }}";

        // Confirmation dialog
        Swal.fire({
            title: 'Confirm Status Update',
            html: `Are you sure you want to change the status from<br>
                   <strong class="text-${currentColorClass}">${currentStatus}</strong> to <strong class="text-${newColorClass}">${newStatus}</strong>?`,
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Yes, Update Status',
            cancelButtonText: 'Cancel',
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#6c757d'
        }).then((result) => {
            if (!result.isConfirmed) return;

            const btn = $('#save-status-btn');
            btn.prop('disabled', true);
            btn.find('.indicator-label').hide();
            btn.find('.indicator-progress').show();

            $.ajax({
                url: updateUrl,
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    status: newStatus,
                    admin_note: adminNote || ''
                },
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Status Updated!',
                            text: response.message,
                            timer: 2000,
                            showConfirmButton: false
                        }).then(() => {
                            // location.reload();
                            window.location.href = redirectUrl;
                        });
                    } else {
                        Swal.fire('Update Failed', response.message, 'error');
                        btn.prop('disabled', false);
                    }
                },
                error: function(xhr) {
                    const msg = xhr.responseJSON?.message || 'An error occurred. Please try again.';
                    Swal.fire('Error', msg, 'error');
                    btn.prop('disabled', false);
                },
                complete: function() {
                    btn.find('.indicator-progress').hide();
                    btn.find('.indicator-label').show();
                }
            });
        });
    });

    // Notification form submission
    $('#notification-form').on('submit', function(e) {
        e.preventDefault();
        // Implement notification logic here
        Swal.fire('Success', 'Notification sent successfully!', 'success');
        $('#sendNotificationModal').modal('hide');
        $(this).trigger('reset');
    });

    // Delete confirmation
    function confirmDelete(url) {
        Swal.fire({
            title: 'Delete Booking?',
            text: "This action cannot be undone! All associated data will be permanently removed.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, Delete Booking',
            cancelButtonText: 'Cancel',
            reverseButtons: true
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = url;
            }
        });
    }
});
</script>
@endpush