source: petify-frontend/src/views/ClinicApplicationView.vue

<template>
  <main class="application-page">
    <section class="application-hero">
      <div class="container hero-inner">
        <div class="hero-copy">
          <p class="eyebrow">Petify clinics</p>
          <h1>Apply as a vet clinic</h1>
          <p>
            Send your clinic details to the Petify admins. Once approved, your clinic can manage appointments,
            availability, cancellations, and client visit outcomes from the clinic dashboard.
          </p>
        </div>
        <div class="review-note">
          <span class="note-label">Admin review</span>
          <strong>Applications start as pending</strong>
          <p>Admins can approve or deny them from the Clinics tab.</p>
        </div>
      </div>
    </section>

    <section class="container application-body">
      <div class="form-shell">
        <div class="form-heading">
          <h2>Clinic information</h2>
          <p>Use details patients can recognize. Email or phone is required.</p>
        </div>

        <form class="application-form" @submit.prevent="submit">
          <div class="form-grid">
            <div class="form-group wide">
              <label for="clinicName">Clinic name *</label>
              <input
                id="clinicName"
                v-model.trim="form.name"
                class="form-control"
                type="text"
                placeholder="Happy Paws Clinic"
                required
              />
            </div>

            <div class="form-group">
              <label for="clinicEmail">Email</label>
              <input
                id="clinicEmail"
                v-model.trim="form.email"
                class="form-control"
                type="email"
                placeholder="clinic@example.com"
              />
            </div>

            <div class="form-group">
              <label for="clinicPhone">Phone</label>
              <input
                id="clinicPhone"
                v-model.trim="form.phone"
                class="form-control"
                type="tel"
                placeholder="+389 70 000 000"
              />
            </div>

            <div class="form-group">
              <label for="clinicCity">City *</label>
              <input
                id="clinicCity"
                v-model.trim="form.city"
                class="form-control"
                type="text"
                placeholder="Skopje"
                required
              />
            </div>

            <div class="form-group">
              <label for="clinicAddress">Address *</label>
              <input
                id="clinicAddress"
                v-model.trim="form.address"
                class="form-control"
                type="text"
                placeholder="Partizanska 12"
                required
              />
            </div>
          </div>

          <div v-if="errorMessage" class="alert alert-danger">
            {{ errorMessage }}
          </div>

          <div v-if="successMessage" class="alert alert-success">
            {{ successMessage }}
          </div>

          <div class="form-actions">
            <button class="btn btn-primary" type="submit" :disabled="isSubmitting">
              <span v-if="isSubmitting" class="spinner-border spinner-border-sm me-2"></span>
              {{ isSubmitting ? 'Submitting...' : 'Submit application' }}
            </button>
            <button class="btn btn-outline-secondary" type="button" :disabled="isSubmitting" @click="resetForm">
              Reset
            </button>
          </div>
        </form>
      </div>
    </section>
  </main>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { submitClinicApplication } from '../api/clinicApplications'

const emptyForm = {
  name: '',
  email: '',
  phone: '',
  city: '',
  address: '',
}

const form = ref({ ...emptyForm })
const isSubmitting = ref(false)
const errorMessage = ref('')
const successMessage = ref('')

function validateForm(): string {
  if (!form.value.name.trim()) return 'Clinic name is required'
  if (!form.value.city.trim()) return 'City is required'
  if (!form.value.address.trim()) return 'Address is required'
  if (!form.value.email.trim() && !form.value.phone.trim()) return 'Email or phone is required'
  return ''
}

async function submit() {
  const validationError = validateForm()
  if (validationError) {
    errorMessage.value = validationError
    successMessage.value = ''
    return
  }

  try {
    isSubmitting.value = true
    errorMessage.value = ''
    successMessage.value = ''
    const application = await submitClinicApplication(form.value)
    successMessage.value = `Application submitted. Your status is ${application.status || 'PENDING'}.`
    form.value = { ...emptyForm }
  } catch (error) {
    errorMessage.value = error instanceof Error ? error.message : 'Failed to submit application'
  } finally {
    isSubmitting.value = false
  }
}

function resetForm() {
  form.value = { ...emptyForm }
  errorMessage.value = ''
  successMessage.value = ''
}
</script>

<style scoped>
.application-page {
  min-height: calc(100vh - 72px);
  background: #f7f5f2;
  color: #1f2933;
}

.application-hero {
  background:
    linear-gradient(135deg, rgba(31, 41, 51, 0.82), rgba(60, 78, 88, 0.68)),
    url('https://images.unsplash.com/photo-1628009368231-7bb7cfcb0def?auto=format&fit=crop&w=1800&q=80');
  background-position: center;
  background-size: cover;
  color: #ffffff;
}

.hero-inner {
  min-height: 360px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px;
  align-items: end;
  padding-top: 72px;
  padding-bottom: 46px;
}

.hero-copy {
  max-width: 720px;
}

.eyebrow {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fed7aa;
}

.hero-copy h1 {
  margin: 0;
  font-size: clamp(2.35rem, 5vw, 4.7rem);
  line-height: 0.95;
  font-weight: 850;
}

.hero-copy p {
  margin: 20px 0 0;
  max-width: 620px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.04rem;
  line-height: 1.65;
}

.review-note {
  align-self: end;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(12px);
  border-radius: 8px;
}

.note-label {
  display: inline-block;
  margin-bottom: 10px;
  color: #fed7aa;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.review-note strong {
  display: block;
  font-size: 1.05rem;
}

.review-note p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.82);
}

.application-body {
  padding-top: 34px;
  padding-bottom: 64px;
}

.form-shell {
  max-width: 940px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(31, 41, 51, 0.08);
  padding: 28px;
}

.form-heading {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid #edf0f2;
  padding-bottom: 18px;
  margin-bottom: 22px;
}

.form-heading h2 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
}

.form-heading p {
  max-width: 340px;
  margin: 0;
  color: #667085;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.form-group.wide {
  grid-column: 1 / -1;
}

.form-group label {
  display: block;
  margin-bottom: 7px;
  color: #344054;
  font-weight: 700;
  font-size: 0.92rem;
}

.form-control {
  min-height: 46px;
  border-radius: 8px;
}

.alert {
  margin-top: 18px;
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}

.btn {
  border-radius: 8px;
  font-weight: 700;
}

.btn-primary {
  background: #f97316;
  border-color: #f97316;
}

.btn-primary:hover {
  background: #ea580c;
  border-color: #ea580c;
}

@media (max-width: 768px) {
  .hero-inner {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 48px;
  }

  .review-note {
    max-width: 420px;
  }

  .form-heading,
  .form-actions {
    flex-direction: column;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }
}
</style>