{{-- 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 -->
    <div class="d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center mb-7">
        <div>
            <h1 class="text-gray-900 fw-bold mb-2">Booking Details</h1>
            <div class="d-flex flex-wrap align-items-center gap-3 text-muted">
                <span class="fs-4">#{{ $booking->booking_code }}</span>
                <span>•</span>
                <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'))
                }} fs-6 fw-semibold text-uppercase">
                    {{ ucfirst($booking->booking_status) }}
                </span>
                <span>•</span>
                <span>{{ $booking->start_date->format('M d, Y') }} → {{ $booking->end_date->format('M d, Y') }}</span>
            </div>
        </div>

        <a href="{{ route('admin.warehouse-bookings.index') }}" class="btn btn-light">
            <i class="ki-duotone ki-arrow-left fs-2"></i> Back to Bookings
        </a>
    </div>

    <div class="row g-6 g-xl-9">
        <!-- Left Column: Main Details -->
        <div class="col-lg-8">

            <!-- Booking Summary -->
            <div class="card shadow-sm mb-6">
                <div class="card-header bg-primary text-white border-0 py-5">
                    <h3 class="card-title text-white mb-0">Booking Information</h3>
                </div>
                <div class="card-body pt-6">
                    <div class="row g-6">
                        <div class="col-md-6">
                            <label class="text-muted fw-semibold">Customer</label>
                            <div class="mt-2">
                                <div class="fw-bold fs-5">{{ $booking->user->fullname }}</div>
                                <div class="text-gray-600">{{ $booking->user->email }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="text-muted fw-semibold">Warehouse</label>
                            <div class="mt-2">
                                <div class="fw-bold fs-5">{{ $booking->warehouse->name }}</div>
                                <div class="text-gray-600">{{ $booking->warehouse->city }}, {{ $booking->warehouse->zone ?? 'N/A' }}</div>
                            </div>
                        </div>
                    </div>

                    <div class="separator my-6"></div>

                    <div class="row g-6">
                        <div class="col-sm-4">
                            <label class="text-muted fw-semibold">Start Date</label>
                            <div class="fw-bold fs-5">{{ $booking->start_date->format('M d, Y') }}</div>
                        </div>
                        <div class="col-sm-4">
                            <label class="text-muted fw-semibold">End Date</label>
                            <div class="fw-bold fs-5">{{ $booking->end_date->format('M d, Y') }}</div>
                        </div>
                        <div class="col-sm-4">
                            <label class="text-muted fw-semibold">Duration</label>
                            <div class="fw-bold fs-5 text-primary">{{ $booking->rental_days }} days</div>
                        </div>
                    </div>

                    <div class="separator my-6"></div>

                    <div class="row g-6">
                        <div class="col-sm-6">
                            <label class="text-muted fw-semibold">Input Type</label>
                            <div class="fw-bold text-capitalize fs-5">{{ str_replace('_', ' ', $booking->input_type) }}</div>
                        </div>
                        <div class="col-sm-6">
                            <label class="text-muted fw-semibold">Calculated Space</label>
                            <div class="fw-bold fs-4 text-success">{{ number_format($booking->calculated_sqft) }} sqft</div>
                            <div class="text-gray-600">{{ $booking->calculated_pallets }} Pallets</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Space Details -->
            <div class="card shadow-sm mb-6">
                <div class="card-header border-0 py-5">
                    <h3 class="card-title fw-bold">Space Details ({{ ucfirst($booking->input_type) }})</h3>
                </div>
                <div class="card-body">
                    @if($booking->input_type === 'pallet')
                        <div class="row text-center">
                            <div class="col-4 border-end">
                                <div class="text-muted">Pallet Count</div>
                                <div class="fs-3 fw-bold text-primary">{{ $booking->pallet_count }}</div>
                            </div>
                            <div class="col-4 border-end">
                                <div class="text-muted">Length</div>
                                <div class="fs-3 fw-bold">{{ $booking->pallet_length }}"</div>
                            </div>
                            <div class="col-4">
                                <div class="text-muted">Width</div>
                                <div class="fs-3 fw-bold">{{ $booking->pallet_width }}"</div>
                            </div>
                        </div>
                    @else
                        <div class="row text-center">
                            <div class="col-3 border-end">
                                <div class="text-muted">Cartons</div>
                                <div class="fs-3 fw-bold text-primary">{{ $booking->carton_count }}</div>
                            </div>
                            <div class="col-3 border-end">
                                <div class="text-muted">L</div>
                                <div class="fs-3 fw-bold">{{ $booking->carton_length }}"</div>
                            </div>
                            <div class="col-3 border-end">
                                <div class="text-muted">W</div>
                                <div class="fs-3 fw-bold">{{ $booking->carton_width }}"</div>
                            </div>
                            <div class="col-3">
                                <div class="text-muted">H</div>
                                <div class="fs-3 fw-bold">{{ $booking->carton_height }}"</div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Labor Services -->
            @if($booking->laborItems->count() > 0)
            <div class="card shadow-sm mb-6">
                <div class="card-header border-0 py-5">
                    <h3 class="card-title fw-bold">Labor Services</h3>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle">
                            <thead class="bg-light">
                                <tr class="fw-bold text-muted">
                                    <th class="ps-6">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 pe-6">Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($booking->laborItems as $labor)
                                <tr>
                                    <td class="ps-6 fw-semibold">{{ $labor->laborType->name }}</td>
                                    <td class="text-center">{{ $labor->quantity }}</td>
                                    <td class="text-center">{{ $labor->hours }}</td>
                                    <td class="text-end text-success fw-bold">${{ number_format($labor->rate_per_hour, 2) }}</td>
                                    <td class="text-end pe-6 fw-bold">${{ number_format($labor->total_cost, 2) }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            @endif

            <!-- Equipment Rental -->
            @if($booking->equipmentItems->count() > 0)
            <div class="card shadow-sm mb-6">
                <div class="card-header border-0 py-5">
                    <h3 class="card-title fw-bold">Equipment Rental</h3>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle">
                            <thead class="bg-light">
                                <tr class="fw-bold text-muted">
                                    <th class="ps-6">Equipment</th>
                                    <th class="text-center">Qty</th>
                                    <th>Charge Type</th>
                                    <th class="text-end">Rate</th>
                                    <th class="text-center">Usage</th>
                                    <th class="text-end pe-6">Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($booking->equipmentItems as $equipment)
                                <tr>
                                    <td class="ps-6 fw-semibold">{{ $equipment->equipmentType->name }}</td>
                                    <td class="text-center">{{ $equipment->quantity }}</td>
                                    <td><span class="badge badge-light-info">{{ ucfirst($equipment->charge_type) }}</span></td>
                                    <td class="text-end text-success fw-bold">${{ number_format($equipment->rate, 2) }}</td>
                                    <td class="text-center">{{ $equipment->usage_amount }}</td>
                                    <td class="text-end pe-6 fw-bold">${{ number_format($equipment->total_cost, 2) }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            @endif

            <!-- Additional Services -->
            @if($booking->services->count() > 0)
            <div class="card shadow-sm mb-6">
                <div class="card-header border-0 py-5">
                    <h3 class="card-title fw-bold">Additional Services</h3>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle">
                            <thead class="bg-light">
                                <tr class="fw-bold text-muted">
                                    <th class="ps-6">Service Name</th>
                                    <th class="text-center">Qty</th>
                                    <th class="text-end">Unit Price</th>
                                    <th class="text-end pe-6">Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($booking->services as $service)
                                <tr>
                                    <td class="ps-6 fw-semibold">{{ $service->pivot->service_name ?? $service->name }}</td>
                                    <td class="text-center">{{ $service->pivot->quantity ?? 1 }}</td>
                                    <td class="text-end text-success fw-bold">${{ number_format($service->pivot->unit_price ?? 0, 2) }}</td>
                                    <td class="text-end pe-6 fw-bold">${{ number_format($service->pivot->total_cost ?? 0, 2) }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            @endif

        </div>

        <!-- Right Column: Status + Pricing -->
        <div class="col-lg-4">

            <!-- Quick Status Update -->
            <div class="card shadow-sm mb-6">
                <div class="card-header bg-info text-white border-0 py-5">
                    <h3 class="card-title text-white mb-0">Update Booking Status</h3>
                </div>
                <div class="card-body">
                    <label class="form-label fw-bold">Current Status</label>
                    <select class="form-select form-select-solid status-toggle-detail" data-booking-id="{{ $booking->id }}">
                        <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 class="text-muted mt-3">
                        <i class="ki-duotone ki-information fs-2 text-info"></i>
                        Email notification will be sent automatically
                    </div>
                </div>
            </div>

            <!-- Warehouse Availability -->
            <div class="card shadow-sm mb-6">
                <div class="card-header bg-warning text-dark border-0 py-5">
                    <h3 class="card-title mb-0">Warehouse Space Status</h3>
                </div>
                <div class="card-body">
                    <div class="fv-row mb-5">
                        <label class="text-muted">Total Capacity</label>
                        <div class="fs-4 fw-bold">{{ number_format($availability['max_capacity']) }} sqft</div>
                    </div>
                    <div class="fv-row mb-5">
                        <label class="text-muted">Used Space</label>
                        <div class="fs-4 fw-bold text-danger">{{ number_format($availability['used_space']) }} sqft</div>
                    </div>
                    <div class="fv-row mb-6">
                        <label class="text-muted">Available</label>
                        <div class="fs-3 fw-bold text-success">{{ number_format($availability['available_space']) }} sqft</div>
                    </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="progress h-20px">
                        <div class="progress-bar bg-{{ $barClass }}" role="progressbar" style="width: {{ $percent }}%"
                             aria-valuenow="{{ $percent }}" aria-valuemin="0" aria-valuemax="100">
                            {{ number_format($percent, 1) }}% Utilized
                        </div>
                    </div>
                </div>
            </div>

            <!-- Pricing Breakdown -->
            <div class="card shadow-sm">
                <div class="card-header bg-success text-white border-0 py-5">
                    <h3 class="card-title text-white mb-0">Pricing Summary</h3>
                </div>
                <div class="card-body pt-6">
                    <div class="d-flex justify-content-between mb-3">
                        <span>Space Cost</span>
                        <span class="fw-bold">${{ number_format($booking->space_price, 2) }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-3">
                        <span>Labor Cost</span>
                        <span class="fw-bold">${{ number_format($booking->labor_cost, 2) }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-3">
                        <span>Equipment Cost</span>
                        <span class="fw-bold">${{ number_format($booking->equipment_cost, 2) }}</span>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-between mb-3">
                        <span>Subtotal</span>
                        <span class="fw-bold">${{ number_format($booking->subtotal, 2) }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-3">
                        <span>Markup</span>
                        <span class="fw-bold text-warning">${{ number_format($booking->markup_amount, 2) }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-4">
                        <span>Tax</span>
                        <span class="fw-bold">${{ number_format($booking->tax_amount, 2) }}</span>
                    </div>
                    <hr class="border-dark">
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="fs-4 fw-bold">Final Amount</span>
                        <span class="fs-2 fw-bolder text-success">${{ number_format($booking->final_price, 2) }}</span>
                    </div>
                </div>
            </div>

            <!-- Notes -->
            @if($booking->notes)
            <div class="card shadow-sm mt-6">
                <div class="card-header border-0 py-5">
                    <h3 class="card-title fw-bold">Customer Notes</h3>
                </div>
                <div class="card-body">
                    <p class="text-gray-700 fst-italic">{{ $booking->notes }}</p>
                </div>
            </div>
            @endif

        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready(function() {
    const currentStatus = '{{ $booking->booking_status }}';
    
    // Define allowed status transitions
    const statusFlow = {
        'pending': ['confirmed', 'cancelled', 'expired'],
        'confirmed': ['active', 'cancelled', 'expired'],
        'active': ['completed', 'cancelled'],
        'completed': [], // No transitions allowed from completed
        'cancelled': [], // No transitions allowed from cancelled
        'expired': [] // No transitions allowed from expired
    };
    
    // Disable invalid status options on page load
    function updateStatusOptions() {
        const allowedStatuses = statusFlow[currentStatus] || [];
        $('.status-toggle-detail option').each(function() {
            const optionValue = $(this).val();
            if (optionValue !== currentStatus && !allowedStatuses.includes(optionValue)) {
                $(this).prop('disabled', true).css('color', '#ccc');
            }
        });
    }
    
    updateStatusOptions();
    
    $('.status-toggle-detail').on('change', function() {
        const select = $(this);
        const bookingId = select.data('booking-id');
        const newStatus = select.val();
        const oldStatus = currentStatus;
        var baseUrl = "{{ url('/') }}";
        
        // Validate transition
        const allowedTransitions = statusFlow[oldStatus] || [];
        if (!allowedTransitions.includes(newStatus) && newStatus !== oldStatus) {
            Swal.fire({
                icon: 'error',
                title: 'Invalid Status Change',
                html: `<strong>Cannot change from "${oldStatus}" to "${newStatus}"</strong><br><br>
                       Allowed transitions:<br>${allowedTransitions.length > 0 ? allowedTransitions.map(s => `• ${s}`).join('<br>') : '• No further transitions allowed'}`,
                confirmButtonColor: '#dc3545'
            });
            select.val(oldStatus); // Reset
            return;
        }

        select.prop('disabled', true);
        
        $.ajax({
            url: baseUrl + `/admin/warehouse-bookings/${bookingId}/update-status`,
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                status: newStatus
            },
            success: function(res) {
                if (res.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Updated!',
                        text: res.message || 'Booking status updated successfully',
                        timer: 2000,
                        showConfirmButton: false
                    }).then(() => location.reload());
                } else {
                    Swal.fire('Error', res.message || 'Update failed', 'error');
                    select.val(oldStatus);
                }
            },
            error: function(xhr) {
                const message = xhr.responseJSON?.message || 'Server error. Please try again.';
                Swal.fire('Error', message, 'error');
                select.val(oldStatus);
            },
            complete: function() {
                select.prop('disabled', false);
            }
        });
    });
});
</script>
@endpush