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

@section('content')
  <div class="text-center">
    <h1 class="content-title">Application Configuration</h1>
    <p class="content-subtitle">Step 2 of 3</p>
  </div>

  @if(session('error'))
    <div class="alert alert-danger">
      <i class="fa-solid fa-triangle-exclamation" style="margin-top: 3px;"></i>
      <div>{!! session('error') !!}</div>
    </div>
  @endif

  @if ($errors->any())
    <div class="alert alert-danger">
      <i class="fa-solid fa-triangle-exclamation" style="margin-top: 3px;"></i>
      <ul style="margin: 0; padding-left: 1rem;">
        @foreach ($errors->all() as $error)
          <li>{{ $error }}</li>
        @endforeach
      </ul>
    </div>
  @endif

  <form class="form" id="details_form" method="post" action="{{route('install.postDetails')}}">
    {{ csrf_field() }}

    <!-- App Details Section -->
    <div class="section-title" style="margin-bottom: 1.5rem; border-bottom: 2px solid #f3f4f6; padding-bottom: 0.5rem;">
      <h3 style="font-size: 1.1rem; font-weight: 600; color: var(--text-main);"><i
          class="fa-solid fa-desktop text-muted"></i> Application Details</h3>
    </div>

    <div class="row">
      <div class="col-half">
        <div class="form-group">
          <label for="app_name" class="form-label">Application Name *</label>
          <input type="text" class="form-control" name="APP_NAME" id="app_name" placeholder="POS Application" required>
        </div>
      </div>
      <div class="col-half">
        <div class="form-group">
          <label for="app_title" class="form-label">Application Title</label>
          <input type="text" name="APP_TITLE" class="form-control" id="app_title" placeholder="My POS">
        </div>
      </div>
    </div>


    <!-- Database Section -->
    <div class="section-title"
      style="margin-top: 2rem; margin-bottom: 1.5rem; border-bottom: 2px solid #f3f4f6; padding-bottom: 0.5rem;">
      <h3 style="font-size: 1.1rem; font-weight: 600; color: var(--text-main);"><i
          class="fa-solid fa-database text-muted"></i> Database Details</h3>
    </div>

    <div class="row">
      <div class="col-third">
        <div class="form-group">
          <label for="db_host" class="form-label">Database Host *</label>
          <input type="text" class="form-control" id="db_host" name="DB_HOST" required placeholder="localhost"
            value="localhost">
        </div>
      </div>
      <div class="col-third">
        <div class="form-group">
          <label for="db_port" class="form-label">Database Port *</label>
          <input type="text" class="form-control" id="db_port" name="DB_PORT" required value="3306">
        </div>
      </div>
      <div class="col-third">
        <div class="form-group">
          <label for="db_database" class="form-label">Database Name *</label>
          <input type="text" class="form-control" id="db_database" name="DB_DATABASE" required>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-half">
        <div class="form-group">
          <label for="db_username" class="form-label">Database Username *</label>
          <input type="text" class="form-control" id="db_username" name="DB_USERNAME" required>
        </div>
      </div>
      <div class="col-half">
        <div class="form-group">
          <label for="db_password" class="form-label">Database Password *</label>
          <input type="password" class="form-control" id="db_password" name="DB_PASSWORD" required>
        </div>
      </div>
    </div>

    <!-- Email Section -->
    <div class="section-title"
      style="margin-top: 2rem; margin-bottom: 1.5rem; border-bottom: 2px solid #f3f4f6; padding-bottom: 0.5rem;">
      <h3 style="font-size: 1.1rem; font-weight: 600; color: var(--text-main);"><i
          class="fa-solid fa-envelope text-muted"></i> Email Configuration</h3>
    </div>

    <div class="row">
      <div class="col-half">
        <div class="form-group">
          <label for="MAIL_MAILER" class="form-label">Send Mails Using *</label>
          <select class="form-control" name="MAIL_MAILER" id="MAIL_MAILER" style="background-color: white;">
            <option value="sendmail">PHP Mail</option>
            <option value="smtp">SMTP</option>
          </select>
        </div>
      </div>
    </div>

    <div class="row smtp hide">
      <div class="col-third">
        <div class="form-group">
          <label for="MAIL_HOST" class="form-label">SMTP Host *</label>
          <input type="text" class="form-control smtp_input" id="MAIL_HOST" name="MAIL_HOST" disabled>
        </div>
      </div>
      <div class="col-third">
        <div class="form-group">
          <label for="MAIL_PORT" class="form-label">SMTP Port *</label>
          <input type="text" class="form-control smtp_input" id="MAIL_PORT" name="MAIL_PORT" disabled>
        </div>
      </div>
      <div class="col-third">
        <div class="form-group">
          <label for="MAIL_ENCRYPTION" class="form-label">Encryption</label>
          <input type="text" class="form-control smtp_input" id="MAIL_ENCRYPTION" name="MAIL_ENCRYPTION" disabled
            placeholder="tls / ssl">
        </div>
      </div>
      <div class="col-half">
        <div class="form-group">
          <label for="MAIL_USERNAME" class="form-label">SMTP Username *</label>
          <input type="text" class="form-control smtp_input" id="MAIL_USERNAME" name="MAIL_USERNAME" disabled>
        </div>
      </div>
      <div class="col-half">
        <div class="form-group">
          <label for="MAIL_PASSWORD" class="form-label">SMTP Password *</label>
          <input type="password" class="form-control smtp_input" id="MAIL_PASSWORD" name="MAIL_PASSWORD" disabled>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-half">
        <div class="form-group">
          <label for="MAIL_FROM_ADDRESS" class="form-label">Default From Address *</label>
          <input type="email" class="form-control" id="MAIL_FROM_ADDRESS" name="MAIL_FROM_ADDRESS" required
            placeholder="system@example.com">
        </div>
      </div>
      <div class="col-half">
        <div class="form-group">
          <label for="MAIL_FROM_NAME" class="form-label">Default From Name</label>
          <input type="text" class="form-control" id="MAIL_FROM_NAME" name="MAIL_FROM_NAME" placeholder="System Name">
        </div>
      </div>
    </div>

    <div
      style="margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center;">
      <a href="{{route('install.index')}}" class="btn" style="background: #f3f4f6; color: var(--text-main);">
        <i class="fa-solid fa-arrow-left" style="margin-right: 0.5rem;"></i> Back
      </a>

      <button type="submit" id="install_button" class="btn btn-primary">
        Install & Configure <i class="fa-solid fa-gears" style="margin-left: 0.5rem;"></i>
      </button>
    </div>

    <div class="alert alert-danger install_msg hide" style="margin-top: 1.5rem; text-align: center;">
      <strong><i class="fa-solid fa-spinner fa-spin"></i> Installation in progress... Please do not refresh or close the
        browser.</strong>
    </div>

  </form>
@endsection

@section('javascript')
  <script type="text/javascript">
    $(document).ready(function () {
      // Handle SMTP toggle
      $('select#MAIL_MAILER').change(function () {
        var driver = $(this).val();
        if (driver == 'smtp') {
          $('div.smtp').removeClass('hide');
          $('div.smtp').find('input').attr('disabled', false);
        } else {
          $('div.smtp').addClass('hide');
          $('div.smtp').find('input').attr('disabled', true);
        }
      });

      // Handle Form Submit
      $('form#details_form').submit(function () {
        $('button#install_button').attr('disabled', true).html('<i class="fa-solid fa-spinner fa-spin"></i> Installing...');
        $('div.install_msg').removeClass('hide');
        $('.back_button').hide();
      });
    })
  </script>
@endsection