@extends('marketer.layouts.index', ['without_card' => true])

@section('content')
    <x-dashboard.form.form :action="route('marketer.marketers.store')">
        <div class="col-12">
            <h4 class="mb-3">@lang('global.general_information')</h4>
        </div>

        <div class="col-12">
            <div class="card text-left">
                <div class="card-body">
                    <div class="row">
                        <x-dashboard.form.select name="is_active" :boolean="true" container-classes="col-12" />
                        <x-dashboard.form.input name="name" />
                        <x-dashboard.form.input name="username" />
                        <x-dashboard.form.input name="email" type="email" />
                        <x-dashboard.form.input name="phone" class="intl-tel-input" />
                        <x-dashboard.form.input name="password" type="password" />
                        <x-dashboard.form.input name="password_confirmation" type="password" />
                        <x-dashboard.form.select name="super_admin" :boolean="true" />
                        <x-dashboard.form.file name="avatar" :required="false" />
                        <x-dashboard.form.input name="code" :required="false" />
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12">
            <h4 class="my-3">@lang('global.qr_design')</h4>
        </div>

        <div class="col-12">
            <div class="card text-left">
                <div class="card-body">
                    <div class="row">
                        <x-dashboard.form.input name="size" type='number' :value="250" />
                        <x-dashboard.form.select name="style" :data-array="['square', 'dot', 'round']" :name-fn="fn($style) => __('global.qr_styles.' . $style)" :ajax="false" />
                        <x-dashboard.form.select name="eye" :data-array="['square', 'circle']" :name-fn="fn($eye) => __('global.qr_eyes.' . $eye)" :ajax="false" />
                        <x-dashboard.form.file name="logo" :required="false" />
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12">
            <h4 class="my-3">@lang('global.link_information')</h4>
        </div>

        <div class="col-12">
            <div class="card text-left">
                <div class="card-body">
                    <div class="row">
                        <x-dashboard.form.select name="link_type" id="marketerlinkType" :data-array="['link', 'store']" :name-fn="fn($type) => __('global.marketer_types.' . $type)" :ajax="false" />

                        {{-- URL --}}
                        <x-dashboard.form.input name="link" type='url' :required="false" />

                        {{-- Store --}}
                        <x-dashboard.form.select class="ajaxSelectMalls" name="mall" :required="false" :with-all="true" />
                        <x-dashboard.form.select class="ajaxSelectBranches" name="branch" :required="false" :with-all="true" />
                        <x-dashboard.form.select class="ajaxSelectStores" name="store" data-type="stores" data-with-spas-charities="1" :required="false" :with-all="true" />
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12">
            <h4 class="my-3">@lang('global.financial_details')</h4>
        </div>

        <div class="col-12">
            <div class="card text-left">
                <div class="card-body">
                    <div class="row">
                        <x-dashboard.form.select name="commission_type" id="marketercommissionType" :data-array="['percentage', 'fixed_amount']" :name-fn="fn($type) => __('global.commission_types.' . $type)" :ajax="false" />

                        <x-dashboard.form.input name="commission_percentage" type='number' min="1" max="99" :required="false" />
                        <x-dashboard.form.input name="commission_fixed_amount" type='number' min="1" :required="false" />
                    </div>
                </div>
            </div>
        </div>

        <x-dashboard.form.button />
    </x-dashboard.form.form>
@endsection