@extends('common.modals.modal_base', [
    'class' => 'tabs-modal',
    'id' => $id ?? 'tabs-modal'
])

@section('modal_content')
    <div class="content">
        @if(!empty($tabs))
            @php($activeTab = $activeTab ?? 1)

            <div class="tabs-header">
                @foreach($tabs as $tab)
                    <div class="tab-header {{($loop->iteration == $activeTab)?'active':''}}" data-tab="tab-{{$loop->iteration}}">
                        {{$tab['tabHeader']}}
                    </div>
                @endforeach
            </div>

            <div class="tabs-content">
                @foreach($tabs as $tab)
                    <div class="tab-content {{($loop->iteration == $activeTab)?'active':''}}" data-tab="tab-{{$loop->iteration}}">
                        @include('common.modals.components.tabs.'.$tab['tabView'])
                    </div>
                @endforeach
            </div>
        @endif
    </div>
@overwrite

@section('modal_scripts')
    <script>
        $(function () {
            $('{{'#'.($id ?? 'tabs-modal')}}').on('click', '.tab-header', function () {
                $(this).addClass('active')
                    .siblings('.tab-header')
                    .removeClass('active');

                $(this).parents('.custom-modal')
                    .find('.tab-content[data-tab="'+$(this).attr('data-tab')+'"]')
                    .addClass('active')
                    .siblings('.tab-content')
                    .removeClass('active');
            });
        });
    </script>
@overwrite