@extends('layouts.sidebar')

@section('content')

<div class="conatiner-fluid content-inner mt-n5 py-0">
  <div class="row">   
      
   <div class="col-lg-12">
      <div class="card   rounded">
          <div class="card-body">
             <div class="row">
                 <div class="col-sm-12">  

                  @if(session()->has('success'))
                  <div class="alert alert-success">
                      {{ session()->get('success') }}
                  </div>
              @endif
              
              @if(session()->has('error'))
                  <div class="alert alert-danger">
                      {{ session()->get('error') }}
                  </div>
              @endif
              
              @if($_SERVER['QUERY_STRING'] === '')
              <section class="text-gray-400">
                      <h3 class="mb-4 card-header"><i class="bi bi-person"> Account Settings</i></h3>
              <div class="card-body p-0 p-md-3">
              
                      @foreach($profile as $profile)
              
              @if(env('REGISTER_AUTH') != 'verified' or auth()->user()->role == 'admin')
                      <form  action="{{ route('editProfile') }}" method="post">
                      @csrf
                        <div class="form-group col-lg-8">
                          <h4>Email</h4>
                          <input type="email" class="form-control" name="email" value="{{ $profile->email }}" required>
                        </div>
                        <button type="Change " class="mt-3 ml-3 btn btn-primary">Change email</button>
                      </form>
              @endif
              
              <br><br><form  action="{{ route('editProfile') }}" method="post">
                @csrf
                  <div class="form-group col-lg-8">
                    <h4>Password</h4>
                    <input type="password" name="password" class="form-control" placeholder="At least 8 characters" required>
                  </div>
                  <button type="Change " class="mt-3 ml-3 btn btn-primary">Change password</button>
                </form>
              
                @csrf
                  <br><br><div class="form-group col-lg-8">
                    <h4>Role</h4>
                    <input type="text" class="form-control" value="{{ strtoupper($profile->role) }}" readonly>
                  </div>
              
              @if(env('ALLOW_USER_EXPORT') != false)
              <div class="mt-3"><br><br><br>
                <h4>Export user data</h4>
                <p>Export your user data to transfer to a different instance.</p>
                <div class="row">
                  <div class="col-lg-8">
                    <button class="btn btn-outline-secondary">
                      <a href="{{ route('exportAll') }}">
                        <i class="bi bi-layer-backward"></i> Export all data
                      </a>
                    </button>
                    <button class="btn btn-outline-secondary">
                      <a href="{{ route('exportLinks') }}">
                        <i class="bi bi-layer-backward"></i> Export links only
                      </a>
                    </button>
                  </div>
                </div>
              </div>
              @endif
              
              @if(env('ALLOW_USER_IMPORT') != false)
              <form action="{{ route('importData') }}" enctype="multipart/form-data" method="post">
                @csrf
                <div class="form-group col-lg-8"><br><br><br>
                  <h4>Import user data</h4>
                    <label>Import your user data from another instance.</label>
                    <input type="file" accept="application/JSON" class="form-control" id="customFile" name="import">
                </div>
              
                <button type="submit" class="mt-3 ml-3 btn btn-primary" onclick="return confirm('Are you sure you want to import this file? This action will replace all your current data, including links!')">Import</button>
              </form>
              @endif
              
              <br>
              
                        <br><button class="btn btn-danger"><a
                            href="{{ url('/studio/profile/?delete') }}" style="color:#FFFFFF;"><i class="bi bi-exclamation-octagon-fill"></i>
                            Delete your account</a></button>
                        </div>
              </section>
                        @endforeach
              @endif
              
              @if($_SERVER['QUERY_STRING'] === 'delete')
              <div class="d-flex justify-content-center align-items-center" style="height:100vh;">
                <div class="text-center">
                  <h2 class="text-decoration-underline">You are about to delete your account!</h2>
                  <p>You are about to delete your account! This action cannot be undone.</p>
                  <div>
                    <button class="redButton btn btn-danger" style="filter: grayscale(100%);" disabled onclick="window.location.href = '{{ url('/studio/delete-user/') . "/" . Auth::id() }}';"><i class="bi bi-exclamation-diamond-fill"></i></button>
                    <button type="submit" class="btn btn-primary"><a style="color:#fff;" href="{{ url('/studio/profile') }}">Cancel</a></button>
                  </div>
                </div>
              </div>
              
              <script>
              var seconds = 10;
              var interval = setInterval(function() {
                document.querySelector(".redButton").innerHTML = --seconds;
              
                if (seconds <= 0)
                  clearInterval(interval);
              }, 1000);
              
              setTimeout(function(){
                document.querySelector(".redButton").disabled = false;
                document.querySelector(".redButton").innerHTML = 'Delete account';
                document.querySelector(".redButton").style.filter = "none";
              }, 10000);
              </script>

              @endif

                 </div>
             </div>
          </div>
       </div>
      </div>
    </div>
  </div>

@endsection