@extends('admin.layouts.app')

@section('content')
<div class="row">
    <div class="col-xl-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
            <h4 class="mb-sm-0">{{ __('admin/menu.page_title') }}</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">{{ __('admin/menu.breadcrumb.interface') }}</a></li>
                    <li class="breadcrumb-item active">{{ __('admin/menu.breadcrumb.menu_builder') }}</li>
                </ol>
            </div>
        </div>

        <!-- Menu bar -->
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex align-items-center flex-wrap gap-2">
                        <div class="flex-grow-1">
                            <button type="button" class="btn btn-info add-btn" onclick="openMenuModal()">
                                <i class="ri-add-fill me-1 align-bottom"></i> {{ __('admin/menu.actions.add_menu') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="ri-error-warning-line me-2"></i>{{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif        

        <div class="col-xl-12">
            <div class="card">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">{{ __('admin/menu.menu_list') }}</h4>
                </div>

                <div class="card-body">
                    @if($menus->count() > 0)
                        <div class="table-responsive table-card">
                            <table class="table align-middle table-nowrap mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th scope="col">{{ __('admin/menu.table.name') }}</th>
                                        <th scope="col">{{ __('admin/menu.table.location') }}</th>
                                        <th scope="col">{{ __('admin/menu.table.items_count') }}</th>
                                        <th scope="col">{{ __('admin/menu.table.status') }}</th>
                                        <th scope="col">{{ __('admin/menu.table.created_at') }}</th>
                                        <th scope="col" class="text-end">{{ __('admin/menu.table.actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($menus as $menu)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-xs me-3">
                                                    <span class="avatar-title rounded-circle bg-primary-subtle text-primary">
                                                        <i class="ri-menu-line"></i>
                                                    </span>
                                                </div>
                                                <div>
                                                    <h6 class="mb-0">{{ $menu->name }}</h6>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            @if($menu->location)
                                                <span class="badge bg-info-subtle text-info">{{ $menu->location }}</span>
                                            @else
                                                <span class="text-muted">—</span>
                                            @endif
                                        </td>
                                        <td>
                                            <span class="fw-medium">{{ $menu->items->count() }}</span>
                                            <small class="text-muted">{{ __('admin/menu.items_count') }}</small>
                                        </td>
                                        <td>
                                            @if($menu->is_active)
                                                <span class="badge bg-success-subtle text-success">
                                                    <i class="ri-check-line me-1"></i>{{ __('admin/menu.status.active') }}
                                                </span>
                                            @else
                                                <span class="badge bg-warning-subtle text-warning">
                                                    <i class="ri-close-line me-1"></i>{{ __('admin/menu.status.inactive') }}
                                                </span>
                                            @endif
                                        </td>
                                        <td>
                                            <span class="text-muted">{{ $menu->created_at->format('d/m/Y') }}</span>
                                        </td>
                                        <td class="text-end">
                                            <div class="gap-1 d-flex justify-content-md-end">
                                                <a href="{{ route('admin.menu.show', $menu->id) }}" 
                                                   class="btn bg-info-subtle text-info"
                                                   data-bs-toggle="tooltip" 
                                                   data-bs-title="{{ __('admin/menu.actions.builder') }}">
                                                    <i class="ri-settings-3-line"></i> {{ __('admin/menu.actions.builder') }}
                                                </a>
                                                <button type="button" 
                                                        class="btn btn-icon bg-primary-subtle text-primary" 
                                                        onclick="openMenuModal({{ $menu->id }})"
                                                        data-bs-toggle="tooltip" 
                                                        data-bs-title="{{ __('admin/menu.actions.edit') }}">
                                                        <i class="ri-pencil-line"></i>
                                                </button>
                                                <span data-bs-toggle="tooltip" data-bs-placement="top" title="{{ __('admin/menu.actions.delete') }}">
                                                    <button type="button"
                                                            class="btn btn-icon bg-danger-subtle text-danger open-delete-modal"
                                                            data-bs-toggle="modal"
                                                            href="#deleteRecordModal"
                                                            data-delete-url="{{ route('admin.menu.destroy', $menu->id) }}"
                                                            data-item-name="{{ $menu->name }}"
                                                            data-item-type="{{ __('admin/menu.delete_modal.item_type') }}"
                                                            data-bs-toggle="tooltip" 
                                                            data-bs-title="{{ __('admin/menu.actions.delete') }}">
                                                            <i class="ri-delete-bin-line align-bottom"></i>
                                                    </button>
                                                </span>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-5">
                            <div class="avatar-lg mx-auto mb-4">
                                <div class="avatar-title bg-primary-subtle text-primary rounded-circle fs-2">
                                    <i class="ri-menu-line"></i>
                                </div>
                            </div>
                            <h5>{{ __('admin/menu.empty.title') }}</h5>
                            <p class="text-muted mb-4">{{ __('admin/menu.empty.description') }}</p>
                            <button type="button" class="btn btn-primary" onclick="openMenuModal()">
                                <i class="ri-add-line me-1"></i>{{ __('admin/menu.actions.create_first') }}
                            </button>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour ajouter/éditer menu -->
<div class="modal fade" id="menuModal" data-bs-backdrop="static" tabindex="-1">
    <div class="modal-dialog">
        <form id="menuForm">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="menuModalTitle">{{ __('admin/menu.modal.add_title') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="name" class="form-label">{{ __('admin/menu.form.name') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="name" name="name" required>
                        <div class="form-text">{{ __('admin/menu.form.name_help') }}</div>
                    </div>
                    <div class="mb-3">
                        <label for="location" class="form-label">{{ __('admin/menu.form.location') }}</label>
                        <input type="text" class="form-control" id="location" name="location" 
                               placeholder="{{ __('admin/menu.form.location_placeholder') }}">
                        <div class="form-text">{{ __('admin/menu.form.location_help') }}</div>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="is_active" name="is_active" value="1" checked>
                            <label class="form-check-label" for="is_active">
                                {{ __('admin/menu.form.is_active') }}
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="hidden" id="menuId" name="id" value="" />
                    <input type="hidden" name="_method" id="method" value="" />
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('admin/menu.actions.cancel') }}</button>
                    <button type="submit" class="btn btn-primary">
                        <span class="btn-text">
                            <i class="ri-save-line me-1"></i>{{ __('admin/menu.actions.save') }}
                        </span>
                        <span class="btn-loading d-none">
                            <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                            {{ __('admin/menu.actions.saving') }}
                        </span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Modal de suppression -->
<x-admin.delete-modal
    item-type="{{ __('admin/menu.delete_modal.item_type') }}"
    confirm-text="{{ __('admin/menu.delete_modal.confirm_text') }}"
    delete-text="{{ __('admin/menu.delete_modal.delete_text') }}" />

<!-- Composant toast global -->
<x-admin.toast-messages />
@endsection

@push('script')
<script>
var routes = {
    menuStore: "{{ route('admin.menu.store') }}",
    menuEdit: "{{ route('admin.menu.edit', ':id') }}",
    menuUpdate: "{{ route('admin.menu.update', ':id') }}",
    menuDestroy: "{{ route('admin.menu.destroy', ':id') }}"
};

var translations = {
    addTitle: "{{ __('admin/menu.modal.add_title') }}",
    editTitle: "{{ __('admin/menu.modal.edit_title') }}",
    saveSuccess: "{{ __('admin/menu.messages.save_success') }}",
    saveError: "{{ __('admin/menu.messages.save_error') }}"
};

function openMenuModal(menuId = null) {
    const modal = new bootstrap.Modal(document.getElementById('menuModal'));
    const form = document.getElementById('menuForm');
    const title = document.getElementById('menuModalTitle');
    
    // Reset form
    form.reset();
    document.getElementById('menuId').value = '';
    document.getElementById('method').value = '';
    
    if (menuId) {
        // Edit mode
        title.textContent = translations.editTitle;
        
        fetch(routes.menuEdit.replace(':id', menuId))
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    document.getElementById('name').value = data.menu.name;
                    document.getElementById('location').value = data.menu.location || '';
                    document.getElementById('is_active').checked = data.menu.is_active;
                    document.getElementById('menuId').value = data.menu.id;
                    document.getElementById('method').value = 'PUT';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showErrorToast(translations.saveError);
            });
    } else {
        // Add mode
        title.textContent = translations.addTitle;
    }
    
    modal.show();
}

document.getElementById('menuForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const menuId = document.getElementById('menuId').value;
    const method = document.getElementById('method').value;
    
    let url = routes.menuStore;
    if (menuId && method === 'PUT') {
        url = routes.menuUpdate.replace(':id', menuId);
        formData.append('_method', 'PUT');
    }
    
    const submitBtn = this.querySelector('button[type="submit"]');
    const btnText = submitBtn.querySelector('.btn-text');
    const btnLoading = submitBtn.querySelector('.btn-loading');
    
    // Afficher le spinner
    btnText.classList.add('d-none');
    btnLoading.classList.remove('d-none');
    submitBtn.disabled = true;
    
    fetch(url, {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            bootstrap.Modal.getInstance(document.getElementById('menuModal')).hide();
            showSuccessToast(data.message || translations.saveSuccess);
            setTimeout(() => location.reload(), 1000);
        } else {
            showErrorToast(data.message || translations.saveError);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showErrorToast(translations.saveError);
    })
    .finally(() => {
        // Masquer le spinner
        btnText.classList.remove('d-none');
        btnLoading.classList.add('d-none');
        submitBtn.disabled = false;
    });
});

// Fonctions utilitaires pour les toasts
function showSuccessToast(message) {
    if (typeof window.showSuccessToast === 'function') {
        window.showSuccessToast(message);
    } else {
        console.log('Success:', message);
    }
}

function showErrorToast(message) {
    if (typeof window.showErrorToast === 'function') {
        window.showErrorToast(message);
    } else {
        console.error('Error:', message);
    }
}
</script>
@endpush