@extends('frontend.layouts.app')
@section('frontend-content')

    <div class="content-wrapper">
        <div class="page-header">
            <h3 class="page-title"> {{ trans('main-sidebar.add_team') }} </h3>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('/') }}">{{ trans('main-sidebar.dashboard') }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ trans('main-sidebar.add_team') }}</li>
                </ol>
            </nav>
        </div>
        <div class="row">
            <div class="col-md-12 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">{{ trans('main-sidebar.add_team') }}</h4>
                        <p>{{ trans('main-sidebar.your_balance') }} ({{ App\Models\Code::where([['customer_id', Auth::id()], ['status', 'available']])->count() }})</p>
                        <form class="forms-sample" method="POST" action="{{ route('team.store') }}">
                            @csrf
                            <div class="form-group">
                                <label for="name">{{ trans('main-sidebar.team_name') }}</label>
                                <input type="text" class="form-control" name="name" id="name" placeholder="{{ trans('main-sidebar.team_name') }}">
                            </div>
                            <div class="form-group">
                                <label for="number">{{ trans('main-sidebar.number_of_employees') }}</label>
                                <input type="number" class="form-control" min="1" name="number" id="number" placeholder="{{ trans('main-sidebar.number_of_employees') }}" onkeyup="myFunction()">
                            </div>

                            <input type="hidden" value="{{ $category->id }}" name="category_id">

                            <!--<h3>{{ trans('main-sidebar.pay_getway') }}</h3>-->
                            <!--<br>-->
                            <!--<p><span>{{ trans('main-sidebar.test_price') }}</span> $<span id="total"></span>-->

                            <!--<div class="form-group">-->
                            <!--    <label for="username">-->
                            <!--        <h6>{{ trans('main-sidebar.card_owner') }}</h6>-->
                            <!--    </label>-->
                            <!--    <input type="text" name="owner_name" placeholder="Card Owner Name" required class="form-control">-->
                            <!--</div>-->
                            <!--<div class="form-group">-->
                            <!--    <label for="cardNumber">-->
                            <!--        <h6>{{ trans('main-sidebar.card_number') }}</h6>-->
                            <!--    </label>-->
                            <!--    <div class="input-group">-->
                            <!--        <input type="text" name="card_number" placeholder="Valid card number" class="form-control " required>-->
                            <!--        <div class="input-group-append"> <span class="input-group-text text-muted"> <i class="fab fa-cc-visa mx-1"></i> <i class="fab fa-cc-mastercard mx-1"></i> <i class="fab fa-cc-amex mx-1"></i> </span>-->
                            <!--        </div>-->
                            <!--    </div>-->
                            <!--</div>-->
                            <!--<div class="row">-->
                            <!--    <div class="col-sm-8">-->
                            <!--        <div class="form-group">-->
                            <!--            <label>-->
                            <!--            <span class="hidden-xs">-->
                            <!--                <h6>{{ trans('main-sidebar.ex_date') }}</h6>-->
                            <!--            </span>-->
                            <!--            </label>-->
                            <!--            <div class="input-group">-->
                            <!--                <input type="number" placeholder="MM" name="month" class="form-control" required>-->
                            <!--                <input type="number" placeholder="YY" name="year" class="form-control" required>-->
                            <!--            </div>-->
                            <!--        </div>-->
                            <!--    </div>-->
                            <!--    <div class="col-sm-4">-->
                            <!--        <div class="form-group mb-4">-->
                            <!--            <label data-toggle="tooltip" title="Three digit CV code on the back of your card">-->
                            <!--                <h6>CVV <i class="fa fa-question-circle d-inline"></i></h6>-->
                            <!--            </label>-->
                            <!--            <input type="text" name="cvv" required class="form-control">-->
                            <!--        </div>-->
                            <!--    </div>-->
                            <!--</div>-->

                            <button type="submit" class="btn btn-gradient-primary me-2">{{ trans('main-sidebar.save') }}</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- content-wrapper ends -->
    <!-- partial:partials/_footer.html -->

    <!-- partial -->
@endsection

<script>
    function myFunction() {
        var numberValue = document.getElementById("number").value;
        document.getElementById("total").innerHTML = numberValue * 19.99;
    }
</script>

@push('frontend-script')

    @if(session()->has('message'))
        <script>
            Toastify({
                text: '{{  session()->get('message') }}',
                duration: 3000,
                newWindow: true,
                close: true,
                gravity: "top", // `top` or `bottom`
                position: "left", // `left`, `center` or `right`
                stopOnFocus: true, // Prevents dismissing of toast on hover
                style: {
                    background: "linear-gradient(to right, #00b09b, #96c93d)",
                },
                onClick: function(){} // Callback after click
            }).showToast();
        </script>
    @endif
    
     @if(session()->has('error'))
        <script>
            Toastify({
                text: '{{  session()->get('error') }}',
                duration: 3000,
                newWindow: true,
                close: true,
                gravity: "top", // `top` or `bottom`
                position: "left", // `left`, `center` or `right`
                stopOnFocus: true, // Prevents dismissing of toast on hover
                style: {
                    background: "linear-gradient(to right, #e15361,#dc3545)",
                },
                onClick: function(){} // Callback after click
            }).showToast();
        </script>
    @endif
@endpush