@extends('layouts.install')
@section('title', 'Welcome - POS Installation')

@section('content')
  <div class="text-center">
    <h1 class="content-title">Welcome to POS Installation</h1>
    <p class="content-subtitle">Follow the steps below to set up your application.</p>
  </div>

  <div style="margin-bottom: 2rem;">
    <div style="background: #f3f4f6; padding: 1.5rem; border-radius: 0.5rem; margin-bottom: 1.5rem;">
      <h4 style="font-weight: 600; margin-bottom: 1rem; color: var(--primary-color);">Pre-Requisites</h4>
      <p style="margin-bottom: 1rem;">Before proceeding, please ensure you have the following:</p>
      <ul style="list-style-type: none; padding: 0;">
        <li style="margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem;">
          <i class="fa-solid fa-check text-success"></i> <b>Database Credentials</b> (Host, Username, Password, Database
          Name)
        </li>
        <li style="margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem;">
          <i class="fa-solid fa-check text-success"></i> <b>Application Name</b>
        </li>
        <li style="margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem;">
          <i class="fa-solid fa-check text-success"></i> <b>Envato/Codecanyon Purchase Details</b>
        </li>
        <li style="margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem;">
          <i class="fa-solid fa-check text-success"></i> <b>Mail Server Details</b> (Optional)
        </li>
      </ul>
    </div>

    @include('install.partials.e_license')
  </div>

  <div class="actions-footer">
    <a href="{{route('install.details')}}" class="btn btn-primary">
      I Agree, Let's Go! <i class="fa-solid fa-arrow-right" style="margin-left: 0.5rem;"></i>
    </a>
  </div>
@endsection