@extends('admin.layout.master')
@section('title', 'Add Customer')
@section('custom_style')
    <style>
        /* label {
            font-size: 13px
        }
        .table th,
        .table td {
            padding: 0rem;
            padding-right: 0.35rem;
            padding-left: 0.35rem;
        }

        .nav-tabs .nav-link.active,
        .nav-tabs .nav-item.show .nav-link {
            border-top: 1px solid #2c7f6f;
            border-bottom: 1px solid #e2e2e2;
            border-left: 1px solid #2c7f6f;
            border-right: 1px solid #2c7f6f;
            background: none !important;
            color: #2c7f6f;
        }

        .nav-link:hover {
            border-bottom: #2c7f6f !important;
        }

        a.nav-link.active:hover {
            border-bottom: #e2e2e2 !important;
        }

        a.nav-link {
            color: #9e9e9e;
        }

        .nav-tabs {
            border-bottom: 1px solid #2c7f6f;
        }

        .gj-datepicker-bootstrap [role=right-icon] button .gj-icon,
        .gj-datepicker-bootstrap [role=right-icon] button .material-icons {
            top: 4px;
        }
        label {
            white-space: nowrap;
        } */
    </style>
@endsection
@section('content')
    <div class="card sina-card">
        <div class="card-header card-header-s">
            <h4>{{ ucfirst($routeGroup) }} Info</h4>
        </div>
        {{-- @if ($errors->any())
            @foreach ($errors->all() as $error)
                <div style="color:red">{{ $error }}</div>
            @endforeach
        @endif --}}
        <div class="card-body">
            <form action="{{ route('customer.store') }}" method="post">
                @csrf
                <div class="row g-2">
                    <div class="col-md-12">
                        <div class="row gx-lg-3 g-2">
                            <div class="col-xl-3 col-lg-4 col-6">
                                <label>{{__('obs.group_name')}}</label>
                                <div class="input-group flex-nowrap">
                                    <select class="form-select select_2" id="group_id" name="group_id">
                                        <option selected value="">{{__('obs.choose')}}...</option>
                                        @foreach ($groups as $group)
                                            <option value="{{ $group->id }}">{{ $group->name_eng }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <a href="{{ route('group.index', ['idx' => 2]) }}"
                                        class="btn btn-success btn-sm"><i class="fas fa-plus"></i></a>
                                    {{-- <a data-bs-toggle="modal" data-target="#addGroup" class="btn btn-success btn-sm"><i class="fas fa-plus"></i></a> --}}
                                </div>
                            </div>
                            <div class="col-xl-3 col-lg-4 col-6">
                                <label>{{__('obs.code')}} *</label>
                                <input type="text" class="form-control" id="code" name="code" value="{{ $code }}" />
                            </div>
                            <div class="col-xl-3 col-lg-4 col-6">
                                <label>{{__('obs.name')}} *</label>
                                <input type="text" value="{{ old('name_eng') }}" class="form-control"
                                    id="name" name="name_eng" />
                            </div>
                            <div class="col-xl-3 col-lg-4 col-6">
                                <label>{{__('obs.local_name')}}</label>
                                <input type="text" class="form-control" value="{{ old('name_local') }}"
                                    id="localname" name="name_local" />
                            </div>
                            <div class="col-xl-6">
                                <label> {{__('obs.party_type')}}</label>
                                <div class="input-group align-items-center" style="gap: 10px;">
                                    <div class="form-check">
                                        <input class="form-check-input cl-form-check-input" type="radio" name="party_type" id="default" value="2" checked>
                                        <label class="form-check-label" for="default">
                                            {{__('obs.default')}}
                                        </label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input cl-form-check-input" type="radio" name="party_type" id="wv" value="3">
                                        <label class="form-check-label" for="wv">
                                            With {{__('obs.vendor')}}
                                        </label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input cl-form-check-input" type="radio" name="party_type" id="sr_box" value="4" onchange="shopEnable(this)">
                                        <label class="form-check-label" for="sr_box">
                                            {{__('obs.sr')}}
                                        </label>
                                    </div>

                                    <div id="shop_field" style="width: 200px; display: none;">
                                        <select style="width:100%" class="form-select select_2" id="shop" name="shop[]" multiple>
                                            @foreach ($shops as $shop)
                                                <option value="{{ $shop->id }}">
                                                    {{ $shop->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            {{-- <div class="form-group col-md-3">
                                <div class="row">
                                    <input style="max-width: 25px;" type="radio" class="form-control" name="party_type" value="5"/>
                                    <label style="padding-top: 10px; padding-left: 5px;" for="">{{__('obs.shop')}}</label>
                                </div>
                            </div>
                            <div class="form-group col-md-3">
                                <div class="row">
                                    <input style="max-width: 25px;" type="radio" class="form-control" name="party_type" value="6"/>
                                    <label style="padding-top: 10px; padding-left: 5px;" for="">{{__('obs.dealer')}}</label>
                                </div>
                            </div> --}}
                        </div>
                    </div>

                    <div class="col-12 mt-3">
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" role="tab"
                                    aria-controls="home" aria-selected="true">{{__('obs.master_details')}}</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile"
                                    role="tab" aria-controls="profile" aria-selected="false">{{__('obs.other_data')}}</a>
                            </li>
                            @if(warehouse_info()->is_using_vat == 1)
                                <li class="nav-item">
                                    <a class="nav-link" id="vat-tab" data-bs-toggle="tab" data-bs-target="#vat"
                                        role="tab" aria-controls="vat" aria-selected="false">{{__('obs.vat')}}</a>
                                </li>
                            @endif
                            <li class="nav-item">
                                <a class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact"
                                    role="tab" aria-controls="contact" aria-selected="false">{{__('obs.cash_in_bank')}}</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#credentials"
                                    role="tab" aria-controls="contact" aria-selected="false">{{__('obs.credentials')}}</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#cardMember"
                                    role="tab" aria-controls="contact" aria-selected="false">{{__('obs.membership_card')}}</a>
                            </li>
                        </ul>

                        <div class="tab-content pt-3" id="myTabContent">
                            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                <div class="row gx-lg-3 g-2">
                                    <div class="col-xl-3 col-lg-4 col-6">
                                        <label>{{__('obs.cost_center')}}</label>
                                        <div class="input-group flex-nowrap">
                                            <select class="form-select select_2" id="cost_center"
                                                name="cost_center">
                                                <option selected value="0">{{__('obs.choose')}}...</option>
                                                @foreach ($cost_centers as $cost_center)
                                                    <option value="{{ $cost_center->id }}">
                                                        {{ $cost_center->name }}</option>
                                                @endforeach
                                            </select>
                                            <a href="{{ route('costcenter.index') }}" id="basic-addon2" class='btn btn-danger ml-2'>
                                                <i class="fas fa-plus"></i></a>
                                        </div>
                                    </div>
                                    {{-- <div class="col-md-4">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <label>{{__('obs.type')}}</label>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="form-group">
                                                    <div class="input-group">
                                                        <select class="form-select select_2" id="type" name="type">
                                                            <option selected value="0">{{__('obs.choose')}}...</option>
                                                            @foreach ($types as $type)
                                                                <option value="{{ $type->id }}">
                                                                    {{ $type->name_eng }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        <a href="{{ route('type.index') }}" id="basic-addon2"
                                                            class='btn btn-danger ml-2 btn-sm'> <i
                                                                class="fas fa-plus"></i></a>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div> --}}

                                    <div class="col-xl-3 col-lg-4 col-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" onchange="CheckCommission(this)">
                                            <label class="form-check-label" for="flexCheckDefault">
                                                {{__('obs.commission(%)')}}
                                            </label>
                                        </div>
                                        <input type="number" id="Commission" step="0.0001" style="display: none"
                                            class="form-control" name="commission" />
                                    </div>
                                    
                                    <div class="col-xl-3 col-lg-4 col-6">
                                        <label>{{__('obs.commission_type')}}</label>
                                        <div class="input-group">
                                            <select class="form-select select_2" id="commissionType"
                                                name="commission_type">
                                                <option value="1">{{__('obs.fixed')}}</option>
                                                <option value="2">{{__('obs.customized')}}</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-xl-3 col-lg-4 col-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="limit_apply" id="limitapply" onchange="CheckLimitApply(this)">
                                            <label class="form-check-label" for="limitapply">
                                                {{__('obs.limit_apply')}}
                                            </label>
                                        </div>  
                                        <div class="input-group">
                                            <input type="number" id="creditLimitAmount" step=".01" style="display: none" class="form-control"
                                                name="credit_limit_amount" />
                                            <label id="creditLimitAmountlabel" style="display: none"> &nbsp
                                            {{__('obs.credit_limit_amount')}}</label>
                                        </div>
                                    </div>

                                    <div class="col-xl-3 col-lg-4 col-6">
                                        <label>{{__('obs.credit_limit_day')}}</label>
                                        <div class="input-group">
                                            <input type="number" value="{{ old('credit_limit_day') }}"
                                                id="creditLimitDay" class="form-control" name="credit_limit_day" />
                                        </div>
                                    </div>
                                    
                                    <div class="col-xl-3 col-lg-4 col-6">
                                        <label>{{__('obs.other_com._name')}}</label>
                                        <div class="input-group">
                                            <input type="text" value="{{ old('other_commission_title') }}" id="otherCommissionTitle" class="form-control input-sm"
                                                name="other_commission_title" />
                                        </div>
                                    </div>

                                    <div class="col-xl-3 col-lg-4 col-6">
                                        <label>{{__('obs.other_commission')}}</label>
                                        <div class="input-group">
                                            <input type="number" value="0" step=".001" id="otherCommission" class="form-control input-sm"
                                                name="other_commission" />
                                        </div>
                                    </div>

                                    <div class="col-xl-3 col-lg-4 col-6">
                                        <label>{{__('obs.commission_calculation_type')}}</label>
                                        <div class="input-group">
                                            <select type="number" value="{{ old('com_calc_type') }}" id="comCalcType" class="form-select select_2" name="com_calc_type">
                                                <option value="1">+</option>
                                                <option value="0">-</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-xl-3 col-lg-4 col-6">
                                        <label>{{__('obs.private_depot')}}</label>
                                        <div class="input-group">
                                            <select name="depot_id" class="select_2 vendor_live form-control">
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-xl-3 col-lg-4 col-6">
                                        <label>{{__('obs.block_free')}} </label>
                                        <div class="input-group">
                                            <div class="form-check form-check-inline">
                                                <label>
                                                    Yes
                                                    <input class="form-check-input cl-form-check-input" name="block_free"
                                                        id="block_free_yes" type="radio" value="1">
                                                </label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <label>
                                                    No
                                                    <input class="form-check-input cl-form-check-input" checked name="block_free" id="block_free_no"
                                                        type="radio" value="0">
                                                </label>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- starting newly added --}}

                                    <div class="col-xl-3 col-lg-4 col-6">
                                        <label>{{__('obs.storelocation')}}</label>
                                    
                                        <select class="select_2 @error('store_location_ids') is-invalid @enderror form-control" style="width: 100%" name="store_location_ids[]" id="store_location_ids" multiple>
                                            @foreach (adminAsignedWarehouseList() as $wh)
                                                <option value="{{$wh->id}}" @if(current_store()==$wh->id) disabled @endif>{{ $wh->name_eng }}</option>
                                            @endforeach
                                        </select>
                                        @error('store_location_ids')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                        {{-- <div class="form-check form-check-inline">
                                            <label>
                                                Current Store
                                                <input class="form-check-input" checked name="stores"
                                                    id="cstore" type="radio" value="1">
                                            </label>
                                        </div>
                                        <div class="form-check form-check-inline">

                                            <label>
                                                {{__('obs.all')}} {{__('obs.store')}}
                                                <input class="form-check-input" name="stores" id="allstore"
                                                    type="radio" value="2">
                                            </label>
                                        </div> --}}
                                    </div>
                                    
                                    <div class="col-xl-3 col-lg-4 col-6">
                                        <label>{{__('obs.return_percentage')}}</label>
                                        <input type="number" value="0" step=".001" class="form-control" id="return_percentage" name="return_percentage">
                                    </div>

                                    <div class="col-xl-3 col-lg-4 col-6">
                                        <label>{{__('obs.target')}}</label>
                                        <input type="number" step=".001" class="form-control" id="target" name="target">
                                    </div>

                                    <div class="col-xl-3 col-lg-4 col-6">
                                        <label>{{__('obs.line')}}</label>
                                        <select name="line" id="line" class="form-control w-100 select_line">
                                            <option value="1">{{__('obs.a')}}</option>
                                            <option value="2">{{__('obs.b')}}</option>
                                            <option value="3">{{__('obs.both')}}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                                <div class="row row gx-lg-3 g-2">
                                    <div class="col-xl-3 col-md-4 col-6">
                                        <label>{{__('obs.mobile')}}</label>
                                        <input type="number" value="{{ old('mobile') }}" class="form-control" id="mobile" name="mobile" />  
                                    </div>
                                    <div class="col-xl-3 col-lg-4 col-6">
                                        <label>{{__('obs.email')}} *</label>
                                        <input type="email" value="{{ old('email') }}" class="form-control" id="email" name="email" />
                                    </div>
                                    <div class="col-xl-3 col-lg-4 col-6">
                                        <label>{{__('obs.address')}}</label>
                                        <input type="text" value="{{ old('address') }}" class="form-control" id="address" name="address" />
                                    </div>
                                </div>
                            </div>
                            @if(warehouse_info()->is_using_vat == 1)
                                @include('inventory.customer.vat_info')
                            @endif
                            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                                <div class="row gx-lg-3 g-2">
                                    <div class="col-xl-3 col-lg-4 col-6">
                                        <label>{{__('obs.bank_name')}}</label>
                                        <input type="text" value="{{ old('bank_name') }}" class="form-control" id="bank_name" name="bank_name" />
                                    </div>
                                    <div class="col-xl-3 col-lg-4 col-6">
                                        <label>{{__('obs.swift_code')}}</label>
                                        <input type="number" value="{{ old('swift_code') }}" class="form-control" id="swift_code" name="swift_code" />
                                    </div>
                                    <div class="col-xl-3 col-lg-4 col-6">
                                        <label>{{__('obs.account_name')}} </label>
                                        <input type="text" value="{{ old('acc_name') }}" class="form-control" id="acc_name" name="acc_name" />
                                    </div>
                                    <div class="col-xl-3 col-lg-4 col-6">
                                        <label>{{__('obs.account_number')}}</label>
                                        <input type="number" value="{{ old('acc_number') }}" class="form-control" id="acc_number" name="acc_number" />
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="credentials" role="tabpanel" aria-labelledby="credentials-tab">
                                <div class="row gx-lg-3 g-2">
                                    <div class="col-xl-3 col-lg-4 col-6">
                                        <label>{{__('obs.user_name')}} *</label>
                                        <input type="text" value="{{ old('user_name') }}" class="form-control" id="user_name" name="user_name" />
                                    </div>
                                    <div class="col-xl-3 col-lg-4 col-6">
                                        <label>{{__('obs.password')}} *</label>
                                        <input type="password" value="{{ old('password') }}" class="form-control" id="password" name="password" />
                                    </div>
                                    <div class="col-xl-3 col-lg-4 col-6">
                                        <label>{{__('obs.showroom')}}</label>
                                        <input type="text" value="{{ old('showroom_name') }}" class="form-control" id="showroom_name" name="showroom_name" />
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="cardMember" role="tabpanel" aria-labelledby="cardMember-tab">
                                <div class="row gx-lg-3 g-2">
                                    <div class="col-xl-3 col-lg-4 col-6">
                                        <label for="grade_id">{{__('obs.card_grade')}}</label>
                                        <select name="grade_id" id="grade_id" style="width:100%" onchange="generateCardNumber(this.value)" class="form-control select_2">
                                            <option value=""></option>
                                            @forelse ($grade as $grade)
                                                <option value="{{ $grade->id }}">{{ $grade->name_eng }}</option>
                                            @empty
                                            @endforelse
                                        </select>
                                    </div>
                                    <div class="col-xl-3 col-lg-4 col-6">
                                        <label for="card_number">{{__('obs.card_number')}}</label>
                                        <input type="text" value="{{ old('card_number') }}" class="form-control" id="card_number" name="card_number"/>
                                    </div>
                                    <div class="col-xl-3 col-lg-4 col-6">
                                        <label for="grade_id">{{__('obs.expire_date')}}</label>
                                        <input type="date" name="expiry_date" class="form-control" id="expiry_date">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-12 d-flex justify-content-center mt-4" style="gap: 10px;">
                        <a href="{{ route('customer.index') }}" type="button" class="btn btn-danger">{{__('obs.go_back')}}</a>
                        <button type="submit" class="btn btn-primary">{{__('obs.submit')}}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script src="{{ asset('inventory/blade_js/common.js') }}"></script>
    <script>
        $(document).ready(function() {
            // $('.custom-select').select2();
            // $('.select_2').select2();
            select2('select_2');
            select2('select_line', 'Select', false);
            partySearch('vendor_live', 2);
        });

        const CheckCommission = (v) => {
            if ($(v).prop("checked")) {
                // checked
                $('#Commission').show();

            } else {
                $('#Commission').val(0);
                $('#Commission').hide();

            }
        }

        const shopEnable = (v) => {
            if ($(v).prop("checked")) {
                $('#shop_field').show();
            } else {
                $('#shop_field').hide();
            }
        }

        const CheckLimitApply = (v) => {
            if ($(v).prop("checked")) {
                // checked
                $('#creditLimitAmount').show();
                $('#creditLimitAmountlabel').show();
                $('#limitapply').val(1);
            } else {
                $('#creditLimitAmount').hide();
                $('#creditLimitAmountlabel').hide();
                $('#limitapply').val(2);
                $('#creditLimitAmount').val(0);

            }
        }

        // for type
        const types = (v) => {
            if ($(v).prop("checked")) {
                // checked
                $('#PartyType').val(3);
            } else {
                $('#PartyType').val(2);
            }
        }

        const generateCardNumber = (grade_id) => {
            if (grade_id)
                ajaxCall('/get-cardmember-no', 'GET', {grade_id: grade_id}, (cardNo)=> {
                    $('#card_number').val(cardNo);
                });
            else $('#card_number').val('');
        }
    </script>

@endsection