@extends('layouts.master')

@section('title')
Add Transaction: {{ $first_name }} {{ $last_name }}
@endsection

@section('content.header.title')
Add new transaction
@endsection

@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <!-- left column -->
            <div class="col-md-12">
                <!-- general form elements -->
                <div class="card card-primary">
                    <!-- /.card-header -->
                    <!-- form start -->
                    <form role="form" method="POST" action="{{route('save-tran')}}">
                        @csrf
                        <div class="card-body">
                            <div class="form-group row">
                                <label for="name" class="col-sm-2 col-form-label">User</label>
                                <div class="col-sm-10">
                                    <input type="text" readonly class="form-control-plaintext"
                                        id="name"
                                        value="{{ $first_name }} {{ $last_name }} ({{  $acct_type }})">
                                    <input type="hidden" id="user_id" name="user_id"
                                        value="{{ $user_id }}">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="tran_type" class="col-sm-2 col-form-label">Transaction
                                    Type</label>
                                <div class="col-sm-10">
                                    <select class="form-control" id="tran_type" name="tran_type">
                                        @foreach($items as $id =>$name)
                                        <option value="{{$id}}">{{$name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row" id="div_account_type"
                                name="div_account_type">
                                <label for="acct_type" class="col-sm-2 col-form-label">Set Account
                                    Type
                                </label>
                                <div class="col-sm-10">
                                    <select class="form-control" id="acct_type" name="acct_type">
                                        @foreach($acct_types as $id =>$name)
                                        <option value="{{$id}}">{{$name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row" id="div_amount" name="div_amount">
                                <label for="amount" class="col-sm-2 col-form-label"
                                    id="amt_label">Amount ($)</label>
                                <div class="col-sm-10">
                                    <input class="form-control" id="amount" name="amount"
                                        placeholder="Amount" required>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="reference" class="col-sm-2 col-form-label">Reference
                                    Note</label>
                                <div class="col-sm-10">
                                    <input class="form-control" id="reference" name="reference"
                                        placeholder="Reference" required>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="note" class="col-sm-2 col-form-label">Note</label>
                                <div class="col-sm-10">
                                    <textarea class="form-control" rows="5"
                                        placeholder="Transaction Info" name="note" id="note"
                                        required></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <a href="{{route('user-by-id', $user_id )}}" class="btn btn-default"
                                role="button" aria-pressed="true">Cancel</a>
                            <button type="submit" class="btn btn-primary float-right">Save</button>
                        </div>
                    </form>
                </div>
                <!-- /.card -->
            </div>
        </div>
        <!-- /.row -->
    </div><!-- /.container-fluid -->
</section>
@endsection('content')

@section('javascript')
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script>
$(document).ready(function () {

    $("#div_account_type").hide();

    $("#tran_type").change(function() {
        $( "#tran_type option:selected" ).each(function() {
            if ($(this).text() == "Minutes")
            {
                $("#div_account_type").hide();
                $("#div_amount").show();
                $("#amount").attr('placeholder', 'How many minutes?');
                $("#amt_label").text('Minutes');

            } else if ($(this).text() == "Upgrades")
            {
                $("#div_account_type").show();
                $("#div_amount").hide();
                $("#amount").val('0.0');
            } else {
                $("#div_account_type").hide();
                $("#div_amount").show();

                $("#amount").attr('placeholder', 'Amount');
                $("#amt_label").text('Amount ($)');
            }
        });
    });
});
</script>
@endsection