@extends('admin.layouts.master')

@section('header')
    <style>
        .uploading-outer {
            position: relative;
            display: flex;
            width: 100%;
            padding-bottom: 30px;
            border-bottom: 1px solid #f1f3f7;
            margin-bottom: 30px;
            align-items: center;
        }

        .uploadButton .uploadButton-button:hover {
            border-color: #021f4a;
        }

        .uploading-outer .uploadButton {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .uploadButton .uploadButton-input {
            opacity: 0;
            position: absolute;
            overflow: hidden;
            z-index: -1;
            pointer-events: none;
            height: 0;
            width: 0;
            display: none;
        }

        .uploadButton .uploadButton-button {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            cursor: pointer;
            height: 120px;
            width: 200px;
            border-radius: 5px;
            transition: 0.3s;
            margin: 0;
            color: #1b2032;
            font-size: 16px;
            border: 2px dashed #ced4e1;
        }
    </style>
@endsection

@section('content')
    <div class="content-page">
        <div class="content">
            <div class="container-fluid">
                <form action="{{ route('import.datas') }}" class="needs-validation" novalidate="" method="POST"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="row mt-3">
                        <div class="col-8">
                            <div class="card">
                                <div class="card-body">
                                    <h4 class="header-title">Import Data</h4>
                                    <div class="tab-content mt-5">
                                        <div class="tab-pane show active" id="custom-styles-preview" role="tabpanel">
                                            <div class="row">
                                                <div class="col-12 mb-3">
                                                    <label class="form-label" for="validationCustom02">Data file</label>
                                                    <input value="{{ old('file') }}" name="file" type="file"
                                                        class="form-control @error('file') is-invalid @enderror"
                                                        id="validationCustom01" placeholder="Tên file" required />
                                                    <div class="valid-feedback">
                                                        Tốt!
                                                    </div>
                                                </div>
                                                <div class="col-12 mb-3">
                                                    <label class="form-label" for="validationCustom02">Tài khoản Google Drive</label>
                                                    <select name="google_drive_account_id" id="validationCustom02"
                                                        class="form-control @error('google_drive_account_id') is-invalid @enderror"
                                                        required>
                                                        <option value="">Chọn tài khoản Google Drive</option>
                                                        @foreach ($googleDriveAccounts as $account)
                                                            <option value="{{ $account->id }}">{{ $account->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    <div class="valid-feedback">
                                                        Tốt!
                                                    </div>
                                                </div>
                                            </div>
                                            <button class="btn btn-primary" type="submit" fdprocessedid="j85tou">Import</button>
                                        </div> <!-- end preview-->
                                        
                                    </div>
                                </div> <!-- end card body-->
                            </div> <!-- end card -->
                        </div>
                        
                    </div>
                </form>

            </div>

            <!-- Footer Start -->
            @include('admin.includes.footer')

            <!-- end Footer -->

        </div>
        <!-- content -->

        <!-- Footer Start -->
        @include('admin.includes.footer')

        <!-- end Footer -->

    </div>
@endsection