@php
    use App\Library\AdminLibrary as AdminLibrary;

$selectLangList=[];

$themeComponentSliderImages=AdminLibrary::themeComponentSliderImage($themeComponentRelational["theme_id"],$themeComponentRelational["id"]);
 foreach($form["languages"] as $slanguage){
     $selectLangList[$slanguage["id"]]=$slanguage["title"];
 }

@endphp
<style>
    .slider-list-table {
        font-size: 12px;
    }

    .slider-image-preview {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .slider-image-preview img {
        max-width: 150px;
        max-height: 150px;
    }

    .image-container {
        position: relative;
        display: inline-block;
    }

    .delete-btn {
        position: absolute;
        top: 5px;
        right: 5px;
        background-color: red;
        color: white;
        border: none;
        border-radius: 50%;
        cursor: pointer;
    }
</style>
<div class="modal fade text-left" id="sliderInsertFormModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel33" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <label class="modal-title text-text-bold-600"
                       id="myModalLabel33">{{trans("admin/themes.components.component_detail.form.slider.modal.title")}}</label>
                <button type="button" class="close sliderCloseBtn" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {{ html()->form()->method('POST')->action(route('admin.themes.components.slider.insert', ['theme_id' => $themeComponentRelational["theme_id"],"theme_component_rel_id"=>$themeComponentRelational["id"]]))->class("form modulForm")->id("sliderModulForm")->autocomplete("off")->attribute('enctype','multipart/form-data')->open() }}
            <div class="modal-body">
                {{html()->label("language")->for("language")->text(trans("admin/themes.components.component_detail.form.slider.modal.form.language"))}}
                <div class="form-group">
                    {{html()->select()->name("language")->required(true)->id("language")->options($selectLangList)->class("form-control")}}
                </div>

                {{html()->label("title")->for("title")->text(trans("admin/themes.components.component_detail.form.slider.modal.form.title"))}}
                <div class="form-group">
                    {{html()->input()->name("title")->id("title")->class("form-control")}}
                </div>

                {{html()->label("description")->for("description")->text(trans("admin/themes.components.component_detail.form.slider.modal.form.description"))}}
                <div class="form-group">
                    {{html()->textarea()->name("description")->id("description")->class("form-control")->style(['min-height'=>'150px','max-height'=>'150px'])}}
                </div>
                {{html()->label("image")->for("image")->text(trans("admin/themes.components.component_detail.form.slider.modal.form.image"))}}
                <div class="form-group">
                    {{html()->file()->name("image")->required(true)->id("imageInput")->class("form-control imageInput")}}

                    <div class="slider-image-preview" id="sliderImagePreview"></div>
                    {{html()->label("image_info")->for("image_info")->html(trans("admin/themes.components.component_detail.form.slider.modal.form.image_info",['width'=>$themeComponentRelational["slider_width"],"height"=>$themeComponentRelational["slider_height"]]))}}
                </div>
                {{html()->label("link")->for("link")->text(trans("admin/themes.components.component_detail.form.slider.modal.form.link"))}}
                <div class="form-group">
                    {{html()->input()->name("link")->id("link")->class("form-control")}}
                </div>
                {{html()->label("video_link")->for("video_link")->text(trans("admin/themes.components.component_detail.form.slider.modal.form.video_link"))}}
                <div class="form-group">
                    {{html()->input()->name("video_link")->id("video_link")->class("form-control")}}
                    {{html()->label("video_link_info")->for("video_link_info")->html(trans("admin/themes.components.component_detail.form.slider.modal.form.video_link_info"))}}

                </div>
                <div class="form-group text-center" style="border: none">
                    {{ html()->button()->type("submit")->class("btn btn-info btn-sm")->id("btnAction")->html(trans("admin/themes.components.component_detail.form.slider.modal.form.btn_insert")) }}
                </div>
            </div>
            <div class="modal-footer">
                <input type="reset" class="btn btn-outline-secondary btn-sm sliderCloseBtn" data-dismiss="modal"
                       value="  {{trans("admin/themes.components.component_detail.form.slider.modal.btn_close")}}">
            </div>
            {{ html()->form()->close() }}
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-content">
                <div class="card-body">
                    <h4 class="card-title">
                        {{trans("admin/themes.components.component_detail.form.slider.title")}}
                        <a href="#" class="btn btn-sm btn-info pull-right" id="btnSliderInsert">
                            {{trans(trans("admin/themes.components.component_detail.form.slider.modal.slider_insert_title"))}}
                        </a>
                    </h4>
                    <ul class="nav nav-tabs nav-topline">
                        @foreach($form["languages"] as $language)
                            <li class="nav-item">
                                <a class="nav-link @if($language["default"]) active @endif"
                                   id="tab-{{$language["id"]}}" data-toggle="tab"
                                   aria-controls="tab-{{$language["id"]}}"
                                   href="#tabPane{{$language["id"]}}"
                                   aria-expanded="true">{{$language["title"]}}</a>
                            </li>
                        @endforeach
                    </ul>
                    <div
                        class="tab-content tab-validate px-1 pt-1 border-grey border-lighten-2 border-0-top">
                        @foreach($form["languages"] as $lang)
                            @php
                                $langID=$lang["id"];
                                $themeComponentSliderImageList=collect($themeComponentSliderImages)->where('lang_id','=',$lang['id'])->toArray();
                            @endphp
                            <div role="tabpanel" class="tab-pane @if($lang["default"]) active @endif"
                                 id="tabPane{{$lang["id"]}}" aria-expanded="true"
                                 aria-labelledby="base-tabPane{{$lang["id"]}}">
                                <div class="form-body">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group mb-0">
                                                {{html()->label()->for("lang")->html(trans("admin/contents.form.lang")) }}
                                                {{html()->span()->id("lang-".$langID)->html($lang["title"])->style(['font-size'=>'12px','margin'=>' 5px 0','font-weight'=>'bold']) }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="table-responsive">

                                                <table class="table slider-list-table" id="sliderListTable">
                                                    <thead>
                                                    <tr>

                                                        <th>{{trans("admin/themes.components.component_detail.form.slider.list.order")}}</th>
                                                        <th>{{trans("admin/themes.components.component_detail.form.slider.list.image")}}</th>
                                                        <th>{{trans("admin/themes.components.component_detail.form.slider.list.title")}}</th>
                                                        <th>{{trans("admin/themes.components.component_detail.form.slider.list.description")}}</th>
                                                        <th>{{trans("admin/themes.components.component_detail.form.slider.list.link")}}</th>
                                                        <th>#</th>

                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    @foreach($themeComponentSliderImageList as $themeComponentSliderImageLKey=>$themeComponentSliderImageL)
                                                        <tr class="@if($themeComponentSliderImageLKey%2===0) bg-light @endif" data-id="{{$themeComponentSliderImageL["id"]}}">
                                                            <td>
                                                                <a class="btn btn-orange btn-sm sliderImageBtnMove">
                                                                    <i class="fa fa-arrows"></i>
                                                                </a>
                                                            </td>
                                                            <td>
                                                                @if(!empty($themeComponentSliderImageL["image_url"]))
                                                                    <a href="{{$themeComponentSliderImageL["image_url"]}}" target="_blank" style="border: 1px solid #efefef;padding: 3px">
                                                                        <img src="{{$themeComponentSliderImageL["image_url"]}}" alt="{{$themeComponentSliderImageL["title"]}}" style="max-height: 100px;max-width: 150px">
                                                                    </a>
                                                                @endif
                                                            </td>
                                                            <td>{{$themeComponentSliderImageL["title"]}}</td>
                                                            <td>{{$themeComponentSliderImageL["description"]}}</td>
                                                            <td>
                                                                @if(!empty($themeComponentSliderImageL["link"]))
                                                                    <a href="{{$themeComponentSliderImageL["link"]}}"
                                                                       target="_blank">Slider Linki</a>
                                                                @endif
                                                            </td>
                                                            <td>
                                                                <a href="{{route('admin.themes.components.slider.delete', ['theme_id' => $themeComponentRelational["theme_id"],"theme_component_rel_id"=>$themeComponentRelational["id"],'theme_component_slider_image_id'=>$themeComponentSliderImageL["id"]])}}" class="btn btn-danger btn-sm btnSliderDelete">
                                                                    <i class="fa fa-trash"></i>
                                                                </a>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                    </tbody>
                                                </table>

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

<script>
    document.getElementById('imageInput').addEventListener('change', function (event) {
        const imagePreview = document.getElementById('sliderImagePreview');
        imagePreview.innerHTML = ''; // Clear existing images

        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();

            reader.onload = function (e) {
                const imgContainer = document.createElement('div');
                imgContainer.classList.add('image-container');

                const img = document.createElement('img');
                img.src = e.target.result;

                const deleteBtn = document.createElement('button');
                deleteBtn.innerText = 'X';
                deleteBtn.classList.add('delete-btn');
                deleteBtn.addEventListener('click', function () {
                    imagePreview.innerHTML = ''; // Clear the preview
                    document.getElementById('imageInput').value = ''; // Reset the input value
                });

                imgContainer.appendChild(img);
                imgContainer.appendChild(deleteBtn);
                imagePreview.appendChild(imgContainer);
            };

            reader.readAsDataURL(file);
        }
    });

</script>