<x-admin-layout>
@section('title', $page . ' | ' . get_setting('site_name'))
  <div class="mt-4 grid grid-cols-12 gap-4 sm:mt-5 sm:gap-5 lg:mt-6 lg:gap-6">
    <div class="col-span-12">
      <div class="card px-4 pb-4 sm:px-5">
        <div class="space-y-4">
            <h2 class="text-2xl font-semibold text-slate-600 dark:text-navy-100 mt-4 mb-4">
                {{ $page }}
            </h2>
            @if(session('success'))
              <div class="alert flex items-center overflow-hidden rounded-lg border border-success text-success">
                <div class="px-4 py-3 sm:px-5">
                    <strong>{{ session('success') }}</strong>
                </div>
              </div>
            @endif
            @if(session('error'))
              <div class="alert flex items-center overflow-hidden rounded-lg border border-error text-error">
                <div class="px-4 py-3 sm:px-5">
                    <strong>{{ session('error') }}</strong>
                </div>
              </div>
            @endif
        </div>
        <form action="/admin/settings/update?route=ptc" method="POST" class="mt-4">
          @csrf
          <div class="space-y-4">
            <div>
              <label class="block text-sm font-medium py-3">PTC Status</label>
              <div class="flex items-center space-x-3">
                <span class="text-sm">Off</span>
                <label class="inline-flex items-center space-x-2">
                  <input type="hidden" name="ptc_status" value="off" />
                  <input
                    id="ptc_status"
                    name="ptc_status"
                    type="checkbox"
                    value="on"
                    @checked(get_setting('ptc_status') == 'on')
                    class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
                  />
                </label>
                <span class="text-sm">On</span>
              </div>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 items-center">
                <div> 
                  <label class="block text-sm font-medium py-3">Price per second (Iframe):</label>
                  <input id="ptc_iframe_price" name="ptc_iframe_price" type="number" step="0.000001" value="{{ get_setting('ptc_iframe_price') }}" class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" />
                </div>
                <div> 
                  <label class="block text-sm font-medium py-3">Price per second (Window):</label>
                  <input id="ptc_window_price" name="ptc_window_price" type="number" step="0.000001" value="{{ get_setting('ptc_window_price') }}" class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" />
                </div>
                <div> 
                  <label class="block text-sm font-medium py-3">Admin Profit (%):</label>
                  <input id="ptc_revenue_share" name="ptc_revenue_share" type="number" step="1" value="{{ get_setting('ptc_revenue_share') }}" class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" />
                </div>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 items-center">
                <div> 
                  <label class="block text-sm font-medium py-3">Minimum Timer (Second):</label>
                  <input id="ptc_min_timer" name="ptc_min_timer" type="number" step="1" value="{{ get_setting('ptc_min_timer') }}" class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" />
                </div>
                <div> 
                  <label class="block text-sm font-medium py-3">Maximum Timer (Second):</label>
                  <input id="ptc_max_timer" name="ptc_max_timer" type="number" step="1" value="{{ get_setting('ptc_max_timer') }}" class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" />
                </div>
                <div> 
                  <label class="block text-sm font-medium py-3">Minimum Views:</label>
                  <input id="ptc_min_views" name="ptc_min_views" type="number" step="1" value="{{ get_setting('ptc_min_views') }}" class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" />
                </div>
            </div>
            <button type="submit" class="btn space-x-2 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">Save</button>
          </div>
        </form>

      </div>
    </div>
  </div>
</x-admin-layout>