@extends('layouts.admin')

@section('title', 'Orders')
@section('page-title', 'Orders')

@push('styles')
<link rel="stylesheet" href="{{ asset('theme/vendors/simple-datatables/style.css') }}">
@endpush

@section('content')
<!-- Payment Confirmation Modal -->
<div class="modal fade" id="paymentConfirmModal" tabindex="-1" aria-labelledby="paymentConfirmModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="paymentConfirmModalLabel">Confirm Payment</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="paymentConfirmForm" method="POST">
                @csrf
                <div class="modal-body">
                    <div id="paymentDetailsContent">
                        <!-- Payment details will be loaded here -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">
                        <i class="bi bi-check-circle"></i> Confirm Payment
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Dispatch Modal -->
<div class="modal fade" id="dispatchModal" tabindex="-1" aria-labelledby="dispatchModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="dispatchModalLabel">Dispatch Order</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="dispatchForm" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <input type="hidden" name="status" value="dispatched">
                    <div class="form-group">
                        <label for="delivery_company">Delivery Company <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="delivery_company" name="delivery_company" required>
                    </div>
                    <div class="form-group">
                        <label for="tracking_number">Tracking Number <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="tracking_number" name="tracking_number" required>
                    </div>
                    <div class="form-group">
                        <label for="estimated_arrival_date">Estimated Arrival Date <span class="text-danger">*</span></label>
                        <input type="date" class="form-control" id="estimated_arrival_date" name="estimated_arrival_date" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Dispatch Order</button>
                </div>
            </form>
        </div>
    </div>
</div>

<section class="section">
    <div class="card">
        <div class="card-header">
            <h4>All Orders</h4>
        </div>
        <div class="card-body">
            <table class="table table-striped" id="table1">
                <thead>
                    <tr>
                        <th>Order #</th>
                        <th>Customer</th>
                        <th>Total</th>
                        <th>Status</th>
                        <th>Payment Status</th>
                        <th>Date</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($orders as $order)
                    <tr>
                        <td>{{ $order->order_number }}</td>
                        <td>{{ $order->user->name }}</td>
                        <td>${{ number_format($order->total_amount, 2) }}</td>
                        <td>
                            @if($order->payment_status === 'confirmed')
                                @php
                                    $nextStatus = null;
                                    if ($order->status === 'confirmed') {
                                        $nextStatus = 'accepted';
                                    } elseif ($order->status === 'accepted') {
                                        $nextStatus = 'dispatched';
                                    } elseif ($order->status === 'dispatched') {
                                        $nextStatus = 'delivered';
                                    }
                                @endphp
                                
                                @if($nextStatus)
                                    <select class="form-select form-select-sm status-dropdown" data-order-id="{{ $order->id }}" data-current-status="{{ $order->status }}" data-payment-confirmed="true" style="width: auto; display: inline-block;">
                                        <option value="{{ $order->status }}" selected>{{ ucfirst($order->status) }}</option>
                                        <option value="{{ $nextStatus }}">{{ ucfirst($nextStatus) }}</option>
                                        <option value="cancelled">Cancelled</option>
                                    </select>
                                @else
                                    <span class="badge bg-{{ $order->status === 'delivered' ? 'success' : 'danger' }}">
                                        {{ ucfirst($order->status) }}
                                    </span>
                                @endif
                            @else
                                <span class="badge bg-{{ $order->status === 'pending' ? 'warning' : ($order->status === 'cancelled' ? 'danger' : 'secondary') }}">
                                    {{ ucfirst($order->status) }}
                                </span>
                            @endif
                        </td>
                        <td>
                            @if($order->payment_receipt_path)
                                @if($order->payment_status === 'pending')
                                    <span class="badge bg-warning">Pending</span>
                                @elseif($order->payment_status === 'confirmed')
                                    <span class="badge bg-success">Confirmed</span>
                                @elseif($order->payment_status === 'rejected')
                                    <span class="badge bg-danger">Rejected</span>
                                @endif
                            @else
                                <span class="text-muted">No Receipt</span>
                            @endif
                        </td>
                        <td>{{ $order->created_at->format('M d, Y') }}</td>
                        <td>
                            <div class="d-flex gap-1 align-items-center">
                                <a href="{{ route('admin.orders.show', $order->id) }}" class="btn btn-sm btn-primary">
                                    <i class="bi bi-eye"></i> View
                                </a>
                                @if($order->payment_receipt_path && $order->payment_status === 'pending')
                                    <button type="button" class="btn btn-sm btn-success confirm-payment-btn" data-order-id="{{ $order->id }}" data-order-number="{{ $order->order_number }}" data-payment-method="{{ ucfirst($order->payment_method) }}" data-total-amount="{{ number_format($order->total_amount, 2) }}" data-receipt-path="{{ asset('storage/' . $order->payment_receipt_path) }}">
                                        <i class="bi bi-check-circle"></i> Confirm Payment
                                    </button>
                                @endif
                                @if($order->tracking_number)
                                    <span class="badge bg-info ms-1" title="Tracking: {{ $order->tracking_number }}">Tracked</span>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script src="{{ asset('theme/vendors/simple-datatables/simple-datatables.js') }}"></script>
<script>
    let table1 = document.querySelector('#table1');
    let dataTable = new simpleDatatables.DataTable(table1);

    // Handle payment confirmation button clicks
    document.querySelectorAll('.confirm-payment-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            const orderId = this.dataset.orderId;
            const orderNumber = this.dataset.orderNumber;
            const paymentMethod = this.dataset.paymentMethod;
            const totalAmount = this.dataset.totalAmount;
            const receiptPath = this.dataset.receiptPath;

            // Populate modal with payment details
            const content = `
                <div class="row">
                    <div class="col-md-6">
                        <h6>Order Information</h6>
                        <p><strong>Order Number:</strong> ${orderNumber}</p>
                        <p><strong>Payment Method:</strong> ${paymentMethod}</p>
                        <p><strong>Total Amount:</strong> $${totalAmount}</p>
                    </div>
                    <div class="col-md-6">
                        <h6>Payment Receipt</h6>
                        <img src="${receiptPath}" alt="Payment Receipt" class="img-thumbnail" style="max-width: 100%; max-height: 200px;">
                        <br>
                        <a href="${receiptPath}" target="_blank" class="btn btn-sm btn-outline-primary mt-2">
                            <i class="bi bi-eye"></i> View Full Receipt
                        </a>
                    </div>
                </div>
                <div class="alert alert-warning mt-3">
                    <i class="bi bi-exclamation-triangle"></i> Please verify the payment receipt before confirming. Once confirmed, the order status will be updated to "Confirmed".
                </div>
            `;
            document.getElementById('paymentDetailsContent').innerHTML = content;
            
            const form = document.getElementById('paymentConfirmForm');
            form.action = `/admin/orders/${orderId}/confirm-payment`;
            
            const modal = new bootstrap.Modal(document.getElementById('paymentConfirmModal'));
            modal.show();
        });
    });

    // Handle payment confirmation form submission
    document.getElementById('paymentConfirmForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const form = this;
        const formData = new FormData(form);
        
        fetch(form.action, {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
            }
        })
        .then(response => {
            if (response.redirected) {
                window.location.href = response.url;
            } else {
                return response.json();
            }
        })
        .then(data => {
            if (data && data.success) {
                bootstrap.Modal.getInstance(document.getElementById('paymentConfirmModal')).hide();
                location.reload();
            }
        })
        .catch(error => {
            console.error('Error:', error);
            location.reload();
        });
    });

    // Handle status changes
    document.querySelectorAll('.status-dropdown').forEach(function(dropdown) {
        dropdown.addEventListener('change', function() {
            const orderId = this.dataset.orderId;
            const newStatus = this.value;
            const currentStatus = this.dataset.currentStatus;
            const paymentConfirmed = this.dataset.paymentConfirmed === 'true';

            // Validate: Cannot change to accepted/dispatched/delivered if payment not confirmed
            if (!paymentConfirmed && ['accepted', 'dispatched', 'delivered'].includes(newStatus)) {
                alert('Payment must be confirmed before changing status to ' + newStatus);
                this.value = currentStatus;
                return;
            }

            // If changing to dispatched, show modal
            if (newStatus === 'dispatched' && currentStatus !== 'dispatched') {
                const modal = new bootstrap.Modal(document.getElementById('dispatchModal'));
                const form = document.getElementById('dispatchForm');
                form.action = `/admin/orders/${orderId}`;
                modal.show();
                
                // Reset dropdown if modal is closed without submitting
                document.getElementById('dispatchModal').addEventListener('hidden.bs.modal', function() {
                    dropdown.value = currentStatus;
                }, { once: true });
            } else {
                // For other status changes, submit directly
                updateOrderStatus(orderId, newStatus, dropdown);
            }
        });
    });

    // Handle dispatch form submission
    document.getElementById('dispatchForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const form = this;
        const formData = new FormData(form);
        const orderId = form.action.split('/').pop();
        
        fetch(form.action, {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                bootstrap.Modal.getInstance(document.getElementById('dispatchModal')).hide();
                location.reload();
            } else {
                alert('Error: ' + (data.message || 'Failed to update order'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while updating the order');
        });
    });

    function updateOrderStatus(orderId, status, dropdown) {
        fetch(`/admin/orders/${orderId}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: JSON.stringify({
                _method: 'PUT',
                status: status
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                dropdown.dataset.currentStatus = status;
                location.reload();
            } else {
                alert('Error: ' + (data.message || 'Failed to update order status'));
                dropdown.value = dropdown.dataset.currentStatus;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while updating the order status');
            dropdown.value = dropdown.dataset.currentStatus;
        });
    }
</script>
@endpush