@extends('admin.layouts.master')
@section('css')
    @include('admin.helper.tablecss')
    <style>
        .attachment-card {
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            background: #fff;
        }

        .game-selector {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        .field-type-badge {
            font-size: 0.8em;
            padding: 4px 8px;
        }

        .sortable-item {
            cursor: move;
        }

        .sortable-item:hover {
            background-color: #f8f9fa;
        }
    </style>
@endsection

@section('page-header')
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto">إدارة حقول الألعاب</h4>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div id="gameAttachmentPage">
        <!-- Game Selection -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card game-selector">
                    <div class="card-body">
                        <h5 class="card-title mb-3">اختر اللعبة</h5>
                        <form method="GET" action="{{ route('admin.game-attachments.index') }}">
                            <div class="row align-items-end">
                                <div class="col-md-8">
                                    <label class="form-label">اللعبة</label>
                                    <select name="game_id" class="form-control select2" onchange="this.form.submit()">
                                        <option value="">اختر اللعبة</option>
                                        @foreach ($games as $game)
                                            <option value="{{ $game->id }}"
                                                {{ $selectedGameId == $game->id ? 'selected' : '' }}>
                                                {{ $game->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    @if ($selectedGameId)
                                        <a href="{{ route('admin.game-attachments.create', ['game_id' => $selectedGameId]) }}"
                                            class="btn btn-primary">
                                            <x-lucide-plus width="20" height="20" /> إضافة حقل جديد
                                        </a>
                                        <a href="{{ route('admin.game-attachments.preview', $selectedGameId) }}"
                                            class="btn btn-info" target="_blank">
                                            <x-lucide-eye width="20" height="20" /> معاينة النموذج
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        @if ($selectedGameId && $attachments->count() > 0)
            <!-- Attachments List -->
            <div class="row">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-header pb-0">
                            <div class="d-flex justify-content-between">
                                <h4 class="card-title mg-b-0">حقول اللعبة</h4>
                                <small class="text-muted">يمكنك سحب وإفلات الحقول لإعادة ترتيبها</small>
                            </div>
                        </div>
                        <div class="card-body">
                            <div id="sortable-attachments">
                                @foreach ($attachments as $attachment)
                                    <div class="attachment-card sortable-item" data-id="{{ $attachment->id }}">
                                        <div class="row align-items-center">
                                            <div class="col-md-1 drag-handle">
                                                <x-lucide-grip-horizontal class="text-muted" width="20" height="20" />
                                            </div>
                                            <div class="col-md-3">
                                                <h6 class="mb-1">{{ $attachment->name_ar }}</h6>
                                                <small class="text-muted">{{ $attachment->name }}</small>
                                            </div>
                                            <div class="col-md-2">
                                                <span
                                                    class="badge badge-info field-type-badge">{{ $attachment->type }}</span>
                                            </div>
                                            <div class="col-md-2">
                                                @if ($attachment->required)
                                                    <span class="badge badge-danger">مطلوب</span>
                                                @else
                                                    <span class="badge badge-secondary">اختياري</span>
                                                @endif
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-check form-switch">
                                                    <input class="form-check-input toggle-status" type="checkbox"
                                                        data-id="{{ $attachment->id }}"
                                                        {{ $attachment->is_active ? 'checked' : '' }}>
                                                    <label class="form-check-label">
                                                        {{ $attachment->is_active ? 'مفعل' : 'معطل' }}
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="btn-group" role="group">
                                                    <a href="{{ route('admin.game-attachments.edit', $attachment->id) }}"
                                                        class="btn btn-sm btn-outline-primary">
                                                        <x-lucide-pencil width="20" height="20" />
                                                    </a>
                                                    <button type="button"
                                                        class="btn btn-sm btn-outline-success duplicate-btn"
                                                        data-id="{{ $attachment->id }}">
                                                        <x-lucide-copy width="20" height="20" />
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-outline-danger delete-btn"
                                                        data-id="{{ $attachment->id }}">
                                                        <x-lucide-trash-2 width="20" height="20" />
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        @if ($attachment->help_text_ar)
                                            <div class="row mt-2">
                                                <div class="col-md-11 offset-md-1">
                                                    <small class="text-info">{{ $attachment->help_text_ar }}</small>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @elseif($selectedGameId)
            <!-- No Attachments Message -->
            <div class="row">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-body text-center py-5">
                            <x-lucide-folder-open width="64" height="64" style="color: #ccc;" />
                            <h5 class="mt-3">لا توجد حقول لهذه اللعبة</h5>
                            <p class="text-muted">ابدأ بإضافة حقول جديدة لتخصيص نموذج الطلب</p>
                            <a href="{{ route('admin.game-attachments.create', ['game_id' => $selectedGameId]) }}"
                                class="btn btn-primary">
                                <x-lucide-plus width="20" height="20" /> إضافة حقل جديد
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
@endsection

@section('js')
    @include('admin.helper.tablescripts')
    @include('vue')
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
    <script>
        $(function() {
            $('.select2').select2();

            // Initialize sortable
            if (document.getElementById('sortable-attachments')) {
                const sortable = Sortable.create(document.getElementById('sortable-attachments'), {
                    animation: 150,
                    handle: '.drag-handle',
                    onEnd: function(evt) {
                        const fieldIds = [];
                        $('#sortable-attachments .sortable-item').each(function() {
                            fieldIds.push($(this).data('id'));
                        });

                        $.ajax({
                            url: '{{ route('admin.game-attachments.reorder') }}',
                            method: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}',
                                game_id: {{ $selectedGameId ?? 'null' }},
                                field_ids: fieldIds
                            },
                            success: function(response) {
                                if (response.success) {
                                    toastr.success(response.message);
                                }
                            },
                            error: function() {
                                toastr.error('حدث خطأ أثناء إعادة الترتيب');
                            }
                        });
                    }
                });
            }

            // Toggle status
            $('.toggle-status').change(function() {
                const id = $(this).data('id');
                const isChecked = $(this).is(':checked');

                $.ajax({
                    url: '{{ route('admin.game-attachments.toggle-status', ':id') }}'.replace(
                        ':id', id),
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            toastr.success(response.message);
                            const label = $(this).siblings('label');
                            label.text(response.new_status ? 'مفعل' : 'معطل');
                        }
                    }.bind(this),
                    error: function() {
                        toastr.error('حدث خطأ أثناء تغيير الحالة');
                        $(this).prop('checked', !isChecked);
                    }.bind(this)
                });
            });

            // Delete attachment
            $('.delete-btn').click(function() {
                const id = $(this).data('id');

                Swal.fire({
                    title: 'هل أنت متأكد؟',
                    text: 'سيتم حذف هذا الحقل نهائياً',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'نعم، احذف',
                    cancelButtonText: 'إلغاء'
                }).then((result) => {
                    if (result.isConfirmed) {
                        const form = $('<form>', {
                            method: 'POST',
                            action: '{{ route('admin.game-attachments.destroy', ':id') }}'
                                .replace(':id', id)
                        });

                        form.append($('<input>', {
                            type: 'hidden',
                            name: '_token',
                            value: '{{ csrf_token() }}'
                        }));

                        form.append($('<input>', {
                            type: 'hidden',
                            name: '_method',
                            value: 'DELETE'
                        }));

                        form.appendTo('body').submit();
                    }
                });
            });

            // Duplicate attachment
            $('.duplicate-btn').click(function() {
                const id = $(this).data('id');

                $.ajax({
                    url: '{{ route('admin.game-attachments.duplicate', ':id') }}'.replace(':id',
                        id),
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        location.reload();
                    },
                    error: function() {
                        toastr.error('حدث خطأ أثناء النسخ');
                    }
                });
            });
        });
    </script>
@endsection