@extends('backend.dashboard.layout.master')
@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="container-xxl">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">
                @if (isset($method) && $method == 'PUT')
               {{translate('Edit Category')}}
                @else
                {{translate('Create Category')}}
                @endif
            </h3>
        </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 : '' }}" onkeyup="generateSlug('{{$lang->name}}')">
                                    @error("data.{$lang->name}.name")
                                    <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Slug Input -->
                            <div class="col-6">
                                <div class="mb-3">
                                    <label for="slug" class="form-label"> {{ translate('slug') }}</label>
                                    <input type="text" class="form-control" id="slug_{{$lang->name}}" name="data[{{$lang->name}}][slug]"
                                     value="{{ isset($data[$lang->name]) ? $data[$lang->name]->slug : '' }}">

                                    @error("data.{$lang->name}.slug")
                                    <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>


                        </div>
                    </div>
                    @endforeach
                </div>


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



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


<script>
      function generateSlug(language) {
        let name = document.getElementById('name_' + language).value;

        let slug = name
            .toLowerCase()
            .replace(/[^\w\sأ-يء-ى]/g, '')
            .replace(/[\s_-]+/g, '_')
            .replace(/^-+|-+$/g, '');

        document.getElementById('slug_' + language).value = slug;

    }


    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();
    });












    function previewImage(event) {
        var file = event.target.files[0];
        var previewContainer = document.getElementById('imagePreviewContainer');
        var imagePreview = document.getElementById('imagePreview');

        if (file) {
            var reader = new FileReader();

            reader.onload = function(e) {
                imagePreview.src = e.target.result;
                previewContainer.style.display = 'block';
            };

            reader.readAsDataURL(file);
        } else {
            previewContainer.style.display = 'none';
        }
    }

</script>


@endsection