@extends('layouts.app')
@section('title', __( 'lang_v1.customer_groups' ))

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
            <li class="breadcrumb-item text-sm">
              <a class="text-white opacity-5" href="{{ action([\App\Http\Controllers\ContactController::class, 'index'], ['type' => 'customer'])}}">
                <i class="fa fas fa-address-book text-sm-i opacity-10"></i> @lang('contact.contacts')
              </a>
            </li>
            <li class="breadcrumb-item text-sm">
                <a class="opacity-7 text-white" href="javascript:;">@lang( 'lang_v1.customer_groups' )</a>
            </li>
            <li class="breadcrumb-item text-sm text-white" aria-current="page">
                @lang( 'lang_v1.all_your_customer_groups' )
            </li>
          </ol>
    </nav>
</section>

<!-- Main content -->
<section class="content">
    <div class="pad-15"> 
        @component('components.widget', ['class' => 'box-primary', 'icon' => 'fa fa-users text-primary', 'title' => __( 'lang_v1.all_your_customer_groups' )])
        <hr class="line-light">
            @can('customer.create')
                @slot('tool')
                    <div class="box-tools mt-50">
                        <button type="button" class="btn bg-gradient-add white btn-ht-lg-add pull-right btn-modal" data-toggle="tooltip" title="@lang('messages.add')" 
                            data-href="{{action([\App\Http\Controllers\CustomerGroupController::class, 'create'])}}" 
                            data-container=".customer_groups_modal">
                            <i class="fa fa-plus fa-lg"></i> </button>
                    </div>
                @endslot
            @endcan
            @can('customer.view')
            <div class="card">
                <div class="table-responsive">
                    <table class="table align-items-center mb-0 full-width" id="customer_groups_table">
                        <thead class="thead-light">
                            <tr>
                                <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang( 'lang_v1.customer_group_name' )</th>
                                <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang( 'lang_v1.calculation_percentage' )</th>
                                <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang( 'lang_v1.selling_price_group' )</th>
                                <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang( 'messages.action' )</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
            @endcan
        @endcomponent
    </div>
    <div class="modal fade customer_groups_modal" tabindex="-1" role="dialog" 
    	aria-labelledby="gridSystemModalLabel">
    </div>

</section>
<!-- /.content -->
@stop
@section('javascript')

<script type="text/javascript">
    $(document).on('change', '#price_calculation_type', function () {
        var price_calculation_type = $(this).val();

        if (price_calculation_type == 'percentage') {
            $('.percentage-field').removeClass('hide');
            $('.selling_price_group-field').addClass('hide');
        } else {
            $('.percentage-field').addClass('hide');
            $('.selling_price_group-field').removeClass('hide');
        }   
    })
</script>
@endsection