@extends('backend.layouts.app')

@section('content')

@if ($errors->any())
<div class="alert alert-danger">
    <ul>
        @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif



<div class="col-lg-12">
    <div class="card">
        <div class="card-header">
            <h4 class=".card-title">@if (isset($method) && $method == 'PUT')
                {{translate('Edit Blog_categories')}}
                @else
                {{translate('Create Blog_categories')}}
                @endif</h4>
            {{-- was-validated --}}
        </div>
        <div class="card-body">
            <form class="needs-validation" id="myForm" action="{{ $action }}" method="POST" enctype="multipart/form-data" novalidate>
                {{ csrf_field() }}
                @if (isset($method))
                @method('PUT')
                @endif

                <ul class="nav nav-tabs nav-line-tabs mb-5 fs-6">
                    @foreach ($langs as $key => $lang)
                    <li class="nav-item">
                        <a class="nav-link cmp-links {{$key == 0 ? 'active' : ''}}" data-lang="{{$lang->name}}" data-key="{{$key}}" data-bs-toggle="tab" href="#kt_tab_pane_{{$lang->name}}">
                            {{$lang->name}}
                        </a>
                    </li>
                    @endforeach
                </ul>

                <div class="tab-content" id="myTabContent">
                    <input type="hidden" name="id" id="id" value="{{ isset($id) ? $id : '' }}">

                    @foreach ($langs as $key => $lang)
                    <div class="tab-pane fade show {{ $key == 0 ? 'active' : '' }}" id="kt_tab_pane_{{ $lang->name }}" role="tabpanel">
                        <input type="hidden" name="data[{{ $lang->name }}][lang]" value="{{ $lang->name }}">

                        <div class="row">


                            <!-- Name Input -->
                            <div class="col-6">
                                <div class="mb-3">
                                    <label for="name" class="form-label"> {{ translate('name') }}</label>
                                    <input type="text" class="form-control" id="name_{{$lang->name}}" name="data[{{$lang->name}}][name]" value="{{ isset($data[$lang->name]) ? $data[$lang->name]->name : '' }}">
                                    @error("data.{$lang->name}.name")
                                    <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>


                        </div>
                    </div>
                    @endforeach


                </div>

                <input type="hidden" name="marketer" value="0">

                <div class="form-check form-switch mb-5">
                    <input
                        class="form-check-input"
                        type="checkbox"
                        id="marketerSwitch"
                        name="marketer"
                        value="1"
                        {{ old('marketer', $blog_category->marketer ?? 0) == 1 ? 'checked' : '' }}>
                    <label class="form-check-label" for="marketerSwitch">{{ translate('Marketer') }}</label>
                </div>






                <button class="btn btn-primary" id="submitBtn" type="submit">{{ translate('Submit form') }}</button>
            </form>




        </div>
    </div>
</div>








<script>
    document.getElementById('submitBtn').addEventListener('click', function(event) {
        var form = document.getElementById('myForm');
        if (!form.checkValidity()) {
            event.preventDefault();
            form.classList.add('was-validated');
            return;
        }

        var submitBtn = document.getElementById('submitBtn');
        submitBtn.disabled = true;
        submitBtn.innerHTML = 'Loading...';

        setTimeout(function() {
            form.submit();
        }, 1000);

        event.preventDefault();
    });

</script>




@endsection