Softpar
/
sfp_api_laravel_diarista


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639
							<!DOCTYPE html>
<html lang="pt-BR">

<head>

  <meta charset="UTF-8" />

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  />

  <title>
    {{ __('mail.service_completed.subject') }}
  </title>

  <!-- CSS -->

  <style>

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: Arial, Helvetica, sans-serif;
    }

    body {
      background: #f5f5f7;
      padding: 20px;
    }

    .email-container {
      max-width: 650px;
      margin: 0 auto;
      background: #ffffff;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    }

    /* HEADER */

    .header {
      background: linear-gradient(135deg, #7b2cff, #4d14d1);
      padding: 50px 30px 30px;
      color: white;
    }

    .header-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .header-text {
      flex: 1;
    }

    .title {
      font-size: 52px;
      font-weight: 800;
      line-height: 1;
      margin-bottom: 20px;
    }

    .subtitle {
      font-size: 20px;
      line-height: 1.5;
      opacity: 0.95;
    }

    .diarinho {
      width: 220px;
    }

    /* CONTENT */

    .content {
      padding: 30px;
      background: #f5f5f7;
    }

    /* STATUS */

    .success-card {
      background: white;
      border-radius: 22px;
      padding: 22px;
      display: flex;
      align-items: center;
      gap: 18px;
      margin-bottom: 24px;
    }

    .success-icon {
      width: 60px;
      height: 60px;
      border-radius: 999px;
      background: #4cd964;
      color: white;
      font-size: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
    }

    .success-title {
      font-size: 30px;
      color: #5a22d6;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .success-subtitle {
      color: #6b6b6b;
      font-size: 18px;
    }

    /* CARD */

    .card {
      background: white;
      border-radius: 24px;
      padding: 30px;
      margin-bottom: 24px;
    }

    .card-title {
      font-size: 34px;
      font-weight: 700;
      color: #5a22d6;
      margin-bottom: 30px;
    }

    .service-grid {
      display: flex;
      justify-content: space-between;
      gap: 25px;
    }

    .service-column {
      flex: 1;
    }

    .item {
      margin-bottom: 28px;
    }

    .item-label {
      color: #777;
      font-size: 15px;
      margin-bottom: 8px;
    }

    .item-value {
      color: #1f1f1f;
      font-size: 26px;
      font-weight: 700;
      line-height: 1.4;
    }

    .divider {
      width: 1px;
      background: #ececec;
    }

    /* PAYMENT */

    .payment-wrapper {
      display: flex;
      justify-content: space-between;
      gap: 25px;
      align-items: center;
    }

    .payment-total {
      flex: 1;
    }

    .payment-summary {
      margin-top: 18px;
    }

    .payment-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 18px;
    }

    .payment-row span {
      font-size: 18px;
      color: #666;
    }

    .payment-row strong {
      font-size: 22px;
      color: #1f1f1f;
    }

    .payment-final {
      border-top: 1px solid #ececec;
      padding-top: 22px;
      margin-top: 10px;

      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .payment-final-label {
      font-size: 24px;
      font-weight: 700;
      color: #5a22d6;
    }

    .payment-final-value {
      font-size: 42px;
      font-weight: 800;
      color: #5a22d6;
    }

    .payment-method {
      flex: 1;
    }

    .payment-badge {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      border: 1px solid #e5e5e5;
      padding: 14px 20px;
      border-radius: 16px;
      margin-top: 12px;
      font-size: 26px;
      font-weight: bold;
      color: #222;
    }

    .paid-status {
      margin-left: 15px;
      background: #dff7e7;
      color: #1ea75d;
      padding: 6px 14px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: bold;
    }

    /* FOOTER CARD */

    .footer-card {
      background: #f1ebff;
      border-radius: 24px;
      padding: 25px;
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 24px;
    }

    .footer-diarinho {
      width: 120px;
    }

    .footer-title {
      font-size: 36px;
      color: #5a22d6;
      font-weight: 700;
      margin-bottom: 10px;
    }

    .footer-text {
      color: #666;
      line-height: 1.7;
      font-size: 18px;
    }

    /* FOOTER */

    .footer {
      background: linear-gradient(135deg, #5d1ce0, #3f0fb3);
      padding: 35px 30px;
      color: white;
    }

    .footer-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }

    .footer-app {
      font-size: 30px;
      font-weight: 700;
      color: #6de0ff;
    }

    .footer-help {
      text-align: right;
      font-size: 18px;
      line-height: 1.6;
    }

    .footer-bottom {
      margin-top: 25px;
      text-align: center;
      font-size: 14px;
      opacity: 0.7;
    }

    /* RESPONSIVE */

    @media(max-width: 640px) {

      .header-content,
      .service-grid,
      .payment-wrapper,
      .footer-card {
        flex-direction: column;
      }

      .divider {
        width: 100%;
        height: 1px;
      }

      .title {
        font-size: 42px;
      }

      .diarinho {
        width: 160px;
      }

      .card-title {
        font-size: 28px;
      }

      .item-value {
        font-size: 22px;
      }

      .payment-final {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }

      .footer-help {
        text-align: left;
      }
    }

  </style>

</head>

<body>

<div class="email-container">

  <!-- HEADER -->

  <div class="header">

    <div class="header-content">

      <div class="header-text">

        <div class="title">
          {{ __('mail.service_completed.title') }}
        </div>

        <div class="subtitle">
          {{ __('mail.service_completed.subtitle') }}
        </div>

      </div>

      <img
        src="{{ asset('images/diarinho.png') }}"
        class="diarinho"
        alt="Diarinho"
      />

    </div>

  </div>

  <!-- CONTENT -->

  <div class="content">

    <!-- STATUS -->

    <div class="success-card">

      <div class="success-icon">
        ✓
      </div>

      <div>

        <div class="success-title">
          {{ __('mail.service_completed.payment_confirmed') }}
        </div>

        <div class="success-subtitle">
          {{ __('mail.service_completed.payment_confirmed_subtitle') }}
        </div>

      </div>

    </div>

    <!-- SERVICE -->

    <div class="card">

      <div class="card-title">
        {{ __('mail.service_completed.service_resume') }}
      </div>

      <div class="service-grid">

        <div class="service-column">

          <div class="item">

            <div class="item-label">
              {{ __('mail.service_completed.client') }}
            </div>

            <div class="item-value">
              {{ $client_name }}
            </div>

          </div>

          <div class="item">

            <div class="item-label">
              {{ __('mail.service_completed.service_date') }}
            </div>

            <div class="item-value">
              {{ \Carbon\Carbon::parse($service_date)->format('d/m/Y') }}
            </div>

          </div>

          <div class="item">

            <div class="item-label">
              {{ __('mail.service_completed.service_time') }}
            </div>

            <div class="item-value">
              {{ substr($start_time, 0, 5) }}
              às
              {{ substr($end_time, 0, 5) }}
            </div>

          </div>

        </div>

        <div class="divider"></div>

        <div class="service-column">

          <div class="item">

            <div class="item-label">
              {{ __('mail.service_completed.service_address') }}
            </div>

            <div class="item-value">
              {{ $address }}
            </div>

          </div>

        </div>

      </div>

    </div>

    <!-- PAYMENT -->

    <div class="card">

      <div class="card-title">
        {{ __('mail.service_completed.payment_title') }}
      </div>

      <div class="payment-wrapper">

        <div class="payment-total">

          <div class="payment-summary">

            <div class="payment-row">

              <span>
                {{ __('mail.service_completed.total_amount') }}
              </span>

              <strong>
                {{ __('mail.service_completed.currency') }}
                {{ number_format($total_amount, 2, ',', '.') }}
              </strong>

            </div>

            <div class="payment-row">

              <span>
                {{ __('mail.service_completed.service_fee') }}
              </span>

              <strong>
                {{ __('mail.service_completed.currency') }}
                {{ number_format($service_fee, 2, ',', '.') }}
              </strong>

            </div>

            <div class="payment-final">

              <span class="payment-final-label">
                {{ __('mail.service_completed.final_amount') }}
              </span>

              <span class="payment-final-value">
                {{ __('mail.service_completed.currency') }}
                {{ number_format($final_amount, 2, ',', '.') }}
              </span>

            </div>

          </div>

        </div>

        <div class="divider"></div>

        <div class="payment-method">

          <div class="item-label">
            {{ __('mail.service_completed.payment_method') }}
          </div>

          <div class="payment-badge">

            {{ $payment_method }}

            <span class="paid-status">
              {{ __('mail.service_completed.paid') }}
            </span>

          </div>

        </div>

      </div>

    </div>

    <!-- FOOTER CARD -->

    <div class="footer-card">

      <img
        src="{{ asset('images/diarinho.png') }}"
        class="footer-diarinho"
        alt="Diarinho"
      />

      <div>

        <div class="footer-title">
          {{ __('mail.service_completed.footer_title') }}
        </div>

        <div class="footer-text">
          {{ __('mail.service_completed.footer_description') }}
        </div>

      </div>

    </div>

  </div>

  <!-- FOOTER -->

  <div class="footer">

    <div class="footer-content">

      <div>

        <div class="footer-app">
          Diária App
        </div>

      </div>

      <div class="footer-help">

        {{ __('mail.service_completed.footer_help') }}<br>

        {{ __('mail.service_completed.footer_contact') }}<br>

        (11) 99999-9999

      </div>

    </div>

    <div class="footer-bottom">
      {{ __('mail.service_completed.footer_note') }}
    </div>

  </div>

</div>

</body>

</html>