@extends('backend.dashboard.layout.master')

@section('content')

<div class="app-main flex-column flex-row-fluid" id="kt_app_main">
    <!--begin::Content wrapper-->
    <div class="d-flex flex-column flex-column-fluid">
        <!--begin::Toolbar-->
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <!--begin::Toolbar container-->
            <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
                <!--begin::Page title-->
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                    <!--begin::Title-->
                    <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">{{ translate('Product list') }}</h1>
                    <!--end::Title-->
                    <!--begin::Breadcrumb-->
                    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
                            <a href="index.html" class="text-muted text-hover-primary">{{ translate('Home') }}</a>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-500 w-5px h-2px"></span>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">{{ translate('Product') }}</li>
                        <!--end::Item-->
                    </ul>
                    <!--end::Breadcrumb-->
                </div>
                <!--end::Page title-->
                <!--begin::Actions-->
                <div class="d-flex align-items-center gap-2 gap-lg-3">
                    <!--begin::Filter menu-->
                    <div class="m-0">
                        <!--begin::Menu 1-->
                        <div class="menu menu-sub menu-sub-dropdown w-250px w-md-300px" data-kt-menu="true" id="kt_menu_667817054d8ea">
                            <!--begin::Header-->
                            <div class="px-7 py-5">
                                <div class="fs-5 text-gray-900 fw-bold">{{ translate('Filter Options') }}</div>
                            </div>
                            <!--end::Header-->
                            <!--begin::Menu separator-->
                            <!--end::Menu separator-->
                            <!--begin::Form-->
                            <div class="px-7 py-5">
                                <!--begin::Input group-->
                                <div class="mb-10">
                                    <!--begin::Label-->
                                    <label class="form-label fw-semibold">{{ translate('Status:') }}</label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <div>
                                        <select class="form-select form-select-solid" multiple="multiple" data-kt-select2="true" data-close-on-select="false" data-placeholder="Select option" data-dropdown-parent="#kt_menu_667817054d8ea" data-allow-clear="true">
                                            <option></option>
                                            <option value="1">{{ translate('Approved') }}</option>
                                            <option value="2">{{ translate('Pending') }}</option>
                                            <option value="2">{{ translate('In Process') }}</option>
                                            <option value="2">{{ translate('Rejected') }}</option>
                                        </select>
                                    </div>
                                    <!--end::Input-->
                                </div>
                                <!--end::Input group-->
                                <!--begin::Input group-->
                                <div class="mb-10">
                                    <!--begin::Label-->
                                    <label class="form-label fw-semibold">{{ translate('Member Type:') }}</label>
                                    <!--end::Label-->
                                    <!--begin::Options-->
                                    <div class="d-flex">
                                        <!--begin::Options-->
                                        <label class="form-check form-check-sm form-check-custom form-check-solid me-5">
                                            <input class="form-check-input" type="checkbox" value="1" />
                                            <span class="form-check-label">{{ translate('Author') }}</span>
                                        </label>
                                        <!--end::Options-->
                                        <!--begin::Options-->
                                        <label class="form-check form-check-sm form-check-custom form-check-solid">
                                            <input class="form-check-input" type="checkbox" value="2" checked="checked" />
                                            <span class="form-check-label">{{ translate('Customer') }}</span>
                                        </label>
                                        <!--end::Options-->
                                    </div>
                                    <!--end::Options-->
                                </div>

                                <!--end::Input group-->
                                <!--begin::Input group-->
                                <div class="mb-10">
                                    <!--begin::Label-->
                                    <label class="form-label fw-semibold">{{ translate('Notifications:') }}</label>
                                    <!--end::Label-->
                                    <!--begin::Switch-->
                                    <div class="form-check form-switch form-switch-sm form-check-custom form-check-solid">
                                        <input class="form-check-input" type="checkbox" value="" name="notifications" checked="checked" />
                                        <label class="form-check-label">{{ translate('Enabled') }}</label>
                                    </div>
                                    <!--end::Switch-->
                                </div>
                                <!--end::Input group-->
                                <!--begin::Actions-->
                                <div class="d-flex justify-content-end">
                                    <button type="reset" class="btn btn-sm btn-light btn-active-light-primary me-2" data-kt-menu-dismiss="true">{{ translate('Reset') }}</button>
                                    <button type="submit" class="btn btn-sm btn-primary" data-kt-menu-dismiss="true">{{ translate('Apply') }}</button>
                                </div>
                                <!--end::Actions-->
                            </div>
                            <!--end::Form-->
                        </div>
                        <!--end::Menu 1-->
                    </div>
                    <!--end::Filter menu-->
                    <!--begin::Secondary button-->
                    <!--end::Secondary button-->
                    <!--begin::Primary button-->
                    <!--end::Primary button-->
                </div>
                <!--end::Actions-->
            </div>
            <!--end::Toolbar container-->
        </div>
        <!--end::Toolbar-->
        <!--begin::Content-->
        <div id="kt_app_content" class="app-content flex-column-fluid">
            <!--begin::Content container-->
            <div id="kt_app_content_container" class="app-container container-xxl">
                <!--begin::Card-->
                <div class="card">
                    <!--begin::Card header-->
                    <div class="card-header border-0 pt-6">
                        <!--begin::Card title-->
                        <div class="card-title">
                            <!--begin::Search-->
                            <div class="d-flex align-items-center position-relative my-1">
                                <i class="ki-duotone ki-magnifier fs-3 position-absolute ms-5">
                                    <span class="path1"></span>
                                    <span class="path2"></span>
                                </i>
                                <input type="text" data-kt-customer-table-filter="search" class="form-control form-control-solid w-250px ps-12" placeholder="Search Companies" />
                            </div>
                            <!--end::Search-->
                        </div>
                        <!--begin::Card title-->
                        <!--begin::Card toolbar-->
                        <div class="card-toolbar">
                            <!--begin::Toolbar-->
                            <div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">
                                <!--begin::Filter-->
                                <!--begin::Menu 1-->
                                <div class="menu menu-sub menu-sub-dropdown w-300px w-md-325px" data-kt-menu="true" id="kt-toolbar-filter">
                                    <!--begin::Header-->
                                    <div class="px-7 py-5">
                                        <div class="fs-4 text-gray-900 fw-bold">{{ translate('Filter Options') }}</div>
                                    </div>
                                    <!--end::Header-->
                                    <!--begin::Separator-->
                                    <div class="separator border-gray-200"></div>
                                    <!--end::Separator-->
                                    <!--begin::Content-->
                                    <div class="px-7 py-5">
                                        <!--begin::Input group-->
                                        <div class="mb-10">
                                            <!--begin::Label-->
                                            <label class="form-label fs-5 fw-semibold mb-3">{{ translate('Month:') }}</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <select class="form-select form-select-solid fw-bold" data-kt-select2="true" data-placeholder="Select option" data-allow-clear="true" data-kt-customer-table-filter="month" data-dropdown-parent="#kt-toolbar-filter">
                                                <option></option>
                                                <option value="aug">{{ translate('August') }}</option>
                                                <option value="sep">{{ translate('September') }}</option>
                                                <option value="oct">{{ translate('October') }}</option>
                                                <option value="nov">{{ translate('November') }}</option>
                                                <option value="dec">{{ translate('December') }}</option>
                                            </select>
                                            <!--end::Input-->
                                        </div>
                                        <!--end::Input group-->

                                        <!--begin::Actions-->
                                        <div class="d-flex justify-content-end">
                                            <button type="reset" class="btn btn-light btn-active-light-primary me-2" data-kt-menu-dismiss="true" data-kt-customer-table-filter="reset">{{ translate('Reset') }}</button>
                                            <button type="submit" class="btn btn-primary" data-kt-menu-dismiss="true" data-kt-customer-table-filter="filter">{{ translate('Apply') }}</button>
                                        </div>
                                        <!--end::Actions-->
                                    </div>
                                    <!--end::Content-->
                                </div>
                                <!--end::Menu 1-->
                                <!--end::Filter-->
                                <!--begin::Add Product-->
                                <a class="btn btn-primary" href="{{ route('Product.create') }}">{{ translate('Add Product') }}</a>
                                <!--end::Add Product-->
                            </div>
                            <!--end::Toolbar-->
                            <!--begin::Group actions-->
                            <div class="d-flex justify-content-end align-items-center d-none" data-kt-customer-table-toolbar="selected">
                                <div class="fw-bold me-5">
                                <span class="me-2" data-kt-customer-table-select="selected_count"></span>{{ translate('Selected') }}</div>
                                <button type="button" class="btn btn-danger" data-kt-customer-table-select="delete_selected">{{ translate('Delete Selected') }}</button>
                            </div>
                            <!--end::Group actions-->
                        </div>
                        <!--end::Card toolbar-->
                    </div>
                    <!--end::Card header-->
                    <!--begin::Card body-->
                    <div class="card-body pt-0">
                        <!--begin::Table-->
                        <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_customers_table">
                            <thead>
                                <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                    <th class="w-10px pe-2">
                                        <div class="form-check form-check-sm form-check-custom form-check-solid me-3"></div>
                                    </th>
                                    <th class="min-w-125px">#</th>
                                    <th class="min-w-125px">{{ translate('Product name') }}</th>
                                    <th class="min-w-125px">{{ translate('Created By') }}</th>
                                    <th class="min-w-125px">{{ translate('Category') }}</th>
                                    <th class="min-w-125px">{{ translate('Price') }}</th>
                                    <th class="min-w-125px">{{ translate('Annual') }}</th>
                                    <th class="min-w-125px">{{ translate('slug') }}</th>
                                    <th class="min-w-125px">{{ translate('Created At') }}</th> <!-- ✅ Added back a column -->
                                    <th class="text-end min-w-70px">{{ translate('Actions') }}</th>
                                </tr>
                            </thead>
                            <tbody class="fw-semibold text-gray-600">
                                @foreach ($product as $item)
                                    <tr>
                                        <!-- Checkbox -->
                                        <td>
                                            <div class="form-check form-check-sm form-check-custom form-check-solid"></div>
                                        </td>

                                        <!-- Logo -->
                                        <td>
                                            <div class="symbol symbol-45px me-1">
                                                <img src="{{ asset($item->image) }}" alt="logo" />
                                            </div>
                                        </td>

                                        <!-- Name -->
                                        <td>
                                            @foreach ($item->product_translates as $item2 )
                                               @if($item2->lang == app()->getLocale())
                                                    {{ $item2->name }}
                                               @endif
                                            @endforeach

                                        </td>

                                        <!-- User Creator -->
                                        <td>
                                            <a href="#" class="text-gray-600 text-hover-primary mb-1">{{ $item->user_creator->name }}</a>
                                        </td>

                                         <!-- Category -->
                                        <td>
                                            @foreach ($item->product_category->category_translates as $item2 )
                                            @if ( $item2->lang == app()->getLocale())
                                              {{ $item2->name }}
                                            @endif
                                            @endforeach
                                        </td>



                                        <!-- Price -->
                                        <td>
                                            <a href="#" class="text-gray-600 text-hover-primary mb-1">{{ $item->price }}</a>
                                        </td>


                                        <!-- Aunnal -->
                                        <td>
                                            <a href="#" class="text-gray-600 text-hover-primary mb-1">
                                                {{ \Illuminate\Support\Str::limit(implode(', ', (array)json_decode($item->annual, true)), 30) }}
                                            </a>
                                        </td>
                                        </td>


                                          <!-- slug -->
                                        <td>
                                                 @foreach ($item->product_translates as $item2 )
                                               @if($item2->lang == app()->getLocale())
                                                    {{ $item2->slug }}
                                               @endif
                                            @endforeach
                                        </td>


                                        <!--created at -->
                                        <td>
                                            <a href="#" class="text-gray-600 text-hover-primary mb-1">{{ $item->created_at->diffForHumans() }}</a>
                                        </td>



                                        <!-- Actions -->
                                        <td class="text-end">
                                            <a href="#" class="btn btn-sm btn-light btn-flex btn-center btn-active-light-primary"
                                                data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                                                {{ translate('Actions') }}
                                                <i class="ki-duotone ki-down fs-5 ms-1"></i>
                                            </a>
                                            <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4"
                                                data-kt-menu="true">
                                                <div class="menu-item px-3">
                                                    <a href="{{ route('Product.edit', $item->id) }}" class="menu-link px-3">{{ translate('Edit') }}</a>
                                                </div>
                                                <div class="menu-item px-3">
                                                    <form action="{{ route('Product.destroy', $item->id) }}" method="POST">
                                                        @method('DELETE')
                                                        @csrf
                                                        <button class="btn menu-link px-3">{{ translate('Delete') }}</button>
                                                    </form>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>





                        <!--end::Table-->
                    </div>
                    @if ($product->hasPages())
                    <ul class="pagination pagination-rounded mb-0">
                        <li class="page-item {{ $product->onFirstPage() ? 'disabled' : '' }}">
                            <a class="page-link" href="{{ $product->previousPageUrl() }}" aria-label="Previous">
                                <span aria-hidden="true">«</span>
                            </a>
                        </li>

                        @foreach ($product->links()->elements as $element)
                        @if (is_array($element))
                        @foreach ($element as $page => $url)
                        <li class="page-item {{ $page == $product->currentPage() ? 'active' : '' }}">
                            <a class="page-link" href="{{ $url }}">{{ $page }}</a>
                        </li>
                        @endforeach
                        @endif
                        @endforeach

                        <li class="page-item {{ !$product->hasMorePages() ? 'disabled' : '' }}">
                            <a class="page-link" href="{{ $product->nextPageUrl() }}" aria-label="Next">
                                <span aria-hidden="true">»</span>
                            </a>
                        </li>
                    </ul>
                    @endif
                    <!--end::Card body-->
                </div>
                <!--end::Card-->
             </div>
            <!--end::Content container-->
        </div>
        <!--end::Content-->
    </div>
    <!--end::Content wrapper-->
</div>

<style>
    .row{
        display: none;
    }
</style>

<script>
  $.fn.dataTable.ext.errMode = 'none';


</script>
@endsection