@extends('backend.layout.master-tailwind')
@section('title', __('Push Notification Settings'))

@section('content')

<div class="page">

  <div class="page-head">
    <div>
      <h1 class="page-title">{{ __('Push Notification Settings') }}</h1>
      <p class="page-sub">{{ __('Mobile app push notification configuration') }}</p>
    </div>
  </div>

  <div style="max-width:520px">

    <div class="card" style="padding:24px;display:flex;flex-direction:column;gap:16px">

      {{-- Info notice --}}
      <div style="background:color-mix(in oklch,var(--accent,#6366f1) 8%,transparent);border:1px solid color-mix(in oklch,var(--accent,#6366f1) 30%,transparent);border-radius:10px;padding:10px 14px;font-size:12px;color:var(--text-2);display:flex;gap:8px;align-items:flex-start">
        <svg class="icon" style="flex:none;margin-top:1px;color:var(--accent,#6366f1)" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v4"/><circle cx="12" cy="16" r=".6" fill="currentColor"/></svg>
        {{ __('To activate push notifications for the mobile app you must upload your Firebase JSON credentials file.') }}
      </div>

      {{-- Firebase file status --}}
      @if($firebaseFileExists)
      <div style="background:color-mix(in oklch,var(--success,#22c55e) 10%,transparent);border:1px solid color-mix(in oklch,var(--success,#22c55e) 35%,transparent);border-radius:10px;padding:10px 14px;font-size:12px;color:var(--success,#22c55e);display:flex;gap:8px;align-items:center">
        <svg class="icon" style="flex:none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
        {{ __('Firebase JSON file is already uploaded.') }}
      </div>
      @else
      <div style="background:color-mix(in oklch,var(--warning,#f59e0b) 10%,transparent);border:1px solid color-mix(in oklch,var(--warning,#f59e0b) 35%,transparent);border-radius:10px;padding:10px 14px;font-size:12px;color:color-mix(in oklch,var(--warning,#f59e0b) 80%,var(--text));display:flex;gap:8px;align-items:center">
        <svg class="icon" style="flex:none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l9 16H3z"/><path d="M12 10v4"/><circle cx="12" cy="17" r=".6" fill="currentColor"/></svg>
        {{ __('No Firebase JSON file uploaded yet. Please upload a new one.') }}
      </div>
      @endif

      {{-- Upload form --}}
      <form action="{{ route('admin.notification.settings') }}" method="POST" enctype="multipart/form-data" style="display:flex;flex-direction:column;gap:16px">
        @csrf

        @if($errors->any())
        <div style="background:color-mix(in oklch,var(--danger,#ef4444) 8%,transparent);border:1px solid color-mix(in oklch,var(--danger,#ef4444) 30%,transparent);border-radius:8px;padding:10px 14px;font-size:12px;color:var(--danger,#ef4444)">
          @foreach($errors->all() as $error)
          <div>{{ $error }}</div>
          @endforeach
        </div>
        @endif

        <div>
          <label class="field-label" for="firebase_json">{{ __('Upload Firebase JSON File') }}</label>
          <input type="file" name="firebase_json" id="firebase_json" accept=".json">
        </div>

        <div>
          <button type="submit" class="btn primary sm">{{ __('Upload File') }}</button>
        </div>

      </form>

    </div>

  </div>

</div>

@endsection

@section('admin_styles')
<style>
.field-label {
    display: block;
    font-size: 12px;
    color: var(--text-2);
    margin-bottom: 6px;
    font-weight: 500;
}

input[type="file"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

input[type="file"]:hover {
    border-color: var(--border-strong);
}

input[type="file"]:focus {
    outline: none;
    border-color: var(--accent, #6366f1);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent, #6366f1) 10%, transparent);
}

input[type="file"]::file-selector-button {
    background: var(--accent, #6366f1);
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    margin-right: 12px;
    transition: background 0.15s ease;
}

input[type="file"]::file-selector-button:hover {
    background: color-mix(in oklch, var(--accent, #6366f1) 85%, black);
}

input[type="file"]::file-selector-button:active {
    background: color-mix(in oklch, var(--accent, #6366f1) 75%, black);
}
</style>
@endsection