@extends('layouts.admin.master')
@section('tab-name','لیست ویژگی‌ها')

@section('content')
    <style>
        /* استایل‌های سفارشی برای زیبایی بیشتر */
        .table-container {
            background: #fff;
            border-radius: 15px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }

        .table thead th {
            background-color: #fcfcfd;
            border-bottom: 1px solid #f1f1f2;
            color: #6c757d;
            font-size: 0.85rem;
            font-weight: 700;
            padding: 1.2rem 1rem;
        }

        .sortable-list tr {
            transition: background 0.2s ease;
        }

        .sortable-list tr:hover {
            background-color: #f8faff !important;
        }

        /* استایل آیکون دستگیره جابجایی */
        .drag-handle {
            cursor: grab;
            color: #d1d5db;
            padding: 5px;
            transition: all 0.2s;
        }

        .drag-handle:hover {
            color: #4e73df;
        }

        .drag-handle:active {
            cursor: grabbing;
        }

        /* ظرف تصویر آیکون */
        .icon-wrapper {
            width: 42px;
            height: 42px;
            background: #f8f9fc;
            border: 1px solid #edf2f7;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        /* بج‌های نرم (Soft Badges) */
        .badge-soft {
            padding: 5px 12px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.75rem;
        }

        .badge-soft-success {
            background-color: #e6fffa;
            color: #047857;
        }

        .badge-soft-danger {
            background-color: #fff5f5;
            color: #c53030;
        }

        .badge-soft-info {
            background-color: #ebf8ff;
            color: #2b6cb0;
        }

        .badge-soft-secondary {
            background-color: #f7fafc;
            color: #4a5568;
        }

        /* دکمه‌های عملیات */
        .btn-action {
            width: 32px;
            height: 32px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            margin: 0 2px;
            transition: 0.3s;
        }

        /* استایل ردیف در حال حرکت */
        .sortable-ghost {
            opacity: 0.4;
            background-color: #e0e7ff !important;
            border: 1px dashed #4e73df;
        }

        .sortable-chosen {
            background-color: #ffffff;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
    </style>

    <div class="body d-flex py-3">
        <div class="container-fluid">
            <div class="page-header">
                <div
                    class="card-header py-3 no-bg bg-transparent border-0 px-0 flex-wrap d-flex justify-content-between align-items-center border-bottom mb-4">

                    <h3 class="fw-bolder ms-1">
                        @if($service)
                            ویژگی‌های {{$service->title}}
                        @else
                            تمام ویژگی ها
                        @endif
                    </h3>
                    <a href="{{ route('admin.services.index')}}"
                       class="btn btn-set-task rounded-custom d-flex align-items-center w-fit shadow-sm">
                        <i class="bi bi-skip-backward-circle d-flex h5 my-0 me-2"></i>
                        رفتن به خدمات
                    </a>
                    @if($service)
                        <a href="{{ route('admin.features.create',['service_id'=>$service->id])}}"
                           class="btn btn-custom-b rounded-custom d-flex align-items-center w-fit shadow-sm">
                            <i class="bi bi-plus-square-dotted d-flex h5 my-0 me-2"></i>
                            افزودن ویژگی جدید
                        </a>
                    @else
                        <span>
                            <a href="{{ route('admin.services.index')}}"
                               class="btn btn-custom-b rounded-custom d-flex align-items-center w-fit shadow-sm">
                        <i class="bi bi-plus-square-dotted d-flex h5 my-0 me-2"></i>
                        افزودن ویژگی برای خدمت
                    </a>
                        </span>
                    @endif
                </div>
            </div>

            <div class="table-container shadow-sm border">
                <div class="table-responsive">
                    <table class="table align-middle mb-0">
                        <thead>
                        <tr class="text-center">
                            <th width="60">#</th>
                            <th width="80">چیدمان</th>
                            <th width="100">آیکون</th>
                            <th class="text-start">عنوان ویژگی</th>
                            <th>وضعیت</th>
                            <th>نمایش در خانه</th>
                            <th width="150">عملیات</th>
                        </tr>
                        </thead>
                        <tbody id="sortable-list" class="sortable-list">
                        @forelse($features->sortBy('order') as $feature)
                            <tr data-id="{{ $feature->id }}" class="text-center">
                                <td class="text-muted fw-bold row-number">{{ $loop->iteration }}</td>
                                <td>
                                    <div class="drag-handle">
                                        <i class="bi bi-grid-3x3-gap-fill fs-5"></i>
                                    </div>
                                </td>
                                <td>
                                    <div class="icon-wrapper">
                                        <img src="{{ $feature->getIconFile() }}"
                                             alt="{{ $feature->title }}"
                                             style="width: 25px; height: 25px; object-fit: contain;">
                                    </div>
                                </td>
                                <td class="text-start">
                                    <span class="fw-bold text-dark">{{ $feature->title }}</span>
                                </td>
                                <td>
                                    @if($feature->is_active)
                                        <span class="badge-soft badge-soft-success">فعال</span>
                                    @else
                                        <span class="badge-soft badge-soft-danger">غیرفعال</span>
                                    @endif
                                </td>
                                <td>
                                    @if($feature->show_in_first_page)
                                        <span class="badge-soft badge-soft-info">نمایش دارد</span>
                                    @else
                                        <span class="badge-soft badge-soft-secondary">عدم نمایش</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <div data-bs-toggle="tooltip" title="ویرایش">
                                            <a href="{{route('admin.features.edit', $feature)  }}"
                                               class="btn-action btn-edit-soft">
                                                <i class="bi bi-pencil-square"></i>
                                            </a>
                                        </div>

                                        <div data-bs-toggle="tooltip" title="حذف">
                                            <form action="{{route('admin.features.destroy', $feature)}}" method="POST"
                                                  class="delete-form m-0">
                                                @csrf @method('DELETE')
                                                <button type="submit" class="btn-action btn-delete-soft">
                                                    <i class="bi bi-trash3"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center py-5 text-muted">
                                    <i class="bi bi-inbox fs-1 d-block mb-2"></i>
                                    هیچ ویژگی یافت نشد.
                                </td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@stop

@push('scripts')
    <script src="{{asset('assets/admin/js/883833bootstrap-select.min.js')}}"></script>
    <script src="{{asset('assets/admin/js/488sortable.min.js')}}"></script>
    <script src="{{asset('assets/admin/js/547vue-select.min.js')}}"></script>
    <script src="{{asset('assets/admin/js/522vuedraggable.umd.min.js')}}"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            if (typeof Sortable === 'undefined') return;

            const el = document.getElementById('sortable-list');

            if (el) {
                Sortable.create(el, {
                    animation: 200,
                    handle: '.drag-handle',
                    ghostClass: 'sortable-ghost',
                    chosenClass: 'sortable-chosen',
                    onEnd: function (evt) {
                        let order = [];
                        const rows = document.querySelectorAll('#sortable-list tr');
                        rows.forEach((row, index) => {
                            order.push({
                                id: row.getAttribute('data-id'),
                                position: index + 1
                            });
                            const numCell = row.querySelector('.row-number');
                            if (numCell) numCell.innerText = index + 1;
                        });

                        fetch("{{ route('admin.features.updateOrder') }}", {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({order: order})
                        })
                            .then(res => res.json())
                            .then(data => {
                                if (typeof Swal !== 'undefined') {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'بروزرسانی',
                                        text: 'چیدمان با موفقیت ذخیره شد',
                                        timer: 1500,
                                        showConfirmButton: false,
                                        toast: true,
                                        position: 'top-end'
                                    });
                                }
                            })
                            .catch(err => console.error('Error:', err));
                    }
                });
            }
        });
    </script>
@endpush