@extends('admin.layouts.app')

@section('content')

    <!-- Page Wrapper -->
    <!-- Content Wrapper -->
    <div id="content-wrapper" class="d-flex flex-column">

        <!-- Main Content -->
        <div id="content">

            <!-- Topbar -->
            <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

                <!-- Sidebar Toggle (Topbar) -->
                <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
                    <i class="fa fa-bars"></i>
                </button>

                <!-- Topbar Search -->
                <form
                        class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
                    <div class="input-group">
                        <input type="text" class="form-control bg-light border-0 small" placeholder="Поиск..."
                               aria-label="Search" aria-describedby="basic-addon2">
                        <div class="input-group-append">
                            <button class="btn btn-primary" type="button">
                                <i class="fas fa-search fa-sm"></i>
                            </button>
                        </div>
                    </div>
                </form>

                <!-- Topbar Navbar -->
                <ul class="navbar-nav ml-auto">

                    <!-- Nav Item - Search Dropdown (Visible Only XS) -->
                    <li class="nav-item dropdown no-arrow d-sm-none">
                        <a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button"
                           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-search fa-fw"></i>
                        </a>
                        <!-- Dropdown - Messages -->
                        <div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in"
                             aria-labelledby="searchDropdown">
                            <form class="form-inline mr-auto w-100 navbar-search">
                                <div class="input-group">
                                    <input type="text" class="form-control bg-light border-0 small"
                                           placeholder="Search for..." aria-label="Search"
                                           aria-describedby="basic-addon2">
                                    <div class="input-group-append">
                                        <button class="btn btn-primary" type="button">
                                            <i class="fas fa-search fa-sm"></i>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </li>


                    <div class="topbar-divider d-none d-sm-block"></div>

                    <!-- Nav Item - User Information -->
                    <li class="nav-item dropdown no-arrow">

                        <ul class="navbar-nav ms-auto">
                            <li class="nav-item dropdown">
                                <a id="navbarDropdown" class="nav-link dropdown-toggle text-dark" href="#"
                                   role="button" data-bs-toggle="dropdown" aria-haspopup="true"
                                   aria-expanded="false" v-pre>
                                    {{ Auth::user()->name }}
                                </a>
                                <div class="dropdown-menu dropdown-menu-end"
                                     aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="{{ route('logout') }}"
                                       onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                                        {{ __('Выйти') }}
                                    </a>
                                    <form id="logout-form" action="{{ route('logout') }}" method="POST"
                                          class="d-none">
                                        @csrf
                                    </form>
                                </div>
                            </li>


                        </ul>

                    </li>

                </ul>

            </nav>
            <!-- End of Topbar -->

            <!-- Begin Page Content -->
            <div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title">
                        @if($section)
                            Калькуляторы раздела: {{ $section->name }}
                        @else
                            Все калькуляторы по разделам
                        @endif
                    </h3>
                    @if($section)
                        <a href="{{ route('sections.index') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-left"></i> К разделам
                        </a>
                    @endif
                </div>
                <div class="card-body">
                    <!-- Фильтр по разделу -->
                    @if(!$section)
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <select class="form-control" id="sectionFilter" onchange="filterBySection()">
                                    <option value="">Все разделы</option>
                                    @foreach(\App\Models\Section::withCount('calculators')->get() as $sect)
                                        <option value="{{ $sect->id }}" {{ request('section_id') == $sect->id ? 'selected' : '' }}>
                                            {{ $sect->name }} ({{ $sect->calculators_count }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    @endif

                    <!-- Поиск -->
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="input-group">
                                <input type="text" class="form-control" id="calculatorSearch" placeholder="Поиск калькулятора...">
                                <div class="input-group-append">
                                    <button class="btn btn-outline-secondary" type="button" onclick="searchCalculators()">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Таблица калькуляторов -->
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead class="thead-light">
                            <tr>
                                <th>Название</th>
                                <th>Алгоритм</th>
                                <th>Раздел</th>
                                <th>Статус</th>
                                <th>ID</th>
                                <th class="text-center">Действия</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($calculators as $calculator)
                                <tr data-entry-id="{{ $calculator->id }}">
                                    <td class="text-dark">
                                        <div class="font-weight-bold">{{ $calculator->name }}</div>
                                        @if($calculator->description)
                                            <div class="text-muted">{{ Str::limit($calculator->description, 100) }}</div>
                                        @endif
                                    </td>
                                    <td>
                                        @if($calculator->calculationAlgorithm)
                                            <span class="text-info">{{ $calculator->calculationAlgorithm->name }}</span>
                                        @else
                                            <span class="text-danger"><i class="fas fa-exclamation-triangle"></i> Алгоритм не найден</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($calculator->section)
                                            <span class="text-success">{{ $calculator->section->name }}</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($calculator->is_active)
                                            <span class="status-badge status-active">Активен</span>
                                        @else
                                            <span class="status-badge status-inactive">Неактивен</span>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="text-primary">{{ $calculator->id }}</span>
                                    </td>
                                    <td>
                                        <div class="actions-container">
                                            <a class="btn btn-info btn-actions"
                                               href="{{ route('calculators.export', $calculator->id) }}" title="Экспорт JSON (MODX)">
                                                <i class="fas fa-file-export"></i>
                                            </a>
                                            <a class="btn btn-secondary btn-actions" 
                                               href="{{ route('calculators.modx-schema', $calculator->id) }}" title="JSON schema API (как для MODX)">
                                                <i class="fas fa-code"></i>
                                            </a>
                                            <a class="btn btn-primary btn-actions"
                                               href="{{ route('calculators.edit', $calculator->id) }}" title="Редактировать">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            @if($calculator->calculationAlgorithm)
                                                <a class="btn btn-warning btn-actions"
                                                   href="{{ route('calculation-algorithms.edit', $calculator->calculationAlgorithm->id) }}" title="Редактировать алгоритм">
                                                    <i class="fas fa-calculator"></i>
                                                </a>
                                            @endif
                                            <form action="{{ route('calculators.destroy', $calculator->id) }}" method="POST" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger btn-actions" onclick="return confirm('Вы уверены?')" title="Удалить">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6">
                                        <div class="text-center">{{ __('Нет калькуляторов') }}</div>
                                    </td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Пагинация -->
                    <div class="row mt-4">
                        <div class="col-12 d-flex justify-content-center">
                            @if ($calculators->lastPage() > 1)
                                {{ $calculators->appends(request()->query())->links('pagination::bootstrap-4') }}
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .table {
        background-color: #fff;
    }

    .table thead th {
        background-color: #fff;
        border-bottom: 2px solid #dee2e6;
    }

    .table tbody td,
    .table tbody th {
        background-color: #fff;
    }

    .actions-container {
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .btn-actions {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        line-height: 1.5;
        border-radius: 0.2rem;
    }

    .status-badge {
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .status-active {
        background-color: #28a745;
        color: white;
    }

    .status-inactive {
        background-color: #6c757d;
        color: white;
    }
</style>

<script>
    function filterBySection() {
        const sectionId = document.getElementById('sectionFilter').value;
        if (sectionId) {
            window.location.href = `/manager/section-calculators/${sectionId}`;
        } else {
            window.location.href = `/manager/section-calculators`;
        }
    }

    function searchCalculators() {
        const searchTerm = document.getElementById('calculatorSearch').value.toLowerCase();
        const calculatorElements = document.querySelectorAll('[data-entry-id]');

        calculatorElements.forEach(element => {
            const text = element.textContent.toLowerCase();
            if (text.includes(searchTerm)) {
                element.style.display = 'table-row';
            } else {
                element.style.display = 'none';
            }
        });
    }

    // Поиск при вводе
    document.getElementById('calculatorSearch')?.addEventListener('input', searchCalculators);
</script>

        </div>
        <!-- End of Main Content -->

        <!-- Footer -->
        @include('admin.layouts.footer')

        <!-- End of Footer -->

    </div>

@endsection