@extends('layouts.app')

@section('title')
    {{ __('Tạo mới phương thức thanh toán') }}
@endsection

@section('config')
    active
@endsection

@section('section.header')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ __('Thêm mới phương thức thanh toán') }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a
                                href="{{ route('app.configure.index') }}">{{ __('Cấu hình giao dịch') }}</a></li>
                        <li class="breadcrumb-item active">{{ __('Tạo mới') }}</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
@endsection

@section('section.content')
    <!-- Main content -->
    <section class="content">
        <!-- Default box -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{ __('Phương thức thanh toán') }}</h3>
            </div>
            <div class="card-body">
                @if (Session::has('error'))
                    <div id="error-alert" class="alert alert-danger">
                        {{ Session::get('error') }}
                    </div>
                @endif
                <form class="row" action="{{ route('app.configure.createBank') }}" method="POST">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="name">{{ __('Mã') }}*</label>
                            <input type="text" class="form-control" name="name" id="name"
                                placeholder="{{ __('Nhập Mã') }}">
                            @error('name')
                                <span class="badge bg-danger">* {{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="display_name">{{ __('transaction_type') }}*</label>
                            <input type="text" class="form-control" name="display_name" id="display_name"
                                placeholder="{{ __('Nhập loại giao dịch') }}">
                            @error('display_name')
                                <span class="badge bg-danger">* {{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="type">{{ __('Ví/Ngân hàng') }}</label>
                                    <select name="type" class="form-control">
                                        <option value="wallet">{{ __('Ví điện tử') }}</option>
                                        <option value="bank">{{ __('Ngân hàng') }}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="bank-code">{{ __('Bank Code') }}</label>
                                    <input type="text" class="form-control" name="bank_code" id="bank_code"
                                        placeholder="{{ __('Nhập bank code') }}">
                                    @error('bank_code')
                                        <span class="badge bg-danger">* {{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label for="time_out">{{ __('Time out (giây)') }}*</label>
                            <input type="number" class="form-control" name="time_out" id="time_out"
                                placeholder="{{ __('Nhập timeout') }}">
                            @error('time_out')
                                <span class="badge bg-danger">* {{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-lg-3">
                        <div class="form-group">
                            <label for="amount_in_from">{{ __('Mức giao dịch IN - Từ') }}*</label>
                            <input type="number" class="form-control" name="amount_in_from" id="amount_in_from"
                                placeholder="{{ __('Từ') }}">
                            @error('amount_in_from')
                                <span class="badge bg-danger">* {{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-lg-3">
                        <div class="form-group">
                            <label for="amount_in_to">{{ __('Đến') }}*</label>
                            <input type="number" class="form-control" name="amount_in_to" id="amount_in_to"
                                placeholder="{{ __('Đến') }}">
                            @error('amount_in_to')
                                <span class="badge bg-danger">* {{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label for="amount_in_from">{{ __('Mức giao dịch OUT- Từ') }}</label>
                            <input type="text" class="form-control" name="amount_out_from" id="amount_out_from"
                                pattern="[0-9,.]+" placeholder="{{ __('Từ') }}">
                            @error('amount_out_from')
                                <span class="badge bg-danger">* {{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-lg-3">
                        <div class="form-group">
                            <label for="amount_in_to">{{ __('Đến') }}</label>
                            <input type="text" class="form-control" name="amount_out_to" id="amount_out_to"
                                pattern="[0-9,.]+" placeholder="{{ __('Đến') }}">
                            @error('amount_out_to')
                                <span class="badge bg-danger">* {{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label for="amount_limit_day">{{ __('Giới hạn/Ngày') }}*</label>
                            <input type="number" class="form-control" name="amount_limit_day" id="amount_limit_day"
                                placeholder="{{ __('Nhập giới hạn ngày') }}">
                            @error('amount_limit_day')
                                <span class="badge bg-danger">* {{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-lg-3">
                        <div class="form-group">
                            <label for="amount_limit_month">{{ __('Giới hạn/tháng') }}</label>
                            <input type="number" class="form-control" name="amount_limit_month" id="amount_limit_month"
                                placeholder="{{ __('Nhập giới hạn tháng') }}">
                            @error('amount_limit_month')
                                <span class="badge bg-danger">* {{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-lg-3">
                        <div class="form-group">
                            <label for="status">{{ __('status') }}</label>
                            <label class="switch">
                                <input type="checkbox" name="status" id="status">
                                <span class="slider round"></span>
                            </label>

                        </div>
                    </div>

                    <div class="col-lg-12">
                        <div class="text-center">
                            <button class="btn btn-success" type="submit">{{ __('Thêm mới') }}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>
@endsection

@section('styles')
    <style type="text/css">
        .form-group label {
            flex: 1;
            display: block;
            margin-right: 10px;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }


        .switch input {
            display: none;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

        input:checked+.slider {
            background-color: #2196F3;
        }

        input:focus+.slider {
            box-shadow: 0 0 1px #2196F3;
        }

        input:checked+.slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }

        /* Rounded sliders */
        .slider.round {
            border-radius: 34px;
        }

        .slider.round:before {
            border-radius: 50%;
        }
    </style>
@endsection