@extends('client.layouts.client')
@section('title', 'Tạo Website riêng')
@section('content')
<div class="row">
    <div class="col-md-12">
    <div class="card">
        <div class="card-header">
<div class="ribbon ribbon-primary ribbon-clip">TẠO WEBSITE ĐẠI LÝ</div>
        </div>
        <div class="card-body">
            <div class="col-md-7 mx-auto mb-3">
    <div class="alert bg-warning text-white">
    - Bạn phải đạt cấp bậc cộng tác viên hoặc đại lý mới có thể tạo web con!<br>
- Nghiêm cấm các tiên miền có chữ : Facebook, Instagram để tránh bị vi phạm bản quyền.<br>
- Khách hàng tạo tài khoản và sử dụng dịch vụ ở site con. Tiền sẽ trừ vào tài khoản của đại lý ở site chính. Vì thế để khách hàng mua được tài khoản đại lý phải còn số dư.<br>
- Chúng tôi hỗ trợ mục đích kinh doanh của tất cả cộng tác viên và đại lý!<br>
</div>
    </div>
    <div class="col-md-7 mx-auto">
            <div class="input-group mb-3">
                <label class="form-label" for="api_token">API Token</label>
                <div class="input-group">
                    <input disabled="" class="form-control" type="text" value="{{ Auth::user()->api_token }}"
                        id="api_token" readonly="">
                    <button type="button" id="reload-token" class="btn btn-primary"><i class="fa fa-sync"></i></button>
                </div>
            </div>
            <div class="mb-3">
                <form action="{{ route('create.website.post') }}" method="POST">
                    @csrf
                    <div class="col-md-12 mb-3">
                        <label for="domain" class="form-label">Tên miền</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="domain" placeholder="Tên miền" autocomplete="off" name="domain" value="{{ $website->name ?? '' }}">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i>
                            </button>
                        </div>
                    </div>
                    @if($website->name != '')
                    <div class="alert bg-blue mb-5">
                        <ul class="mb-0 text-white text-center">
                            <strong>
                                <h5 class="text-white">
                                    Bạn vui lòng trỏ miền về NameServer sau:
                                </h5>
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <div class="border-top border-start border-end py-2 border-white bg-primary rounded-top-2 mb-0">
                                            <h5 class="text-white text-center mb-0">NAMESEVER 1</h5>
                                        </div>
                                        <div class="alert alert-primary border-white text-primary rounded-top-0 fw-bold fs-3 text-center">
                                            <span onclick="coppy('{{ $website->name_sever1 }}')" class="cursor-pointer">{{ $website->name_sever1 }} <i class="fas fa-copy"></i></span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="border-top border-start border-end py-2 border-white bg-primary rounded-top-2 mb-0">
                                            <h5 class="text-white text-center mb-0">NAMESEVER 2</h5>
                                        </div>
                                        <div class="alert alert-primary border-white text-primary rounded-top-0 fw-bold fs-3 text-center">
                                            <span onclick="coppy('{{ $website->name_sever2 }}')" class="cursor-pointer">{{ $website->name_sever2 }} <i class="fas fa-copy"></i></span>
                                        </div>
                                    </div>
                                </div>
                            </strong>
                        </ul>
                    </div>
                    @endif
                </form>
            </div>
        </div>
    </div></div>
    </div>
</div>
@endsection
@section('script')
<script>
    $('#reload-token').click(function() {
        $.ajax({
            url: "{{ route('account.reload-user-token') }}",
            type: 'GET',
            dataType: 'json',
            beforeSend: function() {
                $('#reload-token').html('<i class="fas fa-sync fa-spin"></i>').prop('disabled', true);
            },
            complete: function() {
                $('#reload-token').html('<i class="fas fa-sync"></i>').prop('disabled', false);
            },
            success: function(data) {
                $('#api_token').val(data.api_token);
                Swal.fire({
                    toast: true,
                    position: 'top',
                    icon: 'success',
                    title: 'Đã thay đổi API Token!',
                    showConfirmButton: false,
                    timer: 1500,
                    timerProgressBar: true
                });
                setTimeout(function() {
                    location.reload();
                }, 700);
            },
            error: function() {
                Swal.fire({
                    toast: true,
                    position: 'top',
                    icon: 'error',
                    title: 'Có lỗi xảy ra! Không thể thay đổi API Token',
                    showConfirmButton: false,
                    timer: 1500,
                    timerProgressBar: true
                });
            }
        });
    });
</script>
@endsection