@extends('admin.layouts.master')

@section('title', 'العلامات التجارية')

@section('content')
<div class="page-content-wrapper">
    <div class="content-container">
        <div class="page-content">
            <div class="content-header d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h4 class="mb-1">إدارة العلامات التجارية</h4>
                    <p class="text-muted mb-0">واجهة احترافية لإدارة هوية العلامات وربطها بالمنتجات داخل نظام POS.</p>
                </div>
                @can('brands.create')
                    <a href="{{ route('admin.brands.create') }}" class="btn btn-primary">
                        <i class="ti ti-plus me-1"></i> إضافة علامة جديدة
                    </a>
                @endcan
            </div>

            <div id="brands-alert-box" class="mb-3"></div>

            <div class="row g-3 mb-4">
                <div class="col-md-3 col-sm-6">
                    <div class="card shadow-sm border-0 h-100">
                        <div class="card-body">
                            <p class="text-muted mb-2">إجمالي العلامات</p>
                            <h4 class="mb-0">{{ number_format($stats['total']) }}</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="card shadow-sm border-0 h-100">
                        <div class="card-body">
                            <p class="text-muted mb-2">العلامات المفعلة</p>
                            <h4 class="text-success mb-0">{{ number_format($stats['active']) }}</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="card shadow-sm border-0 h-100">
                        <div class="card-body">
                            <p class="text-muted mb-2">العلامات المعطلة</p>
                            <h4 class="text-danger mb-0">{{ number_format($stats['inactive']) }}</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="card shadow-sm border-0 h-100">
                        <div class="card-body">
                            <p class="text-muted mb-2">مرتبطة بمنتجات</p>
                            <h4 class="text-primary mb-0">{{ number_format($stats['with_products']) }}</h4>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <div class="row g-2 align-items-center mb-3">
                        <div class="col-md-3">
                            <label for="status_filter" class="form-label fw-semibold mb-1">تصفية حسب الحالة</label>
                            <select id="status_filter" class="form-select">
                                <option value="all">الكل</option>
                                <option value="active">مفعلة فقط</option>
                                <option value="inactive">معطلة فقط</option>
                            </select>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table id="brands-table" class="table table-hover align-middle w-100">
                            <thead>
                                <tr>
                                    <th>العلامة</th>
                                    <th>الكود</th>
                                    <th>الموقع الإلكتروني</th>
                                    <th>المنتجات</th>
                                    <th>الحالة</th>
                                    <th>تاريخ الإنشاء</th>
                                    <th class="text-center">الإجراءات</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="deleteBrandModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">تأكيد الحذف</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
            </div>
            <div class="modal-body">
                هل أنت متأكد من حذف العلامة <span class="fw-bold" id="deleteBrandName"></span>؟
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">إلغاء</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBrand">حذف نهائي</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function () {
    const csrfToken = '{{ csrf_token() }}';
    const canUpdateStatus = @json(auth()->user()?->can('brands.update'));
    let pendingDeleteUrl = null;

    function escapeHtml(value) {
        return $('<div>').text(value ?? '').html();
    }

    function showAlert(type, message) {
        $('#brands-alert-box').html(
            '<div class="alert alert-' + type + ' alert-dismissible fade show" role="alert">'
            + '<i class="ti ti-info-circle me-1"></i>' + message
            + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="إغلاق"></button>'
            + '</div>'
        );
    }

    const table = $('#brands-table').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        language: { url: 'https://cdn.datatables.net/plug-ins/1.13.8/i18n/ar.json' },
        ajax: {
            url: '{{ route('admin.brands.index') }}',
            data: function (d) {
                d.status_filter = $('#status_filter').val();
            }
        },
        columns: [
            {
                data: null,
                name: 'name',
                render: function (data, type, row) {
                    const logo = row.logo_url
                        ? '<img src="' + row.logo_url + '" alt="' + escapeHtml(row.name) + '" class="brand-logo">'
                        : '<div class="brand-logo brand-logo-placeholder"><i class="ti ti-photo"></i></div>';

                    return '<div class="d-flex align-items-center gap-2">'
                        + logo
                        + '<div>'
                        + '<div class="fw-semibold">' + escapeHtml(row.name) + '</div>'
                        + '<small class="text-muted">معرّف: #' + row.id + '</small>'
                        + '</div>'
                        + '<span class="brand-color-dot" style="background-color:' + escapeHtml(row.brand_color || '#6366f1') + ';"></span>'
                        + '</div>';
                }
            },
            { data: 'code', name: 'code' },
            {
                data: 'website',
                name: 'website',
                orderable: false,
                render: function (data) {
                    if (!data) {
                        return '<span class="text-muted">غير متوفر</span>';
                    }

                    return '<a href="' + escapeHtml(data) + '" target="_blank" rel="noopener" class="text-decoration-none">'
                        + '<i class="ti ti-world me-1"></i>زيارة الموقع</a>';
                }
            },
            {
                data: 'products_count',
                name: 'products_count',
                orderable: false,
                searchable: false,
                className: 'text-center',
                render: function (data) {
                    return '<span class="badge bg-light-primary text-primary">' + Number(data || 0) + '</span>';
                }
            },
            {
                data: null,
                name: 'is_active',
                className: 'text-center',
                orderable: false,
                searchable: false,
                render: function (data, type, row) {
                    const isActive = Number(row.is_active) === 1;
                    const label = isActive ? 'مفعلة' : 'معطلة';

                    if (!canUpdateStatus) {
                        return '<span class="badge ' + (isActive ? 'bg-success' : 'bg-danger') + '">' + label + '</span>';
                    }

                    return '<button class="btn btn-sm ' + (isActive ? 'btn-success' : 'btn-outline-danger') + ' btn-toggle-status"'
                        + ' data-url="' + escapeHtml(row.toggle_url) + '" data-name="' + escapeHtml(row.name) + '">'
                        + '<i class="ti ' + (isActive ? 'ti-lock-check' : 'ti-lock-x') + ' me-1"></i>' + label + '</button>';
                }
            },
            { data: 'created_at', name: 'created_at', className: 'text-nowrap' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false, className: 'text-center' }
        ],
        drawCallback: function () {
            $('[data-bs-toggle="tooltip"]').tooltip();
        }
    });

    $('#status_filter').on('change', function () {
        table.ajax.reload();
    });

    $(document).on('click', '.btn-toggle-status', function () {
        const button = $(this);

        $.ajax({
            url: button.data('url'),
            type: 'PATCH',
            data: { _token: csrfToken },
            success: function (response) {
                showAlert('success', response.message || 'تم تحديث الحالة بنجاح.');
                table.ajax.reload(null, false);
            },
            error: function () {
                showAlert('danger', 'تعذر تحديث الحالة حالياً. حاول مرة أخرى.');
            }
        });
    });

    const deleteModal = new bootstrap.Modal(document.getElementById('deleteBrandModal'));

    $(document).on('click', '.btn-delete-brand', function () {
        pendingDeleteUrl = $(this).data('url');
        $('#deleteBrandName').text($(this).data('name'));
        deleteModal.show();
    });

    $('#confirmDeleteBrand').on('click', function () {
        if (!pendingDeleteUrl) {
            return;
        }

        const form = $('<form>', { method: 'POST', action: pendingDeleteUrl })
            .append($('<input>', { type: 'hidden', name: '_token', value: csrfToken }))
            .append($('<input>', { type: 'hidden', name: '_method', value: 'DELETE' }));

        $('body').append(form);
        form.trigger('submit');
    });
});
</script>
@endpush

@push('styles')
<style>
.brand-logo {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #e9ecef;
}

.brand-logo-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    color: #6c757d;
}

.brand-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid #dee2e6;
}
</style>
@endpush