@extends('back.layouts.main')
@section('title','Add Transaction')
@section('content-header')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-0">
                <div class="col-sm-6"><h1 class="m-0">Add Transaction</h1></div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item">Transaction</li>
                        <li class="breadcrumb-item active">Add Transaction</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('content')
    <section class="content container-fluid">
        <form action="{{ route('transaction.store') }}" method="POST">
            @csrf
            @method('post')
            <fieldset class="content-group">
                <div class="row">
                    <div class="col-md-8">
                        <div class="card card-primary">
                            <div class="card-header with-border text-bold text-right"><span class="">*</span> signed fields are mandatory</div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="control-label">Date<span class="text-danger"> *</span></label>
                                            <input type="text" name="date" class="form-control date_picker" value="{{ old('date') }}" required="required" autocomplete="off"/>
                                            @if ($errors->has('date'))<span class="help-block text-danger">{{ $errors->first('date') }}</span>@endif
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="control-label">Amount<span class="text-danger"> *</span></label>
                                            <input type="text" name="amount" class="form-control" value="{{ old('amount') }}" required="required" autocomplete="off"/>
                                            @if ($errors->has('amount'))<span class="help-block text-danger">{{ $errors->first('amount') }}</span>@endif
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="control-label">User<span class="text-danger"> *</span></label>
                                            <select name="user_id" class="form-control select2" required>
                                                <option value="">Select User</option>
                                                @foreach($users as $user)
                                                    <option value="{{ $user->id }}" {{ (old('user_id') == $user->id) ? 'selected' : '' }}>{{ $user->name }}[{{ $user->email }}]</option>
                                                @endforeach
                                            </select>
                                            @if ($errors->has('user_id'))<span class="help-block text-danger">{{ $errors->first('user_id') }}</span>@endif
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="control-label">Reference<span class="text-danger"> </span></label>
                                            <input type="text" name="reference" class="form-control" value="{{ old('reference') }}"/>
                                            @if ($errors->has('reference'))<span class="help-block text-danger">{{ $errors->first('reference') }}</span>@endif
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="control-label">Note<span class="text-danger"> </span></label>
                                            <textarea name="note" class="form-control" required="required">{{ old('note') }}</textarea>
                                            @if ($errors->has('note'))<span class="help-block text-danger">{{ $errors->first('note') }}</span>@endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card card-warning">
                            <div class="card-header with-border text-bold">Transaction Type</div>
                            <div class="card-body">
                                <div class="form-group">
                                    <select class="form-control" name="type" required>
                                        @foreach($types as $key=> $type)
                                            <option value="{{ $key }}" {{ (old('type') == $key) ? 'selected' : '' }}>{{ $type }}</option>
                                        @endforeach
                                    </select>
                                    @if ($errors->has('type'))<span class="help-block text-danger">{{ $errors->first('type') }} </span>@endif
                                </div>
                            </div>
                        </div>
                        <div class="card card-info">
                            <div class="card-header with-border text-bold">Transaction For</div>
                            <div class="card-body">
                                <div class="form-group">
                                    <select class="form-control" name="for" required>
                                        @foreach($fors as $key=> $for)
                                            <option value="{{ $key }}" {{ (old('for') == $key) ? 'selected' : '' }}>{{ $for }}</option>
                                        @endforeach
                                    </select>
                                    @if ($errors->has('for'))<span class="help-block text-danger">{{ $errors->first('for') }} </span>@endif
                                </div>
                            </div>
                        </div>
                        <div class="card card-success">
                            <div class="card-header with-border text-bold">Publish</div>
                            <div class="card-body">
                                <button type="submit" name="save" class="btn btn-success"><i class="fa fa-save"></i> Save</button>
                                <a type="button" class="btn bg-maroon" href="{{ route('transaction.index') }}"><i class="fa fa-th-list"></i> Transaction List</a>
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>
        </form>
    </section>
@endsection
@push('custom-css-scripts')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker.min.css" integrity="sha512-34s5cpvaNG3BknEWSuOncX28vz97bRI59UnVtEEpFX536A7BtZSJHsDyFoCl8S7Dt2TPzcrCEoHBGeM4SUBDBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@endpush
@push('custom-js-scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js" integrity="sha512-LsnSViqQyaXpD4mBBdRYeP6sRwJiJveh2ZIbW41EBrNmKxgr/LFZIiWT6yr+nycvhvauz8c2nYMhrP80YhG7Cw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
@endpush
@push('custom-js')
    <script>
        $(document).ready(function() {
            $('.date_picker').datepicker({
                format:"dd-mm-yyyy",
                autoclose:true
            });
        });
    </script>
@endpush