@extends('admin.layout.master')
@section('title', 'VENDOR')
@section('content')
    <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;
        }

    </style>
    <div class="card sina-card">
        <div class="card-header card-header-s">
            <h4>Vendor</h4>
        </div>
        @if ($errors->any())
            @foreach ($errors->all() as $error)
                <div style="color: red">{{ $error }}</div>
            @endforeach
        @endif
        <div class="card-body">
            <form method="POST" action="{{ route('vendor.store') }}">
                @csrf
                <div class="row">
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-4">
                                <label>Group Code</label>
                            </div>
                            <div class="col-md-8">
                                <div class="form-group">
                                    <div class="input-group">
                                        <select class="custom-select select2" id="group_id" name="group_id">
                                            <option selected>Choose...</option>
                                            @foreach ($groups as $group)
                                                <option value="{{ $group->id }}">{{ $group->name_eng }}</option>
                                            @endforeach
                                        </select>
                                        <a href="{{ route('group.index', ['idx' => 1]) }}" class="btn btn-success btn-sm"><i
                                                class="fas fa-plus"></i></a>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-4">
                                <label>Code</label>
                            </div>
                            <div class="col-md-8">
                                <div class="form-group">
                                    <input type="text" value="{{ $code }}" class="form-control" id="code"
                                        name="code" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-4">
                                <label>Name</label>
                            </div>
                            <div class="col-md-8">
                                <div class="form-group">
                                    <input type="text" value="{{ old('name') }}" class="form-control" id="name"
                                        name="name_eng" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-4">
                                <label>Local Name</label>
                            </div>
                            <div class="col-md-8">
                                <div class="form-group">
                                    <input type="text" value="{{ old('name_local') }}" class="form-control"
                                        id="localname" name="name_local" />
                                </div>

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

                    <div class="col-md-6">
                        <div class="row d-flex">
                            <div class="col-md-3 pr-0">
                                <label>Act As Customer</label>

                            </div>
                            <div class="col-md-1 px-0" style="margin-top: -6px">
                                <div class="form-group">
                                    <input type="checkbox" onclick="types(this)" value="3" id="PartyType"
                                        name="party_type" />
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <ul class="nav nav-tabs mb-3" id="myTab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab"
                                    aria-controls="home" aria-selected="true">Master Details</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
                                    aria-controls="profile" aria-selected="false">Other Data</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab"
                                    aria-controls="contact" aria-selected="false">Cash In Bank</a>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label>Cost Center</label>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <select class="custom-select select2" id="cost_center"
                                                        name="cost_center">
                                                        <option selected value="0">Choose...</option>
                                                        @forelse ($cost_centers as $cost)
                                                            <option value='{{ $cost->id }}'>{{ $cost->name }}</option>
                                                        @empty

                                                        @endforelse
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-2 pl-0 ml-0">
                                            <a href="{{ route('costcenter.index') }}" id="basic-addon2 pl-0 ml-0"
                                                style="font-size: 10px" class='btn btn-danger ml-2'> <i
                                                    class="fas fa-plus"></i></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label>Type</label>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <select class="custom-select select2" id="type" name="type">
                                                        <option selected value="">Choose...</option>
                                                        @foreach ($types as $type)
                                                            <option value="{{ $type->id }}">{{ $type->name_eng }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-2 pl-0 ml-0">
                                            <a href="{{ route('type.create') }}" style="font-size: 10px"
                                                id="basic-addon2" class='btn btn-danger ml-2'> <i
                                                    class="fas fa-plus"></i></a>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label>Commission(%)</label>
                                            <input type='checkbox' onchange="CheckCommission(this)">
                                        </div>
                                        <div class="col-md-8">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    {{-- <div id="chekedDiv" > --}}
                                                    <input type="number" value="{{ old('commission') }}" id="Commission"
                                                        style="display: none" class="form-control input-sm"
                                                        name="commission" />
                                                    {{-- </div> --}}
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                {{-- starting newly added --}}
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label>Other Commission Name</label>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="form-group">
                                                <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>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label>Other Commission</label>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <input type="number" value="0"
                                                        id="otherCommission" class="form-control input-sm"
                                                        name="other_commission" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                 
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label>Commission Calculation Type</label>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <select type="number" value="{{ old('com_calc_type') }}"
                                                        id="comCalcType" class="custom-select select2" name="com_calc_type">
                                                        <option value="1">+</option>
                                                        <option value="0">-</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- starting newly added --}}
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label>Store</label>
                                        </div>
                                        <div class="col-md-8">
                                            <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>
                                                    All Store
                                                    <input class="form-check-input" name="stores" id="allstore" type="radio"
                                                        value="2">
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label>Commission Type</label>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <select class="custom-select select2" id="commissionType"
                                                        name="commission_type">
                                                        <option value="1">Fixed</option>
                                                        <option value="2">Customized</option>
                                                    </select>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label>Mobile</label>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="form-group">
                                                <input type="number" value="{{ old('mobile') }}" class="form-control"
                                                    id="mobile" name="mobile" />
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label>Address</label>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="form-group">
                                                <input type="text" value="{{ old('address') }}" class="form-control"
                                                    id="address" name="address" />
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label>Bank Name</label>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="form-group">
                                                <input type="text" value="{{ old('bank_name') }}" class="form-control"
                                                    id="bank_name" name="bank_name" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label>Swift Code</label>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="form-group">
                                                <input type="number" value="{{ old('swift_code') }}"
                                                    class="form-control" id="swift_code" name="swift_code" />
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label>Account Name</label>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="form-group">
                                                <input type="text" value="{{ old('acc_name') }}" class="form-control"
                                                    id="acc_name" name="acc_name" />
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label>Account Number</label>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="form-group">
                                                <input type="number" value="{{ old('acc_number') }}"
                                                    class="form-control" id="acc_number" name="acc_number" />
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <input type="submit" class="btn btn-primary btn-sm mt-3 ml-3" value="Submit">
            </form>
        </div>
    </div>

@endsection
@section('script')
    <script>
        $(document).ready(function() {
            $('.select2').select2();
        });

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

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

            }
        }

        const types = (v) => {

            if ($(v).prop("checked")) {
                $('#PartyType').val(3);
            } else {
                $('#PartyType').val(1);
            }
        }
    </script>
@endsection