@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> {{__('Edit Sub Category')}}
        </div>
    </div>
    <form action="{{ route('admin.subcategory.update', $subCategory->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        <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>
                                {{ __('Sub Category Information') }}
                            </h5>
                        </div>

                        <div class="mt-3">
                            <label class="form-label">
                                {{ __('Select Category') }}
                                <span class="text-danger">*</span>
                            </label>
                            <select name="category[]" data-placeholder="Select Category" class="form-control select2"
                                multiple style="width: 100%" required>
                                <option value="" disabled>
                                    {{ __('Select Category') }}
                                </option>
                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}"
                                        {{ in_array($category->id, $subCategory->categories?->pluck('id')->toArray()) ? 'selected' : '' }}>
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('category')
                                <p class="text text-danger m-0">{{ $message }}</p>
                            @enderror
                        </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" :value="$subCategory->name"/>
                            </div>
                            @foreach ($allLanguages as $language)
                                @php
                                    $translation = $subCategory->translations->where('lang', $language->name)->first();
                                @endphp
                                <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" :value="$translation ? $translation?->name : ''"/>
                                </div>
                            @endforeach
                        </div>

                        <div class="mt-3 d-flex align-items-center justify-content-center">
                            <div class="ratio1x1">
                                <img id="previewProfile"
                                    src="{{ $subCategory->thumbnail ?? '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" />
                        </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">
                                {{__('Update') }}
                            </button>

                        </div>

                    </div>

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

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