@extends('layouts.app')

@section('content')
    <div class="page-wrapper">
        <div class="row page-titles">
            <div class="col-md-5 align-self-center">
                <h3 class="text-themecolor">{{ trans('lang.commission_rates') ?? 'Commission Rates' }}</h3>
            </div>
            <div class="col-md-7 align-self-center">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('/dashboard') }}">{{ trans('lang.dashboard') }}</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('super-admin-commissions.index') }}">
                            {{ trans('lang.commission_rates') ?? 'Commission Rates' }}</a></li>
                    <li class="breadcrumb-item active">{{ trans('lang.create') }}</li>
                </ol>
            </div>
        </div>

        <div class="container-fluid">
            <div class="cat-edite-page max-width-box">
                <form action="{{ route('super-admin-commissions.store') }}" method="POST">
                    @csrf
                    <div class="card pb-4">
                        <div class="card-header">
                            <ul class="nav nav-tabs align-items-end card-header-tabs w-100">
                                <li role="presentation" class="nav-item">
                                    <a href="#commission_information" aria-controls="description" role="tab"
                                        data-toggle="tab" class="nav-link active">
                                        {{ trans('lang.commission_information') ?? 'Commission Information' }}
                                    </a>
                                </li>
                            </ul>
                        </div>

                        <div class="card-body">
                            @include('alerts.error_messages')
                            <div class="row restaurant_payout_create" role="tabpanel">
                                <div class="restaurant_payout_create-inner tab-content">
                                    <div role="tabpanel" class="tab-pane active" id="commission_information">
                                        <fieldset>
                                            <legend>{{ trans('lang.commission_information') ?? 'Commission Information' }}
                                            </legend>

                                            <div class="form-group row width-100">
                                                <label class="col-3 control-label">
                                                    {{ trans('lang.commission_target_type') ?? 'Target Type' }}
                                                </label>
                                                <div class="col-7">
                                                    <select name="target_type" id="target_type" class="form-control">
                                                        <option value="vendor"
                                                            {{ old('target_type') === 'vendor' ? 'selected' : '' }}>
                                                            {{ trans('lang.owner_vendor') ?? 'Vendor' }}
                                                        </option>
                                                        <option value="store"
                                                            {{ old('target_type') === 'store' ? 'selected' : '' }}>
                                                            {{ trans('lang.stores_plural') ?? 'Store' }}
                                                        </option>
                                                        <option value="category"
                                                            {{ old('target_type') === 'category' ? 'selected' : '' }}>
                                                            {{ trans('lang.category_plural') ?? 'Category' }}
                                                        </option>
                                                        <option value="brand"
                                                            {{ old('target_type') === 'brand' ? 'selected' : '' }}>
                                                            {{ trans('lang.brand_plural') ?? 'Brand' }}
                                                        </option>
                                                        <option value="product"
                                                            {{ old('target_type') === 'product' ? 'selected' : '' }}>
                                                            {{ trans('lang.product_plural') ?? 'Product' }}
                                                        </option>
                                                    </select>
                                                    <div class="form-text text-muted">
                                                        This page is for setting commission rates per target type. For a specific item, use that item's edit page.
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="form-group row width-100">
                                                <label class="col-3 control-label">
                                                    {{ trans('lang.commission_type') ?? 'Commission Type' }}
                                                </label>
                                                <div class="col-7">
                                                    <select name="commission_type" id="commission_type"
                                                        class="form-control">
                                                        <option value="fixed"
                                                            {{ old('commission_type', 'fixed') === 'fixed' ? 'selected' : '' }}>
                                                            {{ trans('lang.fix_commission') ?? 'Fixed' }}
                                                        </option>
                                                        <option value="range"
                                                            {{ old('commission_type') === 'range' ? 'selected' : '' }}>
                                                            {{ trans('lang.range') ?? 'Range' }}
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div id="fixed_rate_group" class="form-group row width-100">
                                                <label class="col-3 control-label">
                                                    {{ trans('lang.commission_rate') ?? 'Commission Rate' }}
                                                </label>
                                                <div class="col-7">
                                                    <input type="number" step="0.01" min="0" class="form-control"
                                                        name="commission_percentage"
                                                        value="{{ old('commission_percentage', 2) }}">
                                                </div>
                                            </div>

                                            <div id="range_group" class="form-group row width-100">
                                                <label class="col-3 control-label">
                                                    {{ trans('lang.commission_range') ?? 'Commission Range' }}
                                                </label>
                                                <div class="col-7">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <input type="number" step="0.01" min="0"
                                                                class="form-control" name="min_commission"
                                                                placeholder="Min" value="{{ old('min_commission', 2) }}">
                                                        </div>
                                                        <div class="col-md-6">
                                                            <input type="number" step="0.01" min="0"
                                                                class="form-control" name="max_commission"
                                                                placeholder="Max" value="{{ old('max_commission', 5) }}">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="form-group row width-100">
                                                <label
                                                    class="col-3 control-label">{{ trans('lang.status') ?? 'Status' }}</label>
                                                <div class="col-7">
                                                    <input type="checkbox" class="is_active" name="is_active"
                                                        value="1" id="is_active"
                                                        {{ old('is_active') ? 'checked' : '' }}>
                                                    <label class="col-3 control-label"
                                                        for="is_active">{{ trans('lang.is_active') }}</label>
                                                </div>
                                            </div>

                                        </fieldset>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-footer text-center">
                            <button type="submit" class="btn btn-primary"><i class="fa fa-save"></i>
                                {{ trans('lang.save') }}</button>
                            <a href="{{ route('super-admin-commissions.index') }}" class="btn btn-default">
                                <i class="fa fa-undo"></i> {{ trans('lang.cancel') ?? 'Cancel' }}
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        function toggleCommissionFields() {
            var type = $('#commission_type').val();
            if (type === 'range') {
                $('#range_group').show();
                $('#fixed_rate_group').hide();
            } else {
                $('#range_group').hide();
                $('#fixed_rate_group').show();
            }
        }

        $(function() {
            toggleCommissionFields();
            $('#commission_type').on('change', toggleCommissionFields);
        });
    </script>
@endsection