@extends('layouts.admin')

@section('navBarItems')
    <div class="input-group input-group-sm mr-10 ">
        <span class="input-group-text" id="inputGroup-sizing-sm">Institutie</span>
        <select class="form-select" id="institution_selector">
            <option value="">-</option>
            @foreach($institutions as $institution)
                <option value="{{$institution->id}}" @if($institution->id === @$selectedInstitution->id) selected @endif>
                    {{$institution->name}}
                </option>
            @endforeach
        </select>
    </div>
@endsection

@section('title')
    {{@$headerTitle}}
@endsection

@section('breadcrumbs')
    {{ Breadcrumbs::render('admin.products.reports.product') }}
@endsection

@section('buttons')
    @can('admin-create')
        <a class="btn btn-primary" href="{{route('admin.products.stocks.add')}}"> Adaugǎ </a>
    @endcan
@endsection

@section('content')

    @include('admin.institution-products.institutionTabs')
    <div class="tab-index">
    <ul class="nav nav-tabs custom-tabs">
        <li class="nav-item">
            <a class="nav-link @if($activeSmallTab === 'product' ) active @endif" aria-current="page" href="{{route('admin.products.reports.product', [@$selectedInstitution->id])}}">Produs</a>
        </li>
        <li class="nav-item">
            <a class="nav-link @if($activeSmallTab === 'group' ) active @endif" href="{{ route('admin.products.reports.group', [@$selectedInstitution->id])}}">Grup</a>
        </li>
        <li class="nav-item">
            <a class="nav-link @if($activeSmallTab === 'category' ) active @endif" href="{{ route('admin.products.reports.category', [@$selectedInstitution->id])}}">Categorie</a>
        </li>
    </ul>
    </div>
    <div class="row">
        <div class="card">
            <div class="card-body">
                <manage-filter-procurement-report-product></manage-filter-procurement-report-product>
                <div class="row mt-10">
                    {{ $dataTable->table(['class' => 'table table-row-bordered gy-5'], true) }}
                </div>
            </div>
        </div>
    </div>
@endsection
<style>
    .custom-tabs .nav-link {
        color: #007bff;
        font-weight: bold;
        border-radius: 5px;
        transition: background-color 0.3s, color 0.3s;
        border: 1px solid transparent;
        margin-bottom: -1px; /* Prevents small gap below active tab */
    }

    .custom-tabs .nav-link:hover {
        background-color: #f8f9fa;
        color: #0056b3;
    }

    .custom-tabs .nav-link.active {
        background-color: #e9ecef;
        color: #343a40;
        border-top: 3px solid #343a40;
        border-left: 2px solid #343a40;
        border-right: 2px solid #343a40;
        border-bottom: none;
        border-radius: 5px 5px 0 0;
    }
</style>
@push('scripts')
    {{ $dataTable->scripts() }}
@endpush