@extends('backend.layouts.app')
@section('content')
<style>
/* Responsive improvements */
@media (max-width: 768px) {
    .card-header {
        padding: 1rem 0.75rem;
    }
    
    .table-responsive {
        font-size: 14px;
    }
    
    .btn-sm {
        padding: 0.25rem 0.4rem;
        font-size: 0.75rem;
    }
    
    .badge {
        font-size: 0.7rem;
    }
    
    .form-control, .form-select {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .aiz-titlebar h1 {
        font-size: 1.5rem;
    }
    
    .table-responsive {
        font-size: 13px;
    }
    
    .btn {
        padding: 0.375rem 0.5rem;
    }
    
    .card-body {
        padding: 0.75rem;
    }
}
</style>
    <div class="aiz-titlebar text-left mt-2 mb-3">
        <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center gap-2">
            <h1 class="h3 mb-2 mb-sm-0">All Purchase Orders</h1>
            @if (Auth::user()->hasPermission('purchase.orders.create'))
                <a href="{{ route('purchase.orders.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus"></i> <span class="d-none d-sm-inline">Create Order</span>
                </a>
            @endif
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <form class="" id="sort_orders" action="" method="GET">
                    <div class="card-header">
                        <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center gap-2">
                            <div class="d-flex align-items-center flex-nowrap gap-2">
                                <label for="entries" class="text-muted fw-bold mb-0 text-nowrap">Show</label>
                                <select id="entries" class="form-select custom-select" name="entries" style="min-width: 80px;">
                                    <option value="10" {{ request('entries', 10) == 10 ? 'selected' : '' }}>10</option>
                                    <option value="20" {{ request('entries') == 20 ? 'selected' : '' }}>20</option>
                                    <option value="30" {{ request('entries') == 30 ? 'selected' : '' }}>30</option>
                                    <option value="50" {{ request('entries') == 50 ? 'selected' : '' }}>50</option>
                                    <option value="75" {{ request('entries') == 75 ? 'selected' : '' }}>75</option>
                                    <option value="all" {{ request('entries') == 'all' ? 'selected' : '' }}>All</option>
                                </select>
                                <span class="text-muted fw-bold mb-0 text-nowrap">entries</span>
                            </div>
                        </div>
                        
                        <div class="row g-2">
                            <div class="col-12 col-md-6 col-lg-4">
                                <select class="form-control" name="delivery_status" id="delivery_status">
                                    <option value="">Filter by Delivery Status</option>
                                    <option value="pending" {{ request('delivery_status') == 'pending' ? 'selected' : '' }}>Pending</option>
                                    {{-- <option value="confirmed" {{ request('delivery_status') == 'confirmed' ? 'selected' : '' }}>Confirmed</option>
                                    <option value="picked_up" {{ request('delivery_status') == 'picked_up' ? 'selected' : '' }}>Picked Up</option> --}}
                                    <option value="on_the_way" {{ request('delivery_status') == 'on_the_way' ? 'selected' : '' }}>On The Way</option>
                                    <option value="delivered" {{ request('delivery_status') == 'delivered' ? 'selected' : '' }}>Delivered</option>
                                    {{-- <option value="cancelled" {{ request('delivery_status') == 'cancelled' ? 'selected' : '' }}>Cancel</option> --}}
                                </select>
                            </div>
                            
                            <div class="col-12 col-md-6 col-lg-4">
                                <select class="form-control aiz-selectpicker" name="payment_status" id="payment_status">
                                    <option value="">Filter by Payment Status</option>
                                    <option value="pending" {{ request('payment_status') == 'pending' ? 'selected' : '' }}>Pending</option>
                                    <option value="completed" {{ request('payment_status') == 'completed' ? 'selected' : '' }}>Completed</option>
                                    <option value="refunding" {{ request('payment_status') == 'refunding' ? 'selected' : '' }}>Refunding</option>
                                    <option value="refunded" {{ request('payment_status') == 'refunded' ? 'selected' : '' }}>Refunded</option>
                                    <option value="fraud" {{ request('payment_status') == 'fraud' ? 'selected' : '' }}>Fraud</option>
                                    <option value="failed" {{ request('payment_status') == 'failed' ? 'selected' : '' }}>Failed</option>
                                    <option value="canceled" {{ request('payment_status') == 'canceled' ? 'selected' : '' }}>Canceled</option>
                                </select>
                            </div>
                       <div class="col-12 col-lg-4 table-search-input">
                                <input type="text" class="form-control input-sm" id="search" name="search"
                                    value="{{ request('search') }}"
                                    placeholder="Search Order Code & Customer">
                            </div>
                        </div>
                      
                        <!-- Filters Row -->
                       
                    </div>
                </form>

                <div class="card-body" id="orders_listing">
                    <div id="main_loader" class="c-preloader text-center p-3" style="display: none;">
    <i class="las la-spinner la-spin la-3x"></i>
</div>
<div class="table-responsive">
    <table class="table aiz-table mb-0">
        <thead>
            <tr>
                <th class="d-none d-md-table-cell">#</th>
                <th>Order Code</th>
                <th class="d-none d-lg-table-cell">Num. of Products</th>
                <th class="d-none d-sm-table-cell">Vendor</th>
                <th>Amount</th>
                <th class="d-none d-md-table-cell">Delivery Status</th>
                <th>Payment Status</th>
                <th>Order Status</th>
                <th class="text-right">Options</th>
            </tr>
        </thead>
        <tbody>
            @if ($orders->isEmpty())
                <tr>
                    <td colspan="100%" class="text-center text-muted py-4">
                        No Orders found
                    </td>
                </tr>
            @else
                @foreach ($orders as $key => $order)
                    <tr>
                        <td class="d-none d-md-table-cell">
                            {{ $key + 1 + ($orders instanceof \Illuminate\Pagination\LengthAwarePaginator ? ($orders->currentPage() - 1) * $orders->perPage() : 0) }}
                        </td>
                        <td>
                            @if (Auth::user()->hasPermission('purchase.orders.view'))
                                <a href="{{ route('purchase.orders.view', ['id' => $order->id]) }}" class="text-decoration-none">
                                    {{ $order->code }}
                                </a>
                            @else
                                {{ $order->code }}
                            @endif
                            <div class="text-muted small mt-1">
                                {{ $order->user->first_name . ' ' . $order->user->last_name ?? 'N/A' }}
                            </div>
                        </td>
                        <td class="d-none d-lg-table-cell">{{ $order->products_count ?? 0 }}</td>
                        <td class="d-none d-sm-table-cell">
                            {{ $order->user->first_name . ' ' . $order->user->last_name ?? 'N/A' }}
                        </td>
                        <td>{{ number_format($order->sub_total, 2) }}</td>
                        <td class="d-none d-md-table-cell">{{ ucfirst($order->delivery_status) }}</td>
                        @php
                            $statusColors = [
                                'pending' => 'warning',
                                'completed' => 'success',
                                'refunding' => 'info',
                                'refunded' => 'primary',
                                'fraud' => 'dark',
                                'failed' => 'danger',
                                'canceled' => 'secondary',
                            ];
                            $status = $order->payment_status;
                            $badgeColor = $statusColors[$status] ?? 'secondary';
                        @endphp

                        <td>
                            <span class="badge bg-{{ $badgeColor }} text-white">
                                {{ ucfirst($status) }}
                            </span>
                        </td>

                        @php
                            $OrderstatusColors = [
                                'pending' => 'warning',
                                'received' => 'success',
                                'confirm' => 'info',
                            ];

                            $Orderstatus = $order->status->getValue();
                            $OrderbadgeColor = $OrderstatusColors[$Orderstatus] ?? 'secondary';
                        @endphp

                        <td>
                            <span class="badge bg-{{ $OrderbadgeColor }} text-white">
                                {{ ucfirst($order->status->label()) }}
                            </span>
                        </td>

                        <td class="text-right">
                            <div class="table-actions d-flex justify-content-end gap-1">
                                @if (Auth::user()->hasPermission('purchase.orders.view'))
                                    <a href="{{ route('purchase.orders.view', ['id' => $order->id]) }}"
                                        class="btn btn-sm btn-icon btn-success">
                                        <svg class="icon svg-icon-ti-ti-eye" data-bs-toggle="tooltip" data-bs-title="View Details"
                                            xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                            <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
                                            <path
                                                d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6">
                                            </path>
                                        </svg>
                                        <span class="sr-only">View Details</span>
                                    </a>
                                @endif

                                @if (Auth::user()->hasPermission('purchase.orders.edit'))
                                    @if($order->delivery_status != 'delivered' && $order->delivery_status != 'cancelled')
                                        <a href="{{ route('purchase.orders.edit', $order->id) }}"
                                            class="btn btn-sm btn-icon btn-primary">
                                            <svg class="icon svg-icon-ti-ti-edit" data-bs-toggle="tooltip" data-bs-title="Edit"
                                                xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                stroke-linejoin="round">
                                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path>
                                                <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"></path>
                                                <path d="M16 5l3 3"></path>
                                            </svg>
                                            <span class="sr-only">Edit</span>
                                        </a>
                                    @endif
                                @endif

                                @if (Auth::user()->hasPermission('purchase.orders.delete'))
                                    <button type="button" class="btn btn-sm btn-icon btn-danger" data-bs-toggle="modal"
                                        data-bs-target="#deleteModal" 
                                        data-url="{{ route('purchase.orders.delete', $order->id) }}">
                                        <svg class="icon svg-icon-ti-ti-trash" data-bs-toggle="tooltip" data-bs-title="Delete"
                                            xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                            <path d="M4 7l16 0"></path>
                                            <path d="M10 11l0 6"></path>
                                            <path d="M14 11l0 6"></path>
                                            <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path>
                                            <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                                        </svg>
                                        <span class="sr-only">Delete</span>
                                    </button>
                                @endif
                            </div>
                        </td>
                    </tr>
                @endforeach
            @endif
        </tbody>
    </table>
</div>

@if($orders instanceof \Illuminate\Pagination\LengthAwarePaginator)
    <div
        class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center flex-wrap border-top pt-2 gap-2">
        <p class="text-muted mb-0 small">
            Showing
            <strong>{{ $orders->firstItem() }}</strong>
            to
            <strong>{{ $orders->lastItem() }}</strong>
            of
            <strong>{{ $orders->total() }}</strong>
            entries
        </p>
        <div class="aiz-pagination">
            {{ $orders->appends(request()->except('page'))->links() }}
        </div>
    </div>
@endif
                </div>
            </div>
        </div>
    </div>
@endsection
@include('backend.modal.delete_modal')
@section('javascript')

<script>
$(document).ready(function() {
    $('#sort_orders').on('submit', function(e) {
        e.preventDefault();
    });

    $('#search').on('input', function() {
        $("#main_loader").show();
        loadOrders($('#sort_orders').serialize());
    });

    $('#entries, #payment_status, #delivery_status, #date_from, #date_to').on('change', function() {
        $("#main_loader").show();
        loadOrders($('#sort_orders').serialize());
    });
    
    $('#clear_filters').on('click', function() {
        $('#search').val('');
        $('#date_from').val('');
        $('#date_to').val('');
        $('#payment_status').val('');
        $('#delivery_status').val('');
        $("#main_loader").show();
        loadOrders($('#sort_orders').serialize());
    });

    $(document).on('click', '.aiz-pagination a', function(e) {
        $("#main_loader").show();
        e.preventDefault();
        let url = $(this).attr('href');
        loadOrders(url.split('?')[1]);
    });

    function loadOrders(params) {
        $("#main_loader").show();
        $.ajax({
            url: "{{ route('purchase.orders.index') }}",
            type: "GET",
            data: params,
            success: function(response) {
                $('#orders_listing').html(response);
                $("#main_loader").hide();
            },
            error: function(xhr) {
                console.error("Error loading orders:", xhr.responseText);
                $("#main_loader").hide();
            }
        });
    }
});
$('#deleteModal').on('show.bs.modal', function (event) {
    let button = $(event.relatedTarget);
    let url = button.data('url');
    $('#deleteForm').attr('action', url);
});
</script>
@endsection