@extends('layouts.main')

@section('content')
<div class="card">
    <div class="card-body">
        <h1>Data Pesanan</h1>
        <form method="GET" action="{{ route('order') }}">
            <div class="row">
                <div class="col-md-3 col-12 mb-2">
                    <input type="text" name="product_name" class="form-control" placeholder="Cth: kemeja pria trendy" value="{{ request('product_name') }}">
                </div>
                <div class="col-md-3 col-12 mb-2">
                    <select name="order_status" class="form-control">
                        <option value="">Pilih Status Pesanan</option>
                        @if(isset($ms_order_status))
                        @foreach($ms_order_status as $k => $v)
                        <option value="{{ $v }}" {{ request('order_status') == $v ? 'selected' : '' }}>{{ $v }}</option>
                        @endforeach
                        @endif
                    </select>
                </div>
                <div class="col-md-3 col-12 mb-2">
                    <select name="payment_status" class="form-control">
                        <option value="">Pilih Status Pembayaran</option>
                        <option value="MENUGGU_PEMBAYAAN" {{ request('payment_status') == 'MENUGGU_PEMBAYAAN' ? 'selected' : '' }}>Menunggu Pembayaran</option>
                        <option value="LUNAS" {{ request('payment_status') == 'LUNAS' ? 'selected' : '' }}>Lunas</option>
                    </select>
                </div>
                <div class="col-md-3 col-12 mb-2">
                    <input type="date" name="start_date" class="form-control mb-2" value="{{ request('start_date') }}">
                    <input type="date" name="end_date" class="form-control" value="{{ request('end_date') }}">
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-12">
                    <button type="submit" class="btn btn-primary w-100">Filter</button>
                </div>
            </div>
        </form>
        <div class="table-responsive">
            <table class="table table-striped table-bordered mt-3">
                <thead class="thead-dark">
                    <tr>
                        <th>No</th>
                        <th>Nama Produk</th>
                        <th>Status Pesanan</th>
                        <th>Status Pembayaran</th>
                        <th>Tanggal Order</th>
                        <th>Quantity</th>
                        <th>Grand Total</th>
                        <th>Catatan</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                                        @forelse($data as $order)
                    <tr>
                        <td>{{ $no }}</td>
                        <td>
                            <div class="d-flex align-items-center">
                                <!--   <div class="avatar-sm bg-light rounded p-1">
                                    <img src="{{ asset($order->products->photo) }}" alt="" class="img-fluid d-block">
                                </div> -->
                                <span class="ms-2">{{ $order->products->name }}</span>
                            </div>
                        </td>
                        <td>
                            @if(isset($order->order_status) && $order->order_status == 'MENUNGGU_PEMBAYARAN')
                            <span class="badge text-bg-warning">{{ $order->order_status }}</span>
                            @elseif(isset($order->order_status) && $order->order_status == 'DIBATALKAN')
                            <span class="badge text-bg-danger">{{ $order->order_status ?? '-' }}</span>
                            @elseif(isset($order->order_status) && $order->order_status == 'DIKIRIM')
                            <span class="badge text-bg-primary">{{ $order->order_status ?? '-' }}</span>
                            @else
                            <span class="badge text-bg-info">{{ $order->order_status ?? '-' }}</span>
                            @endif
                        </td>
                        <td>{{ $order->payment_status }}</td>
                        <td>{{ $order->created_at }}</td>
                        <td>{{ $order->qty }}</td>
                        <td>{{ number_format($order->grand_total, 2) }}</td>
                        <td>{{ $order->note ?? '-' }}</td>
                        <td>
                            @if($order->payment_status == 'MENUNGGU_PEMBAYARAN' && $order->order_status == 'MENUNGGU_PEMBAYARAN')
                            <a href="{{ route('home.order-detail', ['id' => $order->id]) }}" class="btn btn-sm btn-success mt-1">Lakukan Pembayaran</a>
                            @elseif($order->order_status == 'MENUNGGU_PEMBAYARAN')
                            <button class="btn btn-sm btn-warning mt-1 cancel-order" data-order-id="{{ $order->id }}">Batalkan Pesanan</button>
                            @elseif($order->payment_status == 'LUNAS' && $order->order_status == 'DIKIRIM')
                            <a href="{{ $order->tracking_link }}" target="_blank" class="btn btn-sm btn-danger mt-1">Lacak Pengiriman</a>
                            @endif
                        </td>
                    </tr>
                                        @empty
                    <tr>
                        <td colspan="8" class="text-center">Tidak ada data ditemukan</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        {{ $data->links('pagination::bootstrap-5') }}
    </div>
</div>

<!-- Tracking Modal -->
<div class="modal fade" id="trackingModal" tabindex="-1" aria-labelledby="trackingModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-light p-3">
                <h5 class="modal-title" id="trackingModalLabel">Tracking Status</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="trackingDetails">
                    <!-- Tracking details will be populated here -->
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Include SweetAlert library -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var trackingModal = document.getElementById('trackingModal');
        trackingModal.addEventListener('show.bs.modal', function(event) {
            var button = event.relatedTarget;
            var orderId = button.getAttribute('data-order-id');
            var modalBody = trackingModal.querySelector('.modal-body #trackingDetails');

            // Fetch tracking details using AJAX
            fetch(`/api/tracking-status/${orderId}`)
                .then(response => response.json())
                .then(data => {
                    // Populate the modal with tracking details
                    modalBody.innerHTML = `
                        <p><strong>Order ID:</strong> ${data.order_id}</p>
                        <p><strong>Status:</strong> ${data.status}</p>
                        <p><strong>Last Update:</strong> ${data.last_update}</p>
                        <p><strong>Details:</strong> ${data.details}</p>
                    `;
                })
                .catch(error => {
                    modalBody.innerHTML = '<p class="text-danger">Loading data shipment tracking...</p>';
                });
        });

        // Handle cancel order button click
        document.querySelectorAll('.cancel-order').forEach(function(button) {
            button.addEventListener('click', function() {
                var orderId = this.getAttribute('data-order-id');
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, cancel it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        fetch(`/api/cancel-order/${orderId}`, {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                }
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.error == false) {
                                    Swal.fire(
                                        'Canceled!',
                                        data.message,
                                        'success'
                                    ).then(() => {
                                        location.reload();
                                    });
                                } else {
                                    Swal.fire(
                                        'Failed!',
                                        data.message,
                                        'error'
                                    );
                                }
                            })
                            .catch(error => {
                                Swal.fire(
                                    'Error!',
                                    'An error occurred while canceling the order.',
                                    'error'
                                );
                            });
                    }
                });
            });
        });
    });
</script>
@endsection