@extends('layouts.app')

@section('content')
<div class="container-fluid px-4 py-4">
    <!-- Page Header -->
    <div class="mb-4">
        <h1 class="h3 text-gray-800 mb-0">
            <i class="fas fa-search me-2"></i>Track Shipments
        </h1>
        <p class="text-muted mb-0">Track your shipments by order number</p>
    </div>

    <!-- Top Action Cards -->
    <div class="row g-4 mb-4">
        <!-- Order Tracking Card -->
        <div class="col-lg-6">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header bg-primary bg-gradient text-white py-3">
                    <h5 class="mb-0 fw-semibold">
                        <i class="fas fa-search me-2"></i>Order Tracking
                    </h5>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-3">Track shipments by entering an order number</p>
                    <form action="{{ route('shipment.track') }}" method="POST">
                        @csrf
                        <div class="input-group">
                            <span class="input-group-text bg-light">
                                <i class="fas fa-hashtag"></i>
                            </span>
                            <input type="text" 
                                   class="form-control form-control-lg" 
                                   name="order_number" 
                                   value="{{ $orderId ?? request('order_number') }}"
                                   placeholder="Enter order number..."
                                   required>
                            <button type="submit" class="btn btn-primary px-4">
                                <i class="fas fa-crosshairs me-2"></i>Track Now
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Bulk Shipping Card -->
        <div class="col-lg-6">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header bg-success bg-gradient text-white py-3">
                    <h5 class="mb-0 fw-semibold">
                        <i class="fas fa-file-upload me-2"></i>Bulk Shipping
                    </h5>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-3">Upload CSV file to process multiple shipments</p>
                    <form action="{{ route('shipment.bulk') }}" enctype="multipart/form-data" method="POST">
                        @csrf
                        <div class="row g-2">
                            <div class="col-md-5">
                                <div class="input-group">
                                    <input type="file" 
                                           name="file" 
                                           class="form-control" 
                                           accept=".csv,.txt"
                                           required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <select name="warehouse" class="form-select">
                                    <option value="" disabled selected>Select Warehouse</option>
                                    @foreach(\App\Helpers\ShipmentHelper::getBulkWarehouses() as $code => $name)
                                        <option value="{{ $code }}">{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3">
                                <div class="d-flex align-items-center h-100">
                                    <div class="form-check me-3">
                                        <input type="checkbox" 
                                               name="ignore-status" 
                                               value="1" 
                                               class="form-check-input" 
                                               id="ignoreStatus">
                                        <label class="form-check-label small" for="ignoreStatus">
                                            Ignore Status
                                        </label>
                                    </div>
                                    <button type="submit" class="btn btn-success">
                                        <i class="fas fa-bolt me-1"></i>Ship
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @if(isset($order) && isset($shipments))
    <!-- Shipments Results Section -->
    <div class="card shadow-sm border-0">
        <div class="card-header bg-white py-3">
            <div class="row align-items-center">
                <div class="col">
                    <h5 class="mb-0 fw-semibold text-gray-800">
                        <i class="fas fa-box me-2"></i>Shipments for Order #{{ $order->external_order_id }}
                    </h5>
                </div>
                <div class="col-auto">
                    <span class="badge bg-primary rounded-pill">{{ count($shipments) }} Shipment(s)</span>
                </div>
            </div>
        </div>
        
        <div class="card-body p-0">
            <!-- Shipments table -->
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="bg-light">
                        <tr>
                            <th class="px-3 py-3 text-uppercase small fw-semibold text-muted">Order / Shipment</th>
                            <th class="px-3 py-3 text-uppercase small fw-semibold text-muted" style="max-width: 200px;">Customer</th>
                            <th class="px-3 py-3 text-uppercase small fw-semibold text-muted" style="max-width: 250px;">Shipping Address</th>
                            <th class="px-3 py-3 text-uppercase small fw-semibold text-muted">Carrier</th>
                            <th class="px-3 py-3 text-uppercase small fw-semibold text-muted">Method</th>
                            <th class="px-3 py-3 text-uppercase small fw-semibold text-muted">Warehouse</th>
                            <th class="px-3 py-3 text-uppercase small fw-semibold text-muted">Tracking #</th>
                            <th class="px-3 py-3 text-uppercase small fw-semibold text-muted">Submitted</th>
                            <th class="px-3 py-3 text-uppercase small fw-semibold text-muted">Shipped</th>
                            <th class="px-3 py-3 text-uppercase small fw-semibold text-muted text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($shipments as $shipment)
                            @php
                                $tracking_number = $shipment->tracking_number ?: 'N/A';
                                $date_shipped = $shipment->date_shipped 
                                    ? \Carbon\Carbon::parse($shipment->date_shipped)->format('M j, g:i a')
                                    : 'N/A';
                                    
                                // Determine shipment status
                                $status = 'pending';
                                $statusClass = 'bg-secondary';
                                $statusText = 'Pending';
                                
                                if ($shipment->date_delivery) {
                                    $status = 'delivered';
                                    $statusClass = 'bg-success';
                                    $statusText = 'Delivered';
                                } elseif ($shipment->date_shipped) {
                                    $status = 'shipped';
                                    $statusClass = 'bg-info';
                                    $statusText = 'Shipped';
                                } elseif ($shipment->tracking_number) {
                                    $status = 'label_created';
                                    $statusClass = 'bg-warning';
                                    $statusText = 'Label Created';
                                }
                            @endphp
                            
                            <tr class="align-middle">
                                <td class="px-3">
                                    <div class="d-flex flex-column">
                                        <a href="{{ url('/orders/' . $order->order_id) }}" 
                                           class="text-decoration-none mb-1">
                                            <span class="badge bg-primary">
                                                {{ $order->external_order_id }}
                                            </span>
                                        </a>
                                        <small class="text-muted">
                                            <i class="fas fa-box me-1"></i>
                                            #{{ $shipment->external_shipment_id ?: $shipment->shipment_id }}
                                        </small>
                                    </div>
                                </td>
                                <td class="px-3 text-truncate" style="max-width: 200px;">
                                    <div>
                                        <div class="fw-semibold">
                                            {{ !empty($order->shipping_company) ? $order->shipping_company : $order->shipping_name }}
                                        </div>
                                        @if(!empty($order->shipping_email))
                                            <small class="text-muted">{{ $order->shipping_email }}</small>
                                        @endif
                                    </div>
                                </td>
                                <td class="px-3" style="max-width: 250px;">
                                    <div class="small">
                                        <div>{{ $order->shipping_street_address }}</div>
                                        <div>{{ $order->shipping_city }}, {{ $order->shipping_state }} {{ $order->shipping_zip }}</div>
                                        <div class="text-muted">{{ $order->shipping_country }}</div>
                                    </div>
                                </td>
                                <td class="px-3">
                                    @if($shipment->carrier)
                                        <span class="badge bg-light text-dark">
                                            <i class="fas fa-truck me-1"></i>{{ strtoupper($shipment->carrier) }}
                                        </span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td class="px-3">
                                    <small>{{ $shipment->shipment_method ?: '-' }}</small>
                                </td>
                                <td class="px-3">
                                    <span class="badge bg-secondary">{{ $shipment->warehouse_id }}</span>
                                </td>
                                <td class="px-3">
                                    @if($tracking_number !== 'N/A')
                                        <div class="d-flex align-items-center">
                                            <code class="me-2">{{ $tracking_number }}</code>
                                            <span class="badge {{ $statusClass }} rounded-pill small">{{ $statusText }}</span>
                                        </div>
                                    @else
                                        <span class="text-muted">{{ $tracking_number }}</span>
                                    @endif
                                </td>
                                <td class="px-3">
                                    <small>{{ \Carbon\Carbon::parse($shipment->date_submitted)->format('M j, g:i a') }}</small>
                                </td>
                                <td class="px-3">
                                    <small>{{ $date_shipped }}</small>
                                </td>
                                <td class="px-3 text-center">
                                    <div class="btn-group btn-group-sm" role="group">
                                        @if($shipment->tracking_number && $shipment->carrier)
                                            @php
                                                $trackingUrl = '#';
                                                $carrier = strtolower($shipment->carrier);
                                                $tracking = $shipment->tracking_number;
                                                
                                                $trackingUrls = [
                                                    'ups' => "https://www.ups.com/track?tracknum={$tracking}",
                                                    'fedex' => "https://www.fedex.com/fedextrack/?tracknumbers={$tracking}",
                                                    'usps' => "https://tools.usps.com/go/TrackConfirmAction?tLabels={$tracking}",
                                                    'stamps_com' => "https://tools.usps.com/go/TrackConfirmAction?tLabels={$tracking}",
                                                    'dhl_express' => "https://www.dhl.com/en/express/tracking.html?AWB={$tracking}",
                                                    'amazon_shipping' => "https://track.amazon.com/tracking/{$tracking}",
                                                    'amazon_shipping_us' => "https://track.amazon.com/tracking/{$tracking}"
                                                ];
                                                
                                                $trackingUrl = $trackingUrls[$carrier] ?? '#';
                                            @endphp
                                            <button type="button" 
                                                    class="btn btn-outline-primary" 
                                                    title="Track Shipment"
                                                    onclick="window.open('{{ $trackingUrl }}', '_blank')">
                                                <i class="fas fa-map-marker-alt"></i>
                                            </button>
                                        @endif
                                        @if(!$shipment->date_shipped)
                                            <button type="button" 
                                                    class="btn btn-outline-danger" 
                                                    title="Delete Shipment"
                                                    data-bs-toggle="modal" 
                                                    data-bs-target="#deleteShipmentModal"
                                                    data-shipment-id="{{ $shipment->shipment_id }}">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="10" class="text-center py-5">
                                    <div class="text-muted">
                                        <i class="fas fa-inbox fa-3x mb-3"></i>
                                        <p class="mb-0">No shipments found for this order</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @else
    <!-- No Results Message -->
    <div class="card shadow-sm border-0">
        <div class="card-body text-center py-5">
            <i class="fas fa-search fa-3x text-muted mb-3"></i>
            <h5 class="text-muted">Track Your Shipments</h5>
            <p class="text-muted">Enter an order number above to view shipment details</p>
        </div>
    </div>
    @endif
</div>

<!-- Delete Shipment Modal -->
<div class="modal fade" id="deleteShipmentModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-0">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-triangle text-warning me-2"></i>Delete Shipment
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="mb-0">Are you sure you want to delete this shipment? This action cannot be undone.</p>
            </div>
            <div class="modal-footer border-0">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmDelete">
                    <i class="fas fa-trash me-2"></i>Delete Shipment
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Custom Styles -->
<style>
    .card {
        border-radius: 0.5rem;
        transition: all 0.3s ease;
    }
    
    .card:hover {
        transform: translateY(-2px);
    }
    
    .table > tbody > tr:hover {
        background-color: rgba(0, 123, 255, 0.05) !important;
    }
    
    .badge {
        font-weight: 500;
        padding: 0.35em 0.65em;
    }
    
    code {
        background-color: #f8f9fa;
        padding: 0.2rem 0.4rem;
        border-radius: 0.25rem;
        font-size: 0.875rem;
        color: #495057;
    }
    
    .input-group-text {
        border-right: 0;
    }
    
    .form-control:focus {
        border-color: #86b7fe;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }
    
    .btn {
        font-weight: 500;
        transition: all 0.2s ease;
    }
    
    .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
</style>
@endsection

@section('scripts')
<script>
    let shipmentIdToDelete = null;
    
    document.addEventListener('DOMContentLoaded', function() {
        const deleteModal = document.getElementById('deleteShipmentModal');
        
        if (deleteModal) {
            deleteModal.addEventListener('show.bs.modal', function (event) {
                const button = event.relatedTarget;
                shipmentIdToDelete = button.getAttribute('data-shipment-id');
            });
        }
        
        const confirmBtn = document.getElementById('confirmDelete');
        if (confirmBtn) {
            confirmBtn.addEventListener('click', function() {
                if (shipmentIdToDelete) {
                    deleteShipment(shipmentIdToDelete);
                }
            });
        }
    });
    
    function deleteShipment(shipmentId) {
        // Show loading state
        const confirmBtn = document.getElementById('confirmDelete');
        const originalText = confirmBtn.innerHTML;
        confirmBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Deleting...';
        confirmBtn.disabled = true;
        
        fetch(`/shipment/delete`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
                'Accept': 'application/json',
            },
            body: JSON.stringify({ shipment: shipmentId })
        })
        .then(response => response.text())
        .then(data => {
            if (data === 'ok') {
                // Show success message
                const modal = bootstrap.Modal.getInstance(document.getElementById('deleteShipmentModal'));
                modal.hide();
                
                // Reload page with success message
                window.location.reload();
            } else {
                alert('Error deleting shipment: ' + data);
                confirmBtn.innerHTML = originalText;
                confirmBtn.disabled = false;
            }
        })
        .catch(error => {
            alert('Error deleting shipment: ' + error.message);
            confirmBtn.innerHTML = originalText;
            confirmBtn.disabled = false;
        });
    }
</script>
@endsection