@extends('admin.layouts.master')
@section('title')
{{ translate(' Profile Attributes - List') }}
@endsection

@section('content')
<div class="group-data-[sidebar-size=lg]:ltr:md:ml-vertical-menu group-data-[sidebar-size=lg]:rtl:md:mr-vertical-menu group-data-[sidebar-size=md]:ltr:ml-vertical-menu-md group-data-[sidebar-size=md]:rtl:mr-vertical-menu-md group-data-[sidebar-size=sm]:ltr:ml-vertical-menu-sm group-data-[sidebar-size=sm]:rtl:mr-vertical-menu-sm pt-[calc(theme('spacing.header')_*_1)] pb-[calc(theme('spacing.header')_*_0.8)] px-4 group-data-[navbar=bordered]:pt-[calc(theme('spacing.header')_*_1.3)] group-data-[navbar=hidden]:pt-0 group-data-[layout=horizontal]:mx-auto group-data-[layout=horizontal]:max-w-screen-2xl group-data-[layout=horizontal]:px-0 group-data-[layout=horizontal]:group-data-[sidebar-size=lg]:ltr:md:ml-auto group-data-[layout=horizontal]:group-data-[sidebar-size=lg]:rtl:md:mr-auto group-data-[layout=horizontal]:md:pt-[calc(theme('spacing.header')_*_1.6)] group-data-[layout=horizontal]:px-3 group-data-[layout=horizontal]:group-data-[navbar=hidden]:pt-[calc(theme('spacing.header')_*_0.9)]">
    <div class="container-fluid group-data-[content=boxed]:max-w-boxed mx-auto">

        <div class="flex flex-col gap-2 py-4 md:flex-row md:items-center print:hidden">
            <div class="grow">
                <h5 class="text-16">{{ translate(' List View') }}</h5>
            </div>
            <ul class="flex items-center gap-2 text-sm font-normal shrink-0">
                <li class="relative before:content-['\ea54'] before:font-remix ltr:before:-right-1 rtl:before:-left-1  before:absolute before:text-[18px] before:-top-[3px] ltr:pr-4 rtl:pl-4 before:text-slate-400 dark:text-zink-200">
                    <a href="#!" class="text-slate-400 dark:text-zink-200">{{ translate(' Products') }}</a>
                </li>
                <li class="text-slate-700 dark:text-zink-100">
                    {{ translate(' List View') }}
                </li>
            </ul>
        </div>
        <div class="card" id="productListTable">

            <div class="card-body w-full">
                <div class="overflow-x-auto">

                    <div class="card">
                        <div class="card-body">
                            <h6 class="mb-4 text-15">{{ translate(' Profile Attributes') }}</h6>
                            <div class="gap-4 md:flex">
                                <ul class="flex flex-col w-full mb-4 text-sm font-medium text-center md:w-36 shrink-0 nav-tabs md:mb-0">
                                    @foreach ($attributes as $attribute)
                                        <li class="group @if ($loop->first) active @endif">
                                            <a href="javascript:void(0);" data-tab-toggle data-target="{{ $attribute->attribute_name }}" class="inline-block text-start px-2 my-2 w-full py-1 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]">
                                                {{ $attribute->attribute_name }}
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>


                                <div class="tab-content w-full">


                                    @foreach($attributes as $attribute)

                                    <form action="{{ route('admin.profile-attributes.store') }}" method="POST">
                                        <input type="hidden" value="{{$attribute->id}}" name="attribute_id" />
                                        @csrf <!-- CSRF protection -->
                                        <div class="block tab-pane {{ $loop->first ? '' : 'hidden' }}" id="{{ $attribute->attribute_name }}">
                                            <div class="card m-5">
                                                <div class="card-header p-2 bg-slate-900">
                                                    <h4 class="text-white">{{ ucfirst($attribute->attribute_name) }}</h4>
                                                </div>
                                                <div class="card-body p-4 bg-black">

                                                    <div class="grid grid-cols-1">
                                                        <div class="grid grid-cols-12 mt-4">
                                                            <div class="col-span-4 mb-5">
                                                                <label for="" class="inline-block text-base font-medium cursor-pointer">{{ translate('Show on profile') }}</label>
                                                            </div>
                                                            <div class="col-span-4 px-5 mb-5">
                                                                <div class="relative inline-block w-10 align-middle transition duration-200 ease-in">
                                                                    <!-- Hidden input for unchecked state -->
                                                                    <input type="hidden" name="showOnProfile" value="0">
                                                                    <!-- Checkbox input for checked state -->
                                                                    <input
                                                                        type="checkbox"
                                                                        name="showOnProfile"
                                                                       id="showOnProfile_{{ $attribute->id }}"
                                                                        value="1"
                                                                        class="absolute block transition duration-300 ease-linear border-2 rounded-full appearance-none cursor-pointer size-5 border-slate-200 dark:border-zink-600 bg-white/80 dark:bg-zink-400 peer/published checked:bg-green-500 dark:checked:bg-green-500 ltr:checked:right-0 rtl:checked:left-0 checked:border-green-100 dark:checked:border-green-900 arrow-none"
                                                                        {{ $attribute->status ? 'checked' : '' }}>
                                                                    <label for="showOnProfile_{{ $attribute->id }}" class="block h-5 overflow-hidden duration-300 ease-linear border rounded-full cursor-pointer cursor-pointertransition border-slate-200 dark:border-zink-500 bg-slate-200 dark:bg-zink-600 peer-checked/published:bg-green-100 peer-checked/published:border-green-100 dark:peer-checked/published:bg-green-900 dark:peer-checked/published:border-green-900"></label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    @php
                                                        $check=count($attribute->metas);
                                                    @endphp
                                                    @if ($check > 0)
                                                        @foreach($attribute->metas as $attribute_data)
                                                            @if ($attribute_data->is_delete !='1')
                                                                <div class="grid grid-cols-1 fields-container" data-attribute-name="{{ $attribute->attribute_name }}">
                                                                    <div class="col-span-1 flex items-center mb-4 single-field template">
                                                                        <input type="text" name="{{ $attribute->id }}[{{ $attribute_data->id }}]" value="{{$attribute_data->name}}" class="form-input grow border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 placeholder:text-slate-400 dark:placeholder:text-zink-200 dark:bg-zink-700" required>
                                                                        <ul class="flex items-center gap-2 text-sm font-normal shrink-0 ml-2">
                                                                            <li class="text-lg text-red-500">
                                                                                @if($permissionForProfileAttributes !== null && $permissionForProfileAttributes->can_delete == '1')
                                                                                    <button type="button" class="delete-btn text-red-500">
                                                                                        <i class="ri-delete-bin-7-line"></i>
                                                                                    </button>
                                                                                @endif
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            @endif
                                                        @endforeach
                                                    @else
                                                    <div class="grid grid-cols-1 fields-container" data-attribute-name="{{ $attribute->attribute_name  }}" data-attribute-id="{{ $attribute->id }}">
                                                        <div class="col-span-1 flex items-center mb-4 single-field template">
                                                            <input type="text" name="{{ $attribute->id }}['new']"  class="form-input grow border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 placeholder:text-slate-400 dark:placeholder:text-zink-200 dark:bg-zink-700">
                                                            <ul class="flex items-center gap-2 text-sm font-normal shrink-0 ml-2">
                                                                <li class="text-lg text-red-500">
                                                                    @if($permissionForProfileAttributes !== null && $permissionForProfileAttributes->can_delete == '1')
                                                                        <button type="button" class="delete-btn text-red-500">
                                                                            <i class="ri-delete-bin-7-line"></i>
                                                                        </button>
                                                                    @endif
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    @endif

                                                    <div class="flex items-center justify-between mt-4">
                                                        @if($permissionForProfileAttributes !== null && $permissionForProfileAttributes->can_create == '1')
                                                            <button type="button" class="text-white btn add-field-btn bg-custom-500 border-custom-500 hover:text-white hover:bg-custom-600 focus:text-white">{{ translate(' Add Field') }}</button>
                                                        @endif
                                                        @if($permissionForProfileAttributes !== null && $permissionForProfileAttributes->can_edit == '1')
                                                            <button type="submit" class="text-white btn bg-custom-500 border-custom-500 hover:text-white hover:bg-custom-600 focus:text-white">{{ translate(' Update') }}</button>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                    @endforeach




                                </div>
                            </div>
                        </div>
                    </div><!--end card-->
                </div>
            </div>
        </div><!--end card-->
    </div>
    <!-- container-fluid -->
</div>
@endsection

@section('scripts')

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    @if(session('success'))
        Swal.fire({
            title: 'Success!',
            text: '{{ session('success') }}',
            icon: 'success',
            confirmButtonColor: '#3085d6',
            confirmButtonText: 'OK'
        });
    @endif
</script>
<script src='{{asset('admin/assets/libs/choices.js/public/assets/scripts/choices.min.js')}}'></script>
<script src="{{asset('admin/assets/libs/@popperjs/core/umd/popper.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/tippy.js/tippy-bundle.umd.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/simplebar/simplebar.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/prismjs/prism.js')}}"></script>
<script src="{{asset('admin/assets/libs/lucide/umd/lucide.js')}}"></script>
<script src="{{asset('admin/assets/js/tailwick.bundle.js')}}"></script>
<!-- list js-->
<script src="{{asset('admin/assets/libs/list.js/list.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/list.pagination.js/list.pagination.min.js')}}"></script>

<script src="{{asset('admin/assets/js/pages/apps-ecommerce-product.init.js')}}"></script>

<!-- App js -->
<script src="{{asset('admin/assets/js/app.js')}}"></script>
@endsection

@section('header-between')
<script src="{{asset('admin/assets/libs/@popperjs/core/umd/popper.min.js')}}"></script>
<script src="{{asset('admin/assets/js/common.js')}}"></script>




<script>
document.addEventListener('DOMContentLoaded', function () {
    // Select all Add Field buttons
    const addFieldBtns = document.querySelectorAll('.add-field-btn');

    // Loop through all Add Field buttons to add click event listener
    addFieldBtns.forEach(btn => {
        btn.addEventListener('click', function () {
            // Find the closest card body containing the fields
            const cardBody = btn.closest('.card-body');

            // Find the container where the fields should be added
            const fieldsContainer = cardBody.querySelector('.fields-container');

            // Clone the template for a new field
            const template = cardBody.querySelector('.template');
            const newField = template.cloneNode(true);

            // Ensure the new field is displayed and does not have the 'template' class
            newField.style.display = 'flex';
            newField.classList.remove('template'); // Remove template class from the new row

            // Clear the input value in the cloned field
            const inputField = newField.querySelector('input[type="text"]');
            inputField.value = ''; // Reset value to empty

            // Set a unique name for the new field
            const attributeId = fieldsContainer.dataset.attributeId; // Retrieve the attribute ID from the container
            const newIndex = Date.now(); // Use timestamp for unique index
            inputField.setAttribute('name', `${attributeId}[${newIndex}]`);

            // Insert the new field before the Add Field button's container
            fieldsContainer.parentNode.insertBefore(newField, btn.closest('.flex.items-center.justify-between'));
        });
    });

    // Handle deletion of rows dynamically
    document.addEventListener('click', function (event) {
        if (event.target.closest('.delete-btn')) {
            const rows = document.querySelectorAll('.single-field');

            // Only proceed if there's more than one row
            if (rows.length > 1) {
                // Confirm deletion with SweetAlert2
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Yes, delete it!',
                    cancelButtonText: 'Cancel'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Add a slight delay for visual effect before removing the row
                        setTimeout(() => {
                            event.target.closest('.single-field').remove();
                        }, 300); // 300ms delay for fade-out effect
                    }
                });
            }
        }
    });
});

</script>





<script>
    document.addEventListener('DOMContentLoaded', function () {
    const tabs = document.querySelectorAll('[data-tab-toggle]');
    const tabPanes = document.querySelectorAll('.tab-pane');

    tabs.forEach(tab => {
        tab.addEventListener('click', function () {
            const targetId = tab.getAttribute('data-target');

            // Hide all tab panes
            tabPanes.forEach(pane => {
                pane.classList.add('hidden');
            });

            // Show the selected tab pane
            const activePane = document.getElementById(targetId);
            if (activePane) {
                activePane.classList.remove('hidden');
            }

            // Update active class on tabs
            tabs.forEach(t => t.parentElement.classList.remove('active'));
            tab.parentElement.classList.add('active');
        });
    });
});

</script>




@endsection