@extends('companyuser::layouts.master')
@section('title',__('products::product.Product List'))

@section('extra_styles')
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/filter.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/style-svgFont.css') }}">
<script src="{{ asset('/js/app.js') }}" defer></script>
<style>
    #app> .app-content .content-body > section .headTitle + div {
    width: auto;
    padding-bottom: 0;
}
.select2{
width: 100% !important;
}
th:nth-of-type(2),td:nth-of-type(2){
    white-space: normal !important;
    word-break: break-word!important;
    max-width: 200px;

}

.select2-container--default .select2-selection--multiple {
    height: 35px !important;
    max-height: 200px;
    overflow-y: auto;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color:#11B99F!important;
    border-color: #11B99F !important;
    color: #fff !important;
    font-weight: 500;
    font-size: 14px;
    border-radius: 3px;
    margin-top: 4px;
}

div.dataTables_wrapper table tr> td:nth-of-type(2),
div.dataTables_wrapper table tr> th:nth-of-type(2){
    white-space: normal !important;
    word-break: break-word!important;
    max-width: 200px;
}
</style>
@if(app()->getlocale() == 'en')
<style>
    div.dataTables_filter{
        display: inline-block;
        width: 50%;
        vertical-align: middle;
        text-align: right;
    }
    #products_table_filter{
        width: 100%;
    }
</style>
@endif
@endsection
@section('extra-script')
<script src="{{ asset('assets/js/plugins/range/range.js') }}" defer></script>
@endsection
@section('breadcrumb')

<div class="row breadcrumbs-top">
    <div class="breadcrumb-wrapper col-xs-12">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a>{{ __('products::product.Products') }}</a></li>
            <li class="breadcrumb-item active"><a href="#">{{ __('products::product.Product List') }}</a></li>
        </ol>
    </div>
</div>
@endsection
@section('content')
<section id="productListSection">
    <div class="container-fluid">
        <div class="headBtns mb-2 mx-1 fixed-btns" style="padding-bottom: 10px;">
            @can('products.products.create')
            <div class="btn-group product-list pull-right">
                <a type="button" data-toggle="dropdown" aria-haspopup="true" class="bg-transparent" style="font-size: inherit; border:none;" aria-expanded="false" title="{{ __('Add')}}">
                    <span class="icon-Add action-icon"></span>
                </a>
                <div class="dropdown-menu" id="saveAndCreate">
                    <a class="dropdown-item" href="{{ url('/products/products/create?type='.\Modules\Products\Models\Product::TYPE_PRODUCT) }}">{{ __('products::product.a Product') }}</a>
                    <a class="dropdown-item" href="{{ url('/products/products/create?type='.\Modules\Products\Models\Product::TYPE_SERVICE) }}">{{ __('products::product.Service') }}</a>
                    <a class="dropdown-item" href="{{ url('/products/products/create?type='.\Modules\Products\Models\Product::TYPE_EXPENSE) }}">{{ __('products::product.Expense') }}</a>
                    <a class="dropdown-item" href="{{ url('/products/products/create?type='.\Modules\Products\Models\Product::TYPE_RECIPE) }}">{{ __('products::product.Recipe') }}</a>
                </div>
            </div>
            <div class="btn-group product-list pull-right">
                <a type="button" data-toggle="dropdown" class="bg-transparent pull-left" style="font-size: inherit; border:none;" aria-haspopup="true" title="{{ __('Import')}}" aria-expanded="false">
                    <span class="icon-Import-New action-icon rot"></span>
                </a>
                <div class="dropdown-menu" id="saveAndCreate">
                    <a class="dropdown-item" href="{{ url('/products/products/import?type='.\Modules\Products\Models\Product::TYPE_PRODUCT) }}">{{ __('products::product.a Product') }}</a>
                    <a class="dropdown-item" href="{{ url('/products/products/import?type='.\Modules\Products\Models\Product::TYPE_SERVICE) }}">{{ __('products::product.Service') }}</a>
                    <a class="dropdown-item" href="{{ url('/products/products/import?type='.\Modules\Products\Models\Product::TYPE_EXPENSE) }}">{{ __('products::product.Expense') }}</a>
                </div>
            </div>

            @endcan
            @can('products.products.export')
            <div class="mb-1">
                <a href="{{ route('company.products.export-excel',['subdomain' => $subdomain]) }}" class="pull-left" title="@lang('reports::reports.download_excel')">
                    <span class="icon-Excel action-icon"></span>
                </a>
                <a href="{{ route('company.products.export-pdf',['subdomain' => $subdomain]) }}" class="pull-left" title="@lang('reports::reports.Download_Pdf')">
                    <span class="icon-Pdf action-icon"></span>
                </a>
                <a href="{{route('company.products.print-products-list', ['subdomain' => $subdomain])}}" class="pull-left" target="_blank" title="@lang('Print')">
                    <span class="icon-Print action-icon"></span>
                </a>
            </div>
            @endcan
        </div>
        <div class="col-md-4 headTitle">
            <h3 class="py-half">{{ __('products::product.Product List') }}</h3>
        </div>
        @include('superadmin::errors.lists')
        @can('products.products.view')
        <div class="row mt-1">
            <div class="col-md-12">
                <button class="btn btn-primary w-100 filterbtn" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                    <div class="d-flex justify-content-between">
                        <span>{{ __('Filter') }} </span><i class="fa fa-angle-down"></i>
                    </div>
                </button>
            </div>
        </div>
        <div class="collapse filter-section-collapse" id="collapseExample">
            <form action="{{ route('company.products.index', ['subdomain' => $subdomain]) }}" method="GET" class="form form-horizontal striped-rows form-bordered dev-form-validate" novalidate>
                <div class="card card-body mb-0">
                    <div class="row  mt-1">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <div class="row mb-2">
                                    <div class="col-md-12">
                                        <label for="category_id">{{ __('products::product.Category') }}</label>
                                    </div>
                                    <div class="col-md-12">
                                        <select name="category_id" id="category_id" class="w-100 py-1 form-control select2-tag h-45">
                                            <option value="">@lang('products::product.all')</option>
                                            @forelse($categories as $key => $category)
                                                <option @if(request()->get('category_id') == $key) selected @endif value="{{ $key }}">{{ $category }}</option>
                                            @empty
                                            @endforelse
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row mb-2">
                                    <div class="col-md-12">
                                        <label for="type">{{ __('products::product.Type') }}</label>
                                    </div>
                                    <div class="col-md-12">
                                        <select name="type" id="type" class="w-100 py-1 form-control select2-tag h-45">
                                            <option value="">@lang('products::product.all')</option>
                                            @forelse($types as $key => $type)
                                                <option @if(request()->get('type') == $key) selected @endif value="{{ $key }}">{{ $type }}</option>
                                            @empty
                                            @endforelse
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <div class="row mb-2">
                                    <div class="col-md-12">
                                        <label for="warehouse_id">{{ __('products::product.warehouse') }}</label>
                                    </div>
                                    <div class="col-md-12">
                                        {{-- <select name="warehouse_id[]" id="warehouse_id" class="form-control h-45 select2-tag" multiple>
                                            <option value="">@lang('products::product.all')</option>
                                            @forelse($warehouses as $warehouse)
                                                <option value="{{ $warehouse->id }}"
                                                    @if(is_array(request()->get('warehouse_id')) && in_array($warehouse->id, request()->get('warehouse_id')))
                                                        selected
                                                    @endif
                                                >
                                                    {{ $warehouse->title }}
                                                </option>
                                            @empty
                                            @endforelse
                                        </select> --}}
                                        <div id="warehouse-dropdown-vue">
                                             <warehouses-dropdown-component
                                                :multi-select="true"
                                                :selected="{{ json_encode(
                                                    collect(request()->get('warehouse_id', []))
                                                        ->map(function($id) use ($warehouses) {
                                                            $warehouse = $warehouses->firstWhere('id', $id);
                                                            return $warehouse ? [
                                                                'id' => $warehouse->id,
                                                                'title_ar' => $warehouse->title_ar,
                                                                'title_en' => $warehouse->title_en
                                                            ] : $id;
                                                        })
                                                        ->toArray()
                                                ) }}"
                                                input-name="warehouse_id"
                                                :display-key="'{{ app()->getLocale() === 'ar' ? 'title_ar' : 'title_en' }}'"
                                                value-key="id"
                                                :lang="'{{ app()->getLocale() }}'"
                                                :translations="{
                                                    placeholder: '{{ __('products::product.all') }}',
                                                    searchPlaceholder: '{{ __('products::product.search_warehouse') }}',
                                                    noResultsText: '{{ __('products::product.no_warehouses_found') }}',
                                                    loadMoreHint: '{{ __('products::product.load_more_hint') }}',
                                                    createNewText: '{{ __('products::product.add_new_warehouse') }}',
                                                }"
                                                class="form-control-vue w-100"
                                              ></warehouses-dropdown-component>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row mb-2">
                                    <div class="col-md-12">
                                        <label for="tax_id">{{ __('products::product.Tax rate') }}</label>
                                    </div>
                                    <div class="col-md-12">
                                        <tax-dropdown-component 
                                            :selected="{{ json_encode(\Modules\Settings\Models\Tax::getForDropdown(request('tax_id'), ['id', 'name'])) }}"
                                            :lang="'{{ app()->getLocale() }}'"
                                            :multi-select="false"
                                            input-name="tax_id"
                                            :translations="{
                                                placeholder: '{{ __('products::product.all') }}',
                                                searchPlaceholder: '{{ __('settings::tax.search_taxes') }}',
                                                noResultsText: '{{ __('settings::tax.no_taxes_found') }}',
                                                loadMoreHint: '{{ __('settings::tax.load_more_hint') }}',
                                            }"
                                            class="w-100"
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text-left mt-2">
                        <button type="submit" class="btn btn-info mr-1 mb-1 p-5">
                            <img src="{{asset('assets/images/Done.png') }}" alt="done" width="35px">
                        </button>
                        <button type="button" class='btn btn-warning mb-1 p-5' id="reset">
                            <span class="icon-Delete f-32"></span>
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <div class="row">
            @if(!$unitsCount || !$categoriesCount)
            <div class="col-md-12  col-xs-12 text-center">
                <div class="alert alert-white settings-alert">
                    @lang('superadmin::Dashboard.Please set your ') &nbsp;
                    @if(!$unitsCount)
                    <a href="{{url('/products/units')}}">
                        @lang('products::product.Units')</a>
                    @endif
                    &nbsp;
                    @if(!$categoriesCount)
                    {{!$unitsCount ? ',' : ''}} <a href="{{url('/products/categories')}}">
                        @lang('products::product.Categories') </a>
                    @endif
                    &nbsp;
                    @lang('superadmin::Dashboard.to start product')
                </div>
            </div>
            @endif
        </div>
        <div>
            <section id="configuration">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="card ">
                            <div class="card-body collapse in" >
                                <table id="products_table" class="table table-striped" style="width:100%;display: inline-table;border-collapse: collapse !important;">
                                    <thead>
                                        <tr>
                                            <th>{{ __('products::product.Id') }}</th>
                                            <th id="name">{{ __('products::product.List Name') }}</th>
                                            <th>{{ __('products::product.warehouse') }}</th>
                                            <th>{{ __('products::product.Category') }}</th>
                                            <th>{{ __('products::product.Type') }}</th>
                                            <th>{{ __('products::product.QTY') }}</th>
                                            <th>{{ __('products::product.Average Buying Price') }}</th>
                                            <th>{{ __('products::product.Average Selling Price') }}</th>
                                            <th>{{ __('products::product.Tax rate') }}</th>
                                            <th>{{ __('products::product.Average Cost') }}</th>
                                            <th>{{ __('products::product.Total Cost') }}</th>
                                            <th>{{ __('Actions') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
    @endcan
    </div>
</section>
<br>


</div>

{{---------------- popup fo deleted product -------------------------------}}
@can('products.products.delete')
<div class="modal fade" id="favoritesModal" tabindex="-1" role="dialog" aria-labelledby="favoritesModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="favoritesModalLabel">@lang('products::product.delete_confirmation_title')</h4>
            </div>
            <div class="modal-body">
                <p style="color: rgb(228, 0, 0)">@lang('products::product.delete_confirmation_message')</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default mx-1" data-dismiss="modal">@lang('products::product.cancel')</button>
                <span class="pull-right">
                    <form id="delete-form" action="" method="POST" style="display: none;">
                        @csrf
                        @method('delete')
                    </form>
                    <button class="btn btn-primary dev-detele" id="delete-yes">@lang('products::product.delete')</button>
                </span>
            </div>
        </div>
    </div>
</div>
@endcan


@endsection

@section('extra_scripts')
<script>
    const appLang = "{{ app()->getLocale() }}";
    gtag('event', 'web_products_and_services_products_list');
    console.log('web_products_and_services_products_list event');
</script>
<script src="{{ asset('assets/js/plugins/range/range.js') }}" defer></script>

<script>
    window.addEventListener('DOMContentLoaded', function() {
        (function($) {
            var url = '';
            const deleteMsgProduct = "@lang('products::product.delete_confirmation_message_product')";
            const deleteMsgGeneric = "@lang('products::product.delete_confirmation_message')";

            $(document).on('touchstart click', '.delete-product', function() {
                url = $(this).attr('data-url');

                const type = $(this).data('type');
                let message = '';
                
                if (type === 'product') {
                    message = deleteMsgProduct;
                } else {
                    // Replace :field with the appropriate product type translation
                    let fieldTranslation = '';
                    switch(type) {
                        case 'service':
                            fieldTranslation = "@lang('products::product.Service')";
                            break;
                        case 'expense':
                            fieldTranslation = "@lang('products::product.Expense')";
                            break;
                        case 'recipe':
                            fieldTranslation = "@lang('products::product.Recipe')";
                            break;
                        default:
                            fieldTranslation = "@lang('products::product.Product')";
                            break;
                    }
                    message = deleteMsgGeneric.replace(':field', fieldTranslation);
                }

                $('#favoritesModal .modal-body p').text(message);
            });

            $(document).on('touchstart click', '#delete-yes', function() {
                $("#delete-form").attr("action", url);
                $(this).prop('disabled', true);
                $("#delete-form").submit();
            });

            if (document.location.search.length) {
                // $('#collapseExample').toggleClass("collapse in");
            }
            let table = $('#products_table').DataTable({
                processing: true,
                serverSide: true,
                search: true,
                ajax: {
                    url: "{{route('company.products.index',$subdomain)}}",
                    data: