@extends('layouts.app')

@section('title', __('products.main_categories.title'))

@push('styles')
<link href="{{ asset('css/main-categories.css') }}" rel="stylesheet">
@endpush

@section('content')
<div class="container-fluid main-categories-container">
    
    {{-- Page Header --}}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="h3 fw-bold text-dark mb-0">{{ __('products.main_categories.title') }}</h2>
        <div class="d-flex align-items-center gap-2">
            <button type="button" class="btn btn-add-category" onclick="openAddModal()">
                <i class="bi bi-plus-lg"></i>
                {{ __('products.main_categories.add_button') }}
            </button>
            <a href="{{ route('products.hub') }}" class="btn btn-outline-secondary">
                <i class="bi {{ app()->getLocale() == 'ar' ? 'bi-arrow-right' : 'bi-arrow-left' }}"></i> {{ __('common.back') }}
            </a>
        </div>
    </div>

    {{-- Alerts --}}
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show shadow-sm border-0" role="alert">
            <i class="bi bi-check-circle-fill me-2"></i> {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show shadow-sm border-0" role="alert">
            <ul class="mb-0 ps-3">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    {{-- Categories List (Smart Bars) --}}
    <div class="category-list">
        @forelse($categories as $category)
            <div class="category-card">
                <div class="category-info">
                    <h3 class="category-name">{{ app()->getLocale() === 'ar' ? $category->name_ar : $category->name_en }}</h3>
                </div>
                <div class="category-actions">
                    <button
                            type="button"
                            class="btn btn-light btn-action text-primary"
                            data-id="{{ $category->id }}"
                            data-name-ar="{{ $category->name_ar }}"
                            data-name-en="{{ $category->name_en }}"
                            onclick="openEditModal(this)"
                            title="{{ __('common.edit') }}">
                        <i class="bi bi-pencil"></i>
                    </button>
                    <button
                            type="button"
                            class="btn btn-light btn-action text-danger"
                            data-id="{{ $category->id }}"
                            onclick="openDeleteModal(this)"
                            title="{{ __('common.delete') }}">
                        <i class="bi bi-trash"></i>
                    </button>
                </div>
            </div>
        @empty
            <div class="text-center py-5 text-muted">
                <i class="bi bi-inbox fs-1 d-block mb-3 opacity-50"></i>
                <p>{{ __('products.main_categories.no_categories_found') }}</p>
            </div>
        @endforelse
    </div>
</div>

<div
        id="mainCategoriesConfig"
        data-store-route="{{ route('products.main_categories.store') }}"
        data-update-route-template="{{ route('products.main_categories.update', 0) }}"
        data-delete-route-template="{{ route('products.main_categories.destroy', 0) }}"
        data-add-title="{{ __('products.main_categories.add_button') }}"
        data-edit-title="{{ __('common.edit') }}"
        data-has-errors="{{ $errors->any() ? '1' : '0' }}"
        data-old-id="{{ old('id') }}"
        data-old-name-ar="{{ old('name_ar') }}"
        data-old-name-en="{{ old('name_en') }}"
></div>

{{-- Add/Edit Modal --}}
<div class="modal fade" id="categoryModal" tabindex="-1" aria-labelledby="categoryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form id="categoryForm" method="POST">
                @csrf
                <input type="hidden" name="_method" id="methodField" value="POST">
                <input type="hidden" name="id" id="categoryId">
                
                <div class="modal-header">
                    <h5 class="modal-title" id="categoryModalLabel">{{ __('products.main_categories.add_button') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="name_ar" class="form-label">{{ __('products.main_categories.form.name_ar_label') }}</label>
                        <input type="text" class="form-control" id="name_ar" name="name_ar" required maxlength="255" placeholder="{{ __('products.main_categories.form.name_ar_label') }}" value="{{ old('name_ar') }}">
                    </div>
                    <div class="mb-0">
                        <label for="name_en" class="form-label">{{ __('products.main_categories.form.name_en_label') }}</label>
                        <input type="text" class="form-control" id="name_en" name="name_en" required maxlength="255" placeholder="{{ __('products.main_categories.form.name_en_label') }}" value="{{ old('name_en') }}">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('common.cancel') }}</button>
                    <button type="submit" class="btn btn-primary bg-gradient border-0">{{ __('common.save') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Delete Confirmation Modal --}}
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form id="deleteForm" method="POST">
                @csrf
                @method('DELETE')
                
                <div class="modal-header border-bottom-0 pb-0">
                    <h5 class="modal-title text-danger" id="deleteModalLabel">{{ __('common.confirm_delete_title') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body py-4">
                    <p class="mb-0 fs-5 text-center">{{ __('common.confirm_delete_message') }}</p>
                </div>
                <div class="modal-footer border-top-0 pt-0 justify-content-center">
                    <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">{{ __('common.cancel') }}</button>
                    <button type="submit" class="btn btn-danger px-4">{{ __('common.confirm_delete_action') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    const config = document.getElementById('mainCategoriesConfig');
    const storeRoute = config.dataset.storeRoute;
    const updateRouteTemplate = config.dataset.updateRouteTemplate;
    const deleteRouteTemplate = config.dataset.deleteRouteTemplate;
    const addTitle = config.dataset.addTitle;
    const editTitle = config.dataset.editTitle;

    function openAddModal(clear = true) {
        const form = document.getElementById('categoryForm');
        form.action = storeRoute;
        document.getElementById('methodField').value = "POST";
        document.getElementById('categoryModalLabel').innerText = addTitle;
        
        if (clear) {
            document.getElementById('name_ar').value = "";
            document.getElementById('name_en').value = "";
            document.getElementById('categoryId').value = "";
        }
        
        const modal = new bootstrap.Modal(document.getElementById('categoryModal'));
        modal.show();
    }

    function openEditModal(button) {
        const id = button.dataset.id;
        const nameAr = button.dataset.nameAr;
        const nameEn = button.dataset.nameEn;
        const form = document.getElementById('categoryForm');
        // Replace the placeholder '0' with the actual ID
        // Note: The route helper generates URL ending in /0
        form.action = updateRouteTemplate.replace('/0', '/' + id);
        
        document.getElementById('methodField').value = "PUT";
        document.getElementById('categoryId').value = id;
        document.getElementById('categoryModalLabel').innerText = editTitle;
        document.getElementById('name_ar').value = nameAr ?? "";
        document.getElementById('name_en').value = nameEn ?? "";
        
        const modal = new bootstrap.Modal(document.getElementById('categoryModal'));
        modal.show();
    }

    function openDeleteModal(button) {
        const id = button.dataset.id;
        const form = document.getElementById('deleteForm');
        form.action = deleteRouteTemplate.replace('/0', '/' + id);
        
        const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
        modal.show();
    }

    const hasErrors = config.dataset.hasErrors === '1';
    const oldId = config.dataset.oldId;
    const oldNameAr = config.dataset.oldNameAr;
    const oldNameEn = config.dataset.oldNameEn;

    if (hasErrors) {
        document.addEventListener('DOMContentLoaded', function() {
            if (oldId) {
                const fakeButton = document.createElement('button');
                fakeButton.dataset.id = oldId;
                fakeButton.dataset.nameAr = oldNameAr;
                fakeButton.dataset.nameEn = oldNameEn;
                openEditModal(fakeButton);
            } else {
                openAddModal(false);
            }
        });
    }
</script>
@endsection
