@props([
    'shipment' => null,
    'isEdit' => false
])

@php
    $numPieces = $isEdit ? ($shipment->num_pieces ?? 1) : 1;
    $packages = $isEdit ? ($shipment->packages ?? []) : [];
@endphp

<div class="card mb-4 card-section">
    <div class="card-header">
        <button class="btn btn-link text-decoration-none w-100 text-start" type="button" data-bs-toggle="collapse" data-bs-target="#packageInfoCollapse" aria-expanded="false">
            <i class="ri-package-line me-2"></i> 
            <span class="fw-semibold">Step 2: Package Details</span>
            <span class="badge bg-secondary ms-2" id="packageStepStatus">2</span>
        </button>
    </div>
    <div class="collapse" id="packageInfoCollapse" data-bs-parent="#shipmentForm">
        <div class="card-body">
            <div class="row">
                <div class="col-md-4 mb-3">
                    <label for="numPieces" class="form-label required-field">Number of Packages/Pieces</label>
                    <input type="number" id="numPieces" class="form-control" name="num_pieces" 
                           min="1" max="50" placeholder="e.g., 3" required
                           value="{{ $numPieces }}">
                </div>
                <div class="col-md-8 mb-3">
                    <div class="alert alert-info">
                        <i class="ri-information-line"></i> 
                        Enter the total number of packages. The system will generate individual forms for each package.
                    </div>
                </div>
            </div>

            <!-- Dynamic Package Forms Container -->
            <div id="packageFormsContainer" class="package-details-section">
                @if($isEdit && count($packages) > 0)
                    @foreach($packages as $index => $package)
                        <div class="accordion package-accordion" id="packageAccordion{{ $index + 1 }}">
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#packageCollapse{{ $index + 1 }}">
                                        Package {{ $index + 1 }}
                                    </button>
                                </h2>
                                <div id="packageCollapse{{ $index + 1 }}" class="accordion-collapse collapse">
                                    <div class="accordion-body">
                                        <div class="row">
                                            <div class="col-md-3 mb-3">
                                                <label class="form-label">Length (cm)</label>
                                                <input type="number" class="form-control package-dimension" 
                                                       data-package="{{ $index + 1 }}" data-dimension="length" 
                                                       name="packages[{{ $index + 1 }}][length]" 
                                                       value="{{ $package->length ?? '' }}">
                                            </div>
                                            <div class="col-md-3 mb-3">
                                                <label class="form-label">Width (cm)</label>
                                                <input type="number" class="form-control package-dimension" 
                                                       data-package="{{ $index + 1 }}" data-dimension="width" 
                                                       name="packages[{{ $index + 1 }}][width]" 
                                                       value="{{ $package->width ?? '' }}">
                                            </div>
                                            <div class="col-md-3 mb-3">
                                                <label class="form-label">Height (cm)</label>
                                                <input type="number" class="form-control package-dimension" 
                                                       data-package="{{ $index + 1 }}" data-dimension="height" 
                                                       name="packages[{{ $index + 1 }}][height]" 
                                                       value="{{ $package->height ?? '' }}">
                                            </div>
                                            <div class="col-md-3 mb-3">
                                                <label class="form-label">Weight (kg)</label>
                                                <input type="number" class="form-control package-weight" 
                                                       data-package="{{ $index + 1 }}" 
                                                       name="packages[{{ $index + 1 }}][weight]" step="0.1"
                                                       value="{{ $package->weight ?? '' }}">
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Contents Description</label>
                                            <textarea class="form-control" name="packages[{{ $index + 1 }}][contents]" 
                                                      rows="3" placeholder="Describe the contents of this package">{{ $package->contents ?? '' }}</textarea>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Upload Images (Max 3)</label>
                                            <input type="file" class="form-control" name="packages[{{ $index + 1 }}][images][]" multiple accept="image/*">
                                            @if($isEdit && isset($package->images) && count($package->images) > 0)
                                                <div class="mt-2">
                                                    <small>Existing images:</small>
                                                    @foreach($package->images as $image)
                                                        <span class="badge bg-secondary">{{ basename($image) }}</span>
                                                    @endforeach
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>

            <!-- Package Summary -->
            <div id="packageSummary" class="summary-section mt-4 {{ $isEdit && $numPieces > 0 ? '' : 'd-none' }}">
                <h6>Package Summary</h6>
                <div class="row">
                    <div class="col-md-3">
                        <strong>Total Packages:</strong> <span id="totalPackagesCount">{{ $numPieces }}</span>
                    </div>
                    <div class="col-md-3">
                        <strong>Total Weight:</strong> <span id="totalWeightDisplay">
                            {{ $isEdit ? number_format($shipment->total_weight ?? 0, 2) : '0' }}
                        </span> kg
                    </div>
                    <div class="col-md-3">
                        <strong>Total Volume:</strong> <span id="totalVolumeDisplay">
                            {{ $isEdit ? number_format($shipment->total_volume ?? 0, 3) : '0' }}
                        </span> m³
                    </div>
                </div>
            </div>

            <div class="mt-3">
                <button type="button" class="btn btn-success" onclick="ShipmentForm.validatePackagesSection()">
                    <i class="ri-check-line"></i> Confirm Package Details
                </button>
            </div>
        </div>
    </div>
</div>