@extends('layouts.app')

@section('content')
    <div class="page-title">
        <div class="d-flex gap-2 align-items-center">
            <i class="fa-solid fa-border-all"></i> {{__('Create New Category')}}
        </div>
    </div>
    <form action="{{ route('admin.category.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="row">
            <div class="col-lg-8 m-auto">
                <div class="card mt-3">
                    <div class="card-body">

                        <div class="d-flex gap-2 border-bottom pb-2">
                            <i class="fa-solid fa-user"></i>
                            <h5>
                                {{__('Category Information')}}
                            </h5>
                        </div>

                        <ul class="nav nav-pills languageTab mt-3" id="pills-tab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="pills-english-tab" data-bs-toggle="pill"
                                    data-bs-target="#pills-english" type="button" role="tab" aria-controls="pills-english"
                                    aria-selected="true">
                                    {{ __('English(EN)') }}
                                </button>
                            </li>
                            @foreach ($allLanguages as $language)
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-{{ $language->name }}-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-{{ $language->name }}" type="button" role="tab"
                                        aria-controls="pills-{{ $language->name }}" aria-selected="false">
                                        {{ __($language->title . '(' . $language->name . ')') }}
                                    </button>
                                </li>
                            @endforeach
                        </ul>
                        <div class="tab-content" id="pills-tabContent">
                            <div class="tab-pane fade show active mt-2" id="pills-english" role="tabpanel"
                                aria-labelledby="pills-english-tab" tabindex="0">
                                    <x-input label="Name (EN)" name="name" type="text" placeholder="Enter Name" required="true"/>
                            </div>
                            @foreach ($allLanguages as $language)
                                <div class="tab-pane fade mt-2" id="pills-{{ $language->name }}" role="tabpanel"
                                    aria-labelledby="pills-{{ $language->name }}-tab" tabindex="0">
                                        <x-input :label="'Name (' . $language->name . ')'" name="names[{{ $language->name }}]" type="text" :placeholder="'Enter Name (' . $language->name . ')'" required="true"/>
                                </div>
                            @endforeach
                        </div>

                        <div class="mt-3 d-flex align-items-center justify-content-center">
                            <div class="ratio1x1">
                                <img id="previewProfile" src="https://placehold.co/500x500/f1f5f9/png" alt="" width="100%">
                            </div>
                        </div>
                        <div class="mt-3">
                            <x-file name="thumbnail" label="Thumbnail (Ratio 1:1)" preview="previewProfile" required="true"/>
                        </div>

                        <div class="mt-4">
                            <label for="description" class="form-label">
                                {{__('Description')}}
                            </label>
                            <textarea name="description" class="form-control" rows="3" placeholder="Enter description"></textarea>
                        </div>


                        <div class="mt-5 d-flex gap-2 justify-content-between">
                            <a href="{{ route('admin.category.index')}}" class="btn btn-secondary py-2 px-4">
                            {{__('Back')}}
                            </a>

                            <button type="submit" class="btn btn-primary py-2 px-4">
                                {{__('Submit')}}
                            </button>

                        </div>

                    </div>

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

    </form>
@endsection
@push('css')
    <style>
        .nav-pills .nav-link {
            margin: 0 !important;
        }
    </style>
@endpush