@extends('dashboard.layouts.app')

@section('title', __('Orders'))
@section('page_heading', __('Orders'))

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard.home') }}">{{ __('Home') }}</a></li>
    <li class="breadcrumb-item active">{{ __('Orders') }}</li>
@endsection

@section('content')

<div class="card">
    <div class="card-header">
        <h3 class="card-title">{{ __('Orders') }}</h3>
        <div class="card-toolbar">
            <a href="{{ route('dashboard.orders.create') }}" class="btn btn-sm btn-success">{{ __('Create Order') }}</a>
            <button type="button" class="btn btn-sm btn-light" data-bs-toggle="collapse" data-bs-target="#filter-collapse" aria-expanded="{{ request()->has('search') ? 'true' : 'false' }}" aria-controls="filter-collapse">
                {{ __('Filters') }}
            </button>
        </div>
    </div>
    <div class="card-body">
        {{-- Filter Form --}}
        <div class="row">
            <div class="col-12">
                <div class="collapse {{ request()->has('search') ? 'show' : '' }}" id="filter-collapse">
                    <form action="{{ route('dashboard.orders.index') }}" method="GET">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label class="form-label" for="search">{{ __('Search') }}</label>
                                    <input type="text" name="search" id="search" class="form-control form-control-sm" value="{{ request('search') }}" placeholder="{{ __('Search by ID, source, status, or user...') }}">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label class="form-label" for="sort">{{ __('Sort') }}</label>
                                    <select name="sort" id="sort" class="form-select form-select-sm">
                                        <option value="created_at" {{ request('sort') == 'created_at' || !request('sort') ? 'selected' : '' }}>{{ __('Created At') }}</option>
                                        <option value="id" {{ request('sort') == 'id' ? 'selected' : '' }}>{{ __('ID') }}</option>
                                        <option value="source" {{ request('sort') == 'source' ? 'selected' : '' }}>{{ __('Source') }}</option>
                                        <option value="status" {{ request('sort') == 'status' ? 'selected' : '' }}>{{ __('Status') }}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label class="form-label" for="direction">{{ __('Direction') }}</label>
                                    <select name="direction" id="direction" class="form-select form-select-sm">
                                        <option value="desc" {{ request('direction') == 'desc' || !request('direction') ? 'selected' : '' }}>{{ __('Descending') }}</option>
                                        <option value="asc" {{ request('direction') == 'asc' ? 'selected' : '' }}>{{ __('Ascending') }}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label class="form-label" for="per_page">{{ __('Per Page') }}</label>
                                    <select name="per_page" id="per_page" class="form-select form-select-sm">
                                        <option value="10" {{ request('per_page') == '10' || !request('per_page') ? 'selected' : '' }}>10</option>
                                        <option value="25" {{ request('per_page') == '25' ? 'selected' : '' }}>25</option>
                                        <option value="50" {{ request('per_page') == '50' ? 'selected' : '' }}>50</option>
                                        <option value="100" {{ request('per_page') == '100' ? 'selected' : '' }}>100</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-sm btn-primary">{{ __('Filter') }}</button>
                                <a href="{{ route('dashboard.orders.index') }}" class="btn btn-sm btn-secondary">{{ __('Reset') }}</a>
                                <button type="button" class="btn btn-sm btn-light" data-bs-toggle="collapse" data-bs-target="#filter-collapse" aria-expanded="false" aria-controls="filter-collapse">
                                    {{ __('Collapse') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        @if($orders->isEmpty())
            <div class="alert alert-info">
                {{ __('No orders found.') }}
            </div>
        @else
        <div class="table-responsive">
            <table class="table table-striped table-row-bordered gy-5 gs-7">
                <thead>
                    <tr class="fw-semibold fs-6 text-gray-800">
                        <th>{{ __('ID') }}</th>
                        <th>{{ __('Source') }}</th>
                        <th>{{ __('Created By') }}</th>
                        <th>{{ __('Assigned To') }}</th>
                        <th>{{ __('Status') }}</th>
                        <th>{{ __('Invoice') }}</th>
                        <th>{{ __('Created At') }}</th>
                        <th>{{ __('Actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($orders as $order)
                        <tr>
                            <td>{{ $order->id }}</td>
                            <td>{{ ucfirst($order->source) }}</td>
                            <td>{{ $order->createdBy->name ?? 'N/A' }}</td>
                            <td>{{ $order->assignedTo->name ?? 'N/A' }}</td>
                            <td>
                                @switch($order->status)
                                    @case('new')
                                        <span class="badge badge-info">{{ __('New') }}</span>
                                        @break
                                    @case('pending')
                                        <span class="badge badge-warning">{{ __('Pending') }}</span>
                                        @break
                                    @case('completed')
                                        <span class="badge badge-success">{{ __('Completed') }}</span>
                                        @break
                                    @case('canceled')
                                        <span class="badge badge-danger">{{ __('Canceled') }}</span>
                                        @break
                                    @default
                                        <span class="badge badge-secondary">{{ ucfirst($order->status) }}</span>
                                @endswitch
                            </td>
                            <td>
                                @if ($order->invoice)
                                    <a href="{{ route('dashboard.invoices.show', $order->invoice->id) }}" class="btn btn-sm btn-info">{{ __('View Invoice') }} #{{ $order->invoice->id }}</a>
                                @else
                                    <form action="{{ route('dashboard.orders.createInvoice', $order) }}" method="POST" style="display: inline-block;">
                                        @csrf
                                        <button type="submit" class="btn btn-sm btn-primary">{{ __('Create Invoice') }}</button>
                                    </form>
                                @endif
                            </td>
                            <td>{{ $order->created_at->format('Y-m-d H:i:s') }}</td>
                            <td>
                                <div class="btn-group" role="group">
                                    <a href="{{ route('dashboard.orders.show', $order) }}" class="btn btn-sm btn-primary">{{ __('View') }}</a>
                                    @if(!$order->invoice)
                                        <a href="{{ route('dashboard.orders.edit', $order) }}" class="btn btn-sm btn-warning">{{ __('Edit') }}</a>
                                    @endif
                                    <form action="{{ route('dashboard.orders.destroy', $order) }}" method="POST" style="display: inline-block;">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('{{ __('Are you sure you want to delete this order?') }}')">{{ __('Delete') }}</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="mt-3">
            {{ $orders->appends(request()->query())->links() }} {{-- Pagination links with query string --}}
        </div>
        @endif
    </div>
</div>

@endsection

@section('scripts')
<script>
$(document).ready(function() {
    $('#sort').select2({
        placeholder: "{{ __('Select an option') }}",
        minimumResultsForSearch: Infinity,
        allowClear: true
    });
    $('#direction').select2({
        placeholder: "{{ __('Select an option') }}",
        minimumResultsForSearch: Infinity,
        allowClear: true
    });
    $('#per_page').select2({
        placeholder: "{{ __('Select an option') }}",
        minimumResultsForSearch: Infinity,
        allowClear: true
    });

    // Ensure Select2 reflects URL parameters on page load
    $('#sort').val("{{ request('sort', 'created_at') }}").trigger('change');
    $('#direction').val("{{ request('direction', 'desc') }}").trigger('change');
    $('#per_page').val("{{ request('per_page', '10') }}").trigger('change');
});
</script>
@endsection