@extends('admin.layouts.app')

@section('title', 'مدیریت بارها')

@section('content')
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">لیست بارها</h5>
    </div>

    <div class="card-body">
        <!-- Filters -->
        <form method="GET" action="{{ route('admin.loads.index') }}" class="mb-4">
            <div class="row g-3">
                <div class="col-md-3">
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="fas fa-search"></i>
                        </span>
                        <input type="text" name="search" class="form-control" placeholder="جستجو (عنوان، کد)" value="{{ request('search') }}">
                    </div>
                </div>

                <div class="col-md-2">
                    <select name="status" class="form-select">
                        <option value="">همه وضعیت‌ها</option>
                        <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>در انتظار</option>
                        <option value="approved" {{ request('status') === 'approved' ? 'selected' : '' }}>تایید شده</option>
                        <option value="assigned" {{ request('status') === 'assigned' ? 'selected' : '' }}>تخصیص داده شده</option>
                        <option value="in_progress" {{ request('status') === 'in_progress' ? 'selected' : '' }}>در حال انجام</option>
                        <option value="completed" {{ request('status') === 'completed' ? 'selected' : '' }}>تکمیل شده</option>
                        <option value="cancelled" {{ request('status') === 'cancelled' ? 'selected' : '' }}>لغو شده</option>
                    </select>
                </div>

                <div class="col-md-2">
                    <input type="text" name="from_date" class="form-control persian-datepicker" placeholder="از تاریخ" value="{{ request('from_date') }}">
                </div>

                <div class="col-md-2">
                    <input type="text" name="to_date" class="form-control persian-datepicker" placeholder="تا تاریخ" value="{{ request('to_date') }}">
                </div>

                <div class="col-md-1">
                    <select name="per_page" class="form-select">
                        <option value="10" {{ request('per_page') == 10 ? 'selected' : '' }}>10</option>
                        <option value="25" {{ request('per_page') == 25 ? 'selected' : '' }}>25</option>
                        <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</option>
                    </select>
                </div>

                <div class="col-md-2">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-filter me-2"></i>
                        فیلتر
                    </button>
                </div>
            </div>
        </form>

        <!-- Results Summary -->
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div class="text-muted">
                نمایش {{ $loads->firstItem() ?? 0 }} تا {{ $loads->lastItem() ?? 0 }} از {{ number_format($loads->total()) }} بار
            </div>
            <div>
                <a href="{{ route('admin.loads.index') }}" class="btn btn-sm btn-outline-secondary">
                    <i class="fas fa-redo me-1"></i>
                    حذف فیلترها
                </a>
            </div>
        </div>

        <!-- Table -->
        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead>
                    <tr>
                        <th>کد</th>
                        <th>عنوان</th>
                        <th>درخواست کننده</th>
                        <th>راننده</th>
                        <th>مبدا</th>
                        <th>مقصد</th>
                        <th>قیمت</th>
                        <th>وضعیت</th>
                        <th>تاریخ</th>
                        <th>عملیات</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($loads as $load)
                    <tr>
                        <td>#{{ $load->id }}</td>
                        <td>
                            <strong>{{ $load->title }}</strong>
                            @if($load->weight)
                                <br><small class="text-muted">وزن: {{ number_format($load->weight) }} کیلوگرم</small>
                            @endif
                        </td>
                        <td>
                            {{ $load->requester->name ?? 'نامشخص' }}
                            <br><small class="text-muted font-monospace">{{ $load->requester->phone ?? '-' }}</small>
                        </td>
                        <td>
                            @if($load->driver)
                                {{ $load->driver->name }}
                                <br><small class="text-muted font-monospace">{{ $load->driver->phone }}</small>
                            @else
                                <span class="text-muted">تخصیص نیافته</span>
                            @endif
                        </td>
                        <td>
                            <small>{{ $load->origin_address ? (mb_strlen($load->origin_address) > 30 ? mb_substr($load->origin_address, 0, 30) . '...' : $load->origin_address) : '-' }}</small>
                        </td>
                        <td>
                            <small>{{ $load->destination_address ? (mb_strlen($load->destination_address) > 30 ? mb_substr($load->destination_address, 0, 30) . '...' : $load->destination_address) : '-' }}</small>
                        </td>
                        <td>
                            <strong>{{ number_format($load->price) }}</strong>
                            <small class="text-muted d-block">تومان</small>
                        </td>
                        <td>
                            @if($load->status === 'pending')
                                <span class="badge bg-warning">در انتظار</span>
                            @elseif($load->status === 'approved')
                                <span class="badge bg-info">تایید شده</span>
                            @elseif($load->status === 'assigned')
                                <span class="badge bg-primary">تخصیص داده شده</span>
                            @elseif($load->status === 'in_progress')
                                <span class="badge bg-primary">در حال انجام</span>
                            @elseif($load->status === 'completed')
                                <span class="badge bg-success">تکمیل شده</span>
                            @else
                                <span class="badge bg-danger">لغو شده</span>
                            @endif
                        </td>
                        <td>
                            <small class="text-muted">{{ $load->created_at ? \Morilog\Jalali\Jalalian::fromDateTime($load->created_at)->format('Y/m/d') : '-' }}</small>
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="{{ route('admin.loads.show', $load->id) }}" class="btn btn-outline-info" title="مشاهده جزئیات">
                                    <i class="fas fa-eye"></i>
                                </a>
                                @if($load->status === 'pending')
                                    <button type="button" class="btn btn-outline-success" onclick="approveLoad({{ $load->id }})" title="تایید">
                                        <i class="fas fa-check"></i>
                                    </button>
                                @endif
                                <button type="button" class="btn btn-outline-danger" onclick="confirmDelete({{ $load->id }})" title="حذف">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>

                            <form id="delete-form-{{ $load->id }}" action="{{ route('admin.loads.destroy', $load->id) }}" method="POST" class="d-none">
                                @csrf
                                @method('DELETE')
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="10" class="text-center text-muted py-5">
                            <i class="fas fa-boxes fa-3x mb-3"></i>
                            <p class="mb-0">هیچ باری یافت نشد</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        @if($loads->hasPages())
        <div class="d-flex justify-content-center mt-4">
            {{ $loads->links() }}
        </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
    function confirmDelete(loadId) {
        if (confirm('آیا از حذف این بار اطمینان دارید؟')) {
            document.getElementById('delete-form-' + loadId).submit();
        }
    }

    function approveLoad(loadId) {
        if (confirm('آیا از تایید این بار اطمینان دارید؟')) {
            showLoading();
            $.ajax({
                url: `/admin/loads/${loadId}/approve`,
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Accept': 'application/json'
                },
                success: function(response) {
                    hideLoading();
                    if (response.success) {
                        showToast(response.message || 'بار با موفقیت تایید شد', 'success');
                        setTimeout(() => location.reload(), 1000);
                    } else {
                        showToast(response.message || 'خطا در تایید بار', 'error');
                    }
                },
                error: function(xhr) {
                    hideLoading();
                    const errorMsg = xhr.responseJSON?.message || 'خطا در تایید بار';
                    showToast(errorMsg, 'error');
                    console.error('AJAX Error:', xhr);
                }
            });
        }
    }
</script>
@endpush