@extends('admin.layouts.master')

@section('title', 'تطبيقات التجار')

@section('css')
    @include('admin.helper.tablecss')
    @include('admin.helper.formscss')
@endsection

@php
    $vendorSummary = $vendors->mapWithKeys(function ($vendor) {
        return [
            $vendor->id => [
                'id' => $vendor->id,
                'name' => $vendor->name() ?? 'Vendor #' . $vendor->id,
                'email' => $vendor->user->email,
                'mobile' => $vendor->user->mobile,
                'app' => optional($vendor->vendorApp)->appName,
            ],
        ];
    });
@endphp

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card mb-3">
                <div class="card-body">
                    <div class="form-row align-items-end">
                        <div class="form-group col-md-4">
                            <label class="form-label">بحث عن تطبيق</label>
                            <input type="text" class="form-control" id="app_searchFilter" placeholder="الاسم أو التوكن">
                        </div>
                        <div class="form-group col-md-4">
                            <label class="form-label">تصفية حسب التاجر</label>
                            <select class="form-control select2" id="vendor_idFilter" data-placeholder="اختر تاجر">
                                <option value="">كل التجار</option>
                                @foreach ($vendors as $vendorOption)
                                    <option value="{{ $vendorOption->id }}">
                                        {{ $vendorOption->name() ?? 'Vendor #' . $vendorOption->id }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-md-2">
                            <button type="button" class="btn btn-primary w-100" id="refreshVendorApps">تحديث
                                القائمة</button>
                        </div>
                        <div class="form-group col-md-2">
                            <button type="button" class="btn btn-light w-100" id="clearVendorFilters">مسح الفلاتر</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="alert alert-info d-none justify-content-between align-items-center flex-wrap"
                id="vendorSummaryCard">
                <div class="mb-2 mb-md-0">
                    <strong>التاجر المحدد:</strong>
                    <span class="mr-2" data-summary="name"></span>
                    <span class="badge" data-summary="status"></span>
                </div>
                <div class="small text-muted" data-summary="contact"></div>
            </div>

            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">قائمة التطبيقات</h4>
                    <a href="{{ route('admin.vendor-apps.create') }}" class="btn btn-primary">إنشاء تطبيق جديد</a>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped" id="vendorAppsTable">
                            <thead>
                                <tr>
                                    <th>التطبيق</th>
                                    <th>التفاصيل</th>
                                    <th>التجار المرتبطون</th>
                                    <th style="width: 240px">الإجراءات</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="assignVendorModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">ربط تاجر بالتطبيق: <span id="assignModalAppName"></span></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="إغلاق">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="POST" action="{{ route('admin.vendor-apps.assign-vendor') }}" id="assignVendorForm">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="app_id" id="assignAppIdInput">
                        <div class="form-group">
                            <label>اختر التاجر</label>
                            <select name="vendor_id" id="assignVendorSelect" class="form-control"
                                data-placeholder="اختر تاجر">
                                <option value="">اختر تاجر</option>
                                @foreach ($vendors as $vendorOption)
                                    <option value="{{ $vendorOption->id }}">
                                        {{ $vendorOption->name() ?? 'Vendor #' . $vendorOption->id }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">إلغاء</button>
                        <button type="submit" class="btn btn-primary">حفظ الربط</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.tablescripts')
    @include('admin.helper.formscripts')
    @include('vue')
    <script>
        $(function() {
            const filters = ['app_search', 'vendor_id'];
            let vendorMap = @json($vendorSummary);
            const $searchInput = $('#app_searchFilter');
            const $vendorFilter = $('#vendor_idFilter');
            const $vendorSummaryCard = $('#vendorSummaryCard');
            const $summaryName = $vendorSummaryCard.find('[data-summary="name"]');
            const $summaryStatus = $vendorSummaryCard.find('[data-summary="status"]');
            const $summaryContact = $vendorSummaryCard.find('[data-summary="contact"]');

            $('.select2').select2({
                width: '100%'
            });

            const $assignModal = $('#assignVendorModal');
            const $assignVendorSelect = $('#assignVendorSelect').select2({
                width: '100%',
                dropdownParent: $assignModal
            });

            function updateVendorCache(vendor) {
                if (!vendor || !vendor.id) {
                    return;
                }

                vendorMap = vendorMap || {};
                vendorMap[vendor.id] = {
                    id: vendor.id,
                    name: vendor.name || ('Vendor #' + vendor.id),
                    email: vendor.email || null,
                    mobile: vendor.mobile || null,
                    app: vendor.app_name || null,
                };
            }

            function handleAjaxError(xhr) {
                let msg = 'حدث خطأ غير متوقع';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    msg = xhr.responseJSON.message;
                } else if (xhr.responseText) {
                    msg = xhr.responseText;
                }

                swal({
                    title: msg,
                    type: 'error',
                    confirmButtonText: 'موافق',
                });
            }

            function redrawVendorAppsTable() {
                if (vendorAppsTable) {
                    vendorAppsTable.draw(false);
                }
            }

            function renderVendorSummary(vendorId) {
                const vendor = vendorId && vendorMap[vendorId];
                if (!vendor) {
                    $vendorSummaryCard.addClass('d-none');
                    $summaryName.text('');
                    $summaryStatus.text('');
                    $summaryContact.text('');
                    return;
                }

                $vendorSummaryCard.removeClass('d-none');
                $summaryName.text(vendor.name);

                if (vendor.app) {
                    $summaryStatus.removeClass('badge-warning').addClass('badge-success').text('مرتبط بـ ' + vendor
                        .app);
                } else {
                    $summaryStatus.removeClass('badge-success').addClass('badge-warning').text(
                        'غير مرتبط بأي تطبيق');
                }

                $summaryContact.text(vendor.email || vendor.mobile || '—');
            }

            $vendorFilter.on('change', function() {
                renderVendorSummary($(this).val());
            });

            let vendorAppsTable;

            $('#clearVendorFilters').on('click', function() {
                $searchInput.val('');
                $vendorFilter.val('').trigger('change');
                updateUrlWithFilters(filters);
                vendorAppsTable.draw();
            });

            vendorAppsTable = initUrlSyncedDatatable({
                selector: '#vendorAppsTable',
                url: "{{ route('admin.vendor-apps.index') }}",
                columns: ['app', 'details', 'vendors', 'actions'],
                extraOptions: {
                    order: [],
                    columnDefs: [{
                        targets: '_all',
                        orderable: false
                    }]
                },
                filters: filters,
                refreshSelector: '#refreshVendorApps'
            });

            $(document).on('click', '.js-assign-vendor', function() {
                const appId = $(this).data('app-id');
                const appName = $(this).data('app-name');
                $('#assignAppIdInput').val(appId);
                $('#assignModalAppName').text(appName);
                const vendorPrefill = $vendorFilter.val();
                $assignVendorSelect.val(vendorPrefill || '').trigger('change');
                $assignModal.modal('show');
            });

            $('#assignVendorForm').on('submit', function(e) {
                e.preventDefault();
                const $form = $(this);

                $.ajax({
                    url: $form.attr('action'),
                    method: $form.attr('method') || 'POST',
                    data: $form.serialize(),
                    dataType: 'json',
                    headers: {
                        'Accept': 'application/json'
                    },
                    success: function(response) {
                        swal({
                            title: response.message || 'تم حفظ الربط',
                            type: 'success',
                            confirmButtonText: 'موافق',
                        });

                        if (response.vendor) {
                            updateVendorCache(response.vendor);
                            renderVendorSummary($vendorFilter.val());
                        }

                        redrawVendorAppsTable();
                        $assignModal.modal('hide');
                        $form.trigger('reset');
                        $assignVendorSelect.val('').trigger('change');
                    },
                    error: handleAjaxError
                });
            });

            $(document).on('submit', '.js-detach-vendor-form', function(e) {
                e.preventDefault();
                const $form = $(this);
                const url = $form.attr('action');
                const method = $form.attr('method') || 'POST';
                const payload = $form.serialize();

                swal({
                    title: 'هل تريد إزالة هذا التاجر من التطبيق؟',
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'نعم، إزالة',
                    cancelButtonText: 'تراجع'
                }).then(function(result) {
                    if (!result.value) {
                        return;
                    }

                    $.ajax({
                        url: url,
                        method: method,
                        data: payload,
                        dataType: 'json',
                        headers: {
                            'Accept': 'application/json'
                        },
                        success: function(response) {
                            swal({
                                title: response.message || 'تمت الإزالة بنجاح',
                                type: 'success',
                                confirmButtonText: 'موافق',
                            });

                            if (response.vendor) {
                                updateVendorCache(response.vendor);
                                renderVendorSummary($vendorFilter.val());
                            }

                            redrawVendorAppsTable();
                        },
                        error: handleAjaxError
                    });
                });
            });

            renderVendorSummary($vendorFilter.val());
        });
    </script>
@endsection