@extends('layouts.app')
@section('title')
    {{ __('messages_1.Features') }}
@endsection
@section('style')
    <style>
        .box-img img,
        .box-img-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;

        }

        .box-img {
            width: 100%;
            height: 300px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .box-img-cover {
            width: 100%;
            height: 300px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .btn-icon {

            padding: 0;
            width: 20px;
            height: 20px;

        }
    </style>
@endsection
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        @include('inc.breadcrumb', [
            'breadcrumb_items' => [
                __('messages.Home') => route('home'),
                __('messages_1.Page Settings') => null,
                __('messages_1.Features') => route('admin.page_settings.skip_features.index'),
                __('messages.Edit') => 'active',
            ],
        ])



        <div class="row justify-content-center">
            <!-- Form controls -->
            <div class="col-md-12">
                <!-- Multi Column with Form Separator -->
                <div class="card mb-5">
                    <form id="form_submit" class="card-body form_submit"
                        action="{{ route('admin.page_settings.skip_features.update', $item->id) }}" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <h6>1. {{ __('messages.Basic information') }}</h6>
                        <div class="nav-align-top  mb-4">
                            <ul class="nav nav-tabs" role="tablist">
                                @foreach ($languages as $lang)
                                    <li class="nav-item" role="presentation">
                                        <button type="button" class="nav-link {{ $loop->index == 0 ? 'active' : '' }}"
                                            role="tab" data-bs-toggle="tab" data-bs-target="#navs-{{ $lang->id }}"
                                            aria-controls="navs-{{ $lang->id }}" aria-selected="true">
                                            {{ $lang->native_name }}
                                        </button>
                                    </li>
                                @endforeach


                            </ul>
                            <div class="tab-content p-0">
                                @foreach ($languages as $lang)
                                    <div class="tab-pane fade {{ $loop->index == 0 ? 'active show' : '' }}  "
                                        id="navs-{{ $lang->id }}" role="tabpanel">
                                        <div class="row">

                                            <div class="col-md-12 mt-3">
                                                <label class="form-label mb-1"
                                                    for="title_{{ $lang->code }}">{{ __('messages.Title') }} (
                                                    {{ $lang->code }} ) </label>
                                                <input type="text" id="title2_{{ $lang->code }}"
                                                    data-slug_name="slug_{{ $lang->code }}"
                                                    class="form-control input_name  @error('title_' . $lang->code) is-invalid @enderror"
                                                    name="title_{{ $lang->code }}"
                                                    value="{{ $lang->code == 'ar' ? $skip_feature_translate_ar?->title : $skip_feature_translate_en?->title }}" />
                                                @error('title_' . $lang->code)
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>




                                            <div class="col-md-12 mt-3">
                                                <label class="form-label mb-1"
                                                    for="description_{{ $lang->code }}">{{ __('messages.Description') }}

                                                    ({{ $lang->code }})
                                                </label>
                                                <textarea style="height: 200px" id="description_{{ $lang->code }}"
                                                    class="form-control   @error('description_' . $lang->code) is-invalid @enderror"
                                                    name="description_{{ $lang->code }}">{{ $lang->code == 'ar' ? $skip_feature_translate_ar?->description : $skip_feature_translate_en?->description }}</textarea>
                                                @error('description_' . $lang->code)
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>


                                        </div>
                                    </div>
                                @endforeach

                            </div>


                            <hr>


                            <div class="mb-4"></div>



                            <h6>2. {{ __('messages_1.Image') }}</h6>

                            <div class="row">
                                <div class="col-md-3 mb-3">
                                    <div class="mb-3">1</div>
                                    <div class="d-flex align-items-start align-items-sm-center mb-3 gap-4 box-img">
                                        <img src="{{ $item?->image ? asset($item?->image) : asset('default-images/default.png') }}"
                                            alt="user-avatar"
                                            class="img-fluid my-3 rounded shadow-img img-btn-click border border-dark"
                                            data-btn_click_id="btn_click_image_1" id="image_1" />
                                    </div>
                                    <label for="upload_image_1" class="btn btn-primary me-2" id="btn_click_image_1"
                                        tabindex="0">
                                        <span class="d-none d-sm-block">{{ __('messages.Upload image') }}</span>
                                        <i class="ti ti-upload d-block d-sm-none"></i>
                                        <input type="file" id="upload_image_1" name="image" data-image_id="image_1"
                                            class="account-file-input input_show_image @error('image')  is-invalid  @enderror"
                                            hidden accept="image/png, image/jpeg, image/jpg" />
                                    </label>

                                    @error('image')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>







                            </div>



                        </div>


                        <hr>













                        <div class="pt-4">
                            <button type="submit"
                                class="btn btn-primary me-sm-3 me-1 btn_with_load">{{ __('messages.Save') }} <span
                                    class="spinner-border mx-3 d-none loader" role="status"
                                    aria-hidden="true"></span></button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
@endsection

@section('script')
    @include('inc.script_submit')
    <script>
        $(function() {




            $(".input_show_image").change(function(event) {
                var file = event.target.files[0];
                var el_image = $(this).data("image_id");
                console.log(el_image)
                if (file) {
                    var reader = new FileReader();
                    reader.onload = function(e) {

                        $('#' + el_image).attr('src', e.target.result);
                    };
                    reader.readAsDataURL(file);
                }
            })

            $(".img-btn-click").click(function() {
                var btn = $(this).data("btn_click_id")
                $("#" + btn).click()
            })
        })
    </script>
@endsection