@extends('layouts.app')

@section('title')
    {{ __('Chỉnh sửa tài khoản') }}
@endsection

@section('payment')
    active
@endsection

@section('section.header')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ __('Cài đặt thiết bị') }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('app.bank-device.index') }}">Cấu hình thiết bị</a></li>
                        <li class="breadcrumb-item active">{{ __('Cài đặt thiết bị') }}</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
@endsection

@section('section.content')
    <section class="content">
        <div class="card">
            <div class="card-body">
                @if (Session::has('success'))
                    <div id="message-alert" class="alert alert-success">
                        {{ Session::get('success') }}
                    </div>
                @endif
                @if (Session::has('error'))
                    <div id="message-alert" class="alert alert-danger">
                        {{ Session::get('error') }}
                    </div>
                @endif
                <form class="row" method="POST" id="updateForm"
                    action="{{ route('app.bank-device.store', ['bank_account_id' => $bank_account->id]) }}">
                    @csrf
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="device-name">{{ __('Tên thiết bị') }}</label>
                            <input type="text" name="device_name" id="device-name"
                                value="{{ $bank_device->device_name ?? '' }}" class="form-control">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="device-id">{{ __('ID thiết bị') }}</label>
                            <input type="text" name="device_id" id="device-id"
                                value="{{ $bank_device->device_id ?? '' }}" class="form-control">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="pin">{{ __('Mã PIN') }}</label>
                            <input type="text" class="form-control" name="pin" id="pin"
                                value="{{ $bank_device->pin ?? '' }}">
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="text-center">
                            <button type="submit" class="btn btn-success"><i class="fas fa-save"></i>
                                {{ __('Lưu') }}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            document.getElementById('updateForm').addEventListener('submit', function(event) {
                event.preventDefault();

                var formData = new FormData(this);

                $.ajax({
                    url: this.action,
                    type: this.method,
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.success === true) {
                            toastr.success(response.message);
                        } else {
                            toastr.error(response.message);
                        }
                    },
                    error: function(error) {
                        toastr.error('Có lỗi xảy ra!');
                    }
                });
            });
        });
    </script>
@endsection

@section('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
@endsection