@extends('user.layout.master')
@section('content')
    <style>
        /* @media only screen and (min-width: 768px) {
        } */
        
        .card {
            width: 100%;
        }
        video {
            width: 100%;
        }
    </style>
    <div class="margin-top-25"></div>

    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="titlebar" class="gradient">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-12">
                                <h3>Hello Buyer!</h3>
                                <span>We are glad to see you again!</span>
                                <!-- Breadcrumbs -->
                                <nav id="breadcrumbs" class="dark">
                                    <ul>
                                        <li><a href="#">Home</a></li>
                                        <li>Dashboard</li>
                                    </ul>
                                </nav>
                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <form action="{{ route('buyer.apikey.store') }}" method="post">
                    @csrf
                    <div class="form-group">
                        <label for="apiKey">Api Key</label>
                        @if (auth('buyer')->user()->api_key == null)
                            <input name="key" id="apiKey" class="form-control" placeholder="Api Key Here"
                                value="{{ old('key') }}" required>
                        @else
                            <input name="key" id="apiKey" class="form-control" placeholder="Api Key Here"
                                value="{{ auth('buyer')->user()->api_key }}" required>
                        @endif
                        @if ($errors->has('key'))
                        <div class="text-danger">{{ $errors->first('key') }}
                        </div>
                        @endif
                    </div>
                        {{-- <button type="submit" class="btn btn-primary text-right">{{ auth('buyer')->user()->api_key == null ? 'Submit' : 'Update' }}</button> --}}
                            <button type="submit" class="button button-sliding-icon ripple-effect">{{ auth('buyer')->user()->api_key == null ? 'Submit' : 'Update' }} <i class="icon-material-outline-arrow-right-alt"></i></button>
                </form>
            </div>

            <div class="single-page-section">
                
				<h3 class="margin-top-25">How to get api key</h3>
				<!-- Listings Container -->
				<div class="listings-container grid-layout">
						<!-- Job Listing -->
						<a href="#" class="job-listing">

							<!-- Job Listing Details -->
							<div class="job-listing-details">
								<video controls>
                                    <source src="{{ asset('assets/video/escrow_api.mp4') }}" type="video/mp4">
                                    <source src="{{ asset('assets/video/escrow_api.mp4') }}" type="video/ogg">
                                    Your browser does not support the video tag.
                                </video>
							</div>
						</a>
					</div>
					<!-- Listings Container / End -->
				</div>
        </div>
    </div>
@endsection