@extends('admin.layouts.layout')
@section('title', 'مدیریت سفارشات')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

    <div class="d-flex align-items-center justify-content-between mb-4 flex-wrap gap-2">
        <div>
            <h4 class="mb-1">مدیریت سفارشات</h4>
            <p class="text-muted mb-0 small">لیست تمام سفارشات ثبت شده</p>
        </div>
        <div class="d-flex gap-2">
            <button type="button" id="bulkDeleteBtn" class="btn btn-danger d-none">
                <i class="ti ti-trash ti-xs me-1"></i>حذف انتخاب‌شده‌ها
                <span class="badge bg-white text-danger ms-1" id="bulkDeleteCount">0</span>
            </button>
            <button type="button" id="amadastSyncBtn" class="btn btn-warning">
                <i class="ti ti-refresh ti-xs me-1"></i>همگام سازی سفارشات با آمادست
            </button>
        </div>
    </div>

    <div id="amadastSyncAlert" class="alert d-none mb-4" role="alert"></div>

    {{-- Filters --}}
    <div class="card mb-4">
        <div class="card-body py-3">
            <form method="GET" action="{{ route('admin.orders.index') }}">
                <div class="row g-2 align-items-center">
                    <div class="col-md-4">
                        <input type="text" name="q" class="form-control"
                               placeholder="شماره سفارش، نام یا موبایل..."
                               value="{{ request('q') }}">
                    </div>
                    <div class="col-md-3">
                        <select name="status" class="form-select">
                            <option value="">همه وضعیت‌ها</option>
                            @foreach($statuses as $val => $label)
                            <option value="{{ $val }}" {{ request('status') === $val ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-auto d-flex gap-2">
                        <button type="submit" class="btn btn-primary"><i class="ti ti-search ti-xs"></i></button>
                        @if(request('q') || request('status'))
                        <a href="{{ route('admin.orders.index') }}" class="btn btn-outline-secondary">پاک کردن</a>
                        @endif
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-body p-0">
            @if($orders->isEmpty())
            <div class="text-center py-5 text-muted">
                <i class="ti ti-shopping-cart-off ti-lg mb-2 d-block"></i>
                سفارشی یافت نشد.
            </div>
            @else
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th style="width:40px">
                                <input type="checkbox" class="form-check-input" id="selectAll">
                            </th>
                            <th>شماره سفارش</th>
                            <th>کاربر</th>
                            <th>رفرر</th>
                            <th>روش پرداخت</th>
                            <th>روش ارسال</th>
                            <th>مبلغ قابل پرداخت</th>
                            <th>وضعیت</th>
                            <th>تاریخ</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($orders as $order)
                        <tr>
                            <td>
                                <input type="checkbox" class="form-check-input row-check" value="{{ $order->id }}">
                            </td>
                            <td class="font-monospace small fw-medium" dir="ltr">{{ $order->order_number }}</td>
                            <td>
                                <div class="fw-medium">{{ $order->user->first_name }} {{ $order->user->last_name }}</div>
                                <div class="text-muted small" dir="ltr">{{ $order->user->mobile }}</div>
                            </td>
                            <td class="small" style="max-width:160px">
                                @if($order->referrer)
                                    <a href="{{ str_starts_with($order->referrer, 'http') ? $order->referrer : '#' }}"
                                       class="text-truncate d-inline-block align-middle {{ str_starts_with($order->referrer, 'http') ? '' : 'text-muted text-decoration-none' }}"
                                       style="max-width:150px"
                                       dir="ltr"
                                       title="{{ $order->referrer }}"
                                       @if(str_starts_with($order->referrer, 'http')) target="_blank" rel="noopener noreferrer" @endif>
                                        {{ $order->referrerLabel() }}
                                    </a>
                                @else
                                    <span class="text-muted">—</span>
                                @endif
                            </td>
                            <td class="text-muted small">{{ $order->payment_method_name ?? '—' }}</td>
                            <td class="text-muted small">{{ $order->shipping_method_name ?? '—' }}</td>
                            <td class="fw-bold">{{ number_format($order->payable_amount) }} تومان</td>
                            <td>
                                <span class="badge bg-label-{{ $order->statusColor() }}">{{ $order->statusLabel() }}</span>
                            </td>
                            <td class="text-muted small">{{ $order->shamsi_date }}</td>
                            <td>
                                <div class="d-flex gap-1">
                                    <a href="{{ route('admin.orders.show', $order) }}" class="btn btn-sm btn-outline-primary">
                                        <i class="ti ti-eye ti-xs me-1"></i>مشاهده
                                    </a>
                                    <button type="button"
                                        class="btn btn-sm btn-outline-danger btn-delete-order"
                                        data-id="{{ $order->id }}"
                                        data-number="{{ $order->order_number }}"
                                        data-url="{{ route('admin.orders.destroy', $order) }}">
                                        <i class="ti ti-trash ti-xs"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @if($orders->hasPages())
            <div class="d-flex justify-content-center py-3">
                {{ $orders->links() }}
            </div>
            @endif
            @endif
        </div>
    </div>

</div>
@endsection

@section('customjs')
<script>
function updateBulkBtn() {
    const count = $('.row-check:checked').length;
    const btn = $('#bulkDeleteBtn');
    $('#bulkDeleteCount').text(count);
    if (count > 0) {
        btn.removeClass('d-none');
    } else {
        btn.addClass('d-none');
    }
    const total = $('.row-check').length;
    $('#selectAll').prop('checked', total > 0 && count === total);
}

$('#selectAll').on('change', function () {
    $('.row-check').prop('checked', this.checked);
    updateBulkBtn();
});

$(document).on('change', '.row-check', updateBulkBtn);

$(document).on('click', '.btn-delete-order', function () {
    const btn = $(this);
    const url = btn.data('url');
    const number = btn.data('number');

    Swal.fire({
        title: 'حذف سفارش',
        html: 'آیا از حذف کامل سفارش <strong>' + number + '</strong> مطمئن هستید؟<br><small class="text-muted">این عملیات قابل بازگشت نیست.</small>',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'بله، حذف شود',
        cancelButtonText: 'انصراف',
        confirmButtonColor: '#d33',
        reverseButtons: true,
    }).then(function (result) {
        if (!result.isConfirmed) return;
        $.ajax({
            url: url,
            method: 'POST',
            data: { _method: 'DELETE', _token: '{{ csrf_token() }}' },
            success: function () {
                btn.closest('tr').fadeOut(300, function () {
                    $(this).remove();
                    updateBulkBtn();
                });
            },
            error: function () {
                Swal.fire('خطا', 'حذف سفارش با مشکل مواجه شد.', 'error');
            }
        });
    });
});

$('#bulkDeleteBtn').on('click', function () {
    const ids = $('.row-check:checked').map(function () { return $(this).val(); }).get();
    if (!ids.length) return;

    Swal.fire({
        title: 'حذف دسته‌جمعی',
        html: 'آیا از حذف <strong>' + ids.length + '</strong> سفارش انتخاب‌شده مطمئن هستید؟<br><small class="text-muted">این عملیات قابل بازگشت نیست.</small>',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'بله، حذف شود',
        cancelButtonText: 'انصراف',
        confirmButtonColor: '#d33',
        reverseButtons: true,
    }).then(function (result) {
        if (!result.isConfirmed) return;
        $.ajax({
            url: '{{ route('admin.orders.bulk-destroy') }}',
            method: 'POST',
            data: { _method: 'DELETE', _token: '{{ csrf_token() }}', ids: ids },
            success: function () {
                $('.row-check:checked').closest('tr').fadeOut(300, function () {
                    $(this).remove();
                    updateBulkBtn();
                });
            },
            error: function () {
                Swal.fire('خطا', 'حذف دسته‌جمعی با مشکل مواجه شد.', 'error');
            }
        });
    });
});

$('#amadastSyncBtn').on('click', function () {
    const btn = $(this);
    btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>در حال همگام‌سازی...');
    $.ajax({
        url: '{{ route('admin.orders.amadast-sync') }}',
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        success: function (res) {
            const alert = $('#amadastSyncAlert');
            if (res.total === 0) {
                alert.removeClass('d-none alert-success alert-danger').addClass('alert-info')
                    .html('سفارشی برای همگام‌سازی یافت نشد.');
            } else if (res.failed === 0) {
                alert.removeClass('d-none alert-info alert-danger').addClass('alert-success')
                    .html('همگام‌سازی انجام شد: ' + res.synced + ' سفارش با موفقیت ثبت شد.');
            } else {
                let html = 'همگام‌سازی انجام شد: ' + res.synced + ' موفق، ' + res.failed + ' ناموفق از ' + res.total + ' سفارش.';
                if (res.errors && res.errors.length) {
                    html += '<ul class="mb-0 mt-2 small">';
                    res.errors.forEach(function(e) { html += '<li>' + e + '</li>'; });
                    html += '</ul>';
                }
                alert.removeClass('d-none alert-info alert-success').addClass('alert-warning').html(html);
            }
        },
        error: function () {
            $('#amadastSyncAlert').removeClass('d-none alert-info alert-success').addClass('alert-danger')
                .text('خطا در اجرای همگام‌سازی.');
        },
        complete: function () {
            btn.prop('disabled', false).html('<i class="ti ti-refresh ti-xs me-1"></i>همگام سازی سفارشات با آمادست');
        }
    });
});
</script>
@endsection
