@extends('layouts.front')
@section('title', 'Apply - ')

@section('content')


<section id="portfolio" class="portfolio-section-1 mt-6">
  <div class="container">
    <div class="row-rm">
      
      <!-- Left Form Section -->
      <div class="col-rm-6">
        <p class="form-description">অভিযোগ ফরমের তারকা চিহ্নিত ঘরগুলো অবশ্যই পূরণ করতে হবে...</p>
        <form action="{{ route('apply-save') }}" method="POST" id="complaint-form" class="complaint-form bg-white p-5 rounded-lg shadow-lg">

          @csrf
          
          <label for="badi" class="form-label">আবেদনকারীর নাম, ঠিকানা ও মোবাইল নাম্বার<span>*</span></label>
          <div id="badi" class="editor mb-4"></div>
          <input type="hidden" name="badi" id="badi-hidden">

          <label for="bibadi" class="form-label">প্রতিপক্ষগণ (একাধিক হলে ১,২,৩... নাম্বার দিয়ে লিখুন)<span>*</span></label>
          <div id="bibadi" class="editor mb-4"></div>
          <input type="hidden" name="bibadi" id="bibadi-hidden">

          <label for="sakkhi" class="form-label">সাক্ষীগণ (একাধিক হলে ১,২,৩... নাম্বার দিয়ে লিখুন)</label>
          <div id="sakkhi" class="editor mb-4"></div>
          <input type="hidden" name="sakkhi" id="sakkhi-hidden">

          <label for="ovijog" class="form-label">অভিযোগের বর্ণনা <span>*</span></label>
          <div id="ovijog" class="editor mb-4 ovijog-editor"></div> <!-- Targeting ovijog editor -->
          <input type="hidden" name="ovijog" id="ovijog-hidden">

          <label for="sign" class="form-label">স্বাক্ষর (আবেদনকারীর নাম)</label>
          <div id="sign" class="editor mb-4"></div>
          <input type="hidden" name="sign" id="sign-hidden">
          
          <label for="document" class="form-label">আইডি কার্ড/পাসপোর্ট আপলোড করুন (PDF, JPG, PNG)<span>*</span></label>
          <input type="file" name="document" id="document" class="form-control mb-4" accept=".pdf, .jpg, .jpeg, .png">

          <button type="submit" class="btn btn-submit w-100">জমা দিন</button>
        </form>
        
        @if(session('success'))
          <p class="mt-3 text-success">{{ session('success') }}</p>
        @endif
      </div>

      <!-- Right Preview Section -->
      <div class="col-md-6">
        <p class="form-preview-title">আবেদন পত্রের লাইভ প্রিভিউ</p>
        
        <div class="bg-white p-5 rounded-lg shadow-lg lp">
          <p class="text-dark">তারিখ- <span id="bangla-date"></span> <br>
          বরাবর,<br>
          জেলা লিগ্যাল এইড অফিসার,<br>
          চাঁদপুর জেলা লিগ্যাল এইড অফিস, চাঁদপুর</p>
          
          <p><strong>বিষয়ঃ অভিযোগ</strong></p>
          
          <p><strong>প্রার্থীঃ</strong> <div class="rm-d" data-preview="badi"></div></p>
          
          <p><strong>প্রতিপক্ষগণঃ</strong> <div class="rm-d" data-preview="bibadi"></div></p>
          
          <p><strong>সাক্ষীগণঃ</strong> <div class="rm-d" data-preview="sakkhi"></div></p>
          
          <p>জনাব,
          <br>আমি নিম্ন স্বাক্ষরকারী এই মর্মে অভিযোগ দায়ের করিতেছি যে,
              <br>
              <div style="rm-d text-align: justify" data-preview="ovijog"></div>
          </p>
          <p>এমতাবস্থায় উপরোক্ত অবস্থা ও কারণাধীনে প্রয়োজনীয় আইনগত ব্যাবস্থা গ্রহণ করিতে আপনার সদয় মর্জি হয়।</p>
          <p></p>
          <p>নিবেদক</p>
          <p></p>
          <div data-preview="sign"></div>
        </div>
      </div>

    </div>
  </div>
</section>

<style>
  .mt-6 { margin-top: 6rem; }
  .form-description { font-size: 18px; font-weight: 500; color: #555; margin-bottom: 20px; }
  .form-preview-title { font-size: 18px; font-weight: 600; color: #333; margin-bottom: 20px; }

  /* Form Styling */
  .complaint-form {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

  .form-label {
    font-weight: 600;
    font-size: 14px;
    color: #333;
  }

  .form-label span {
    color: red;
  }

  .btn-submit {
    background: linear-gradient(135deg, #007bff, #00c6ff);
    border: none;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    padding: 8px;
    transition: background 0.3s ease;
    width: 100%;
}

  .btn-submit:hover {
    background: linear-gradient(135deg, #0056b3, #0082e6);
  }

  .lp {
    background: #f9f9f9;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* min-height: 450px; */
  }

  .lp p {
    font-size: 15px;
    line-height: 1.6;
    /* overflow: auto; */
  }

  /* Quill Editor Style */
  .ql-container.ql-snow {
    border-radius: 10px;
    border: 1px solid #ddd;
    min-height: 50px;
    font-size: 16px;
    padding: 0px;
  }

  .editor {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 10px;
    font-size: 16px;
  }

  .mb-4 { margin-bottom: 1.5rem !important; }

  /* Specific Style for Ovijog Field */
  .ovijog-editor {
    min-height: 150px !important; /* Increase the height of the Ovijog editor */
  }

  /* Overall form and preview sections */
  .bg-white {
    background: #fff !important;
  }

  .shadow-lg {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .rm-d {
    word-wrap: break-word;
  }

  @media (min-width: 768px) {
    .navbar-default {
        padding: 10px 0;
        border: 0;
        background-color: #222;
        
    }
  }

  .row-rm{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  @media (min-width: 992px) {

    .col-rm-6{
      width: 50%
      
    }

  }



</style>

<!-- Include Quill editor script -->
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>

<script>
  const editors = document.querySelectorAll('.editor');
  const form = document.getElementById('complaint-form');

  // Initialize Quill editors and set up live preview functionality
  editors.forEach(function (editor) {
      const quill = new Quill(editor, {
          theme: 'snow',
          modules: {
              toolbar: false // Disable the toolbar
          },
          placeholder: '',
          height: '50px', // Custom height for editor
      });

      // Set the content of the hidden input before form submission
      form.addEventListener('submit', function() {
          document.getElementById(editor.id + '-hidden').value = quill.root.innerHTML;
      });

      // Update the preview live as the user types
      quill.on('text-change', function() {
          const previewElement = document.querySelector(`[data-preview="${editor.id}"]`);
          if (previewElement) {
              previewElement.innerHTML = quill.root.innerHTML;
          }
      });
  });

  // Function to convert English numbers to Bangla
  function convertToBanglaDigits(number) {
        const banglaDigits = ['০', '১', '২', '৩', '৪', '৫', '৬', '৭', '৮', '৯'];
        return number.toString().replace(/\d/g, (digit) => banglaDigits[digit]);
    }

  // Get today's date and format it as dd/mm/yyyy
  const today = new Date();
  const day = convertToBanglaDigits(today.getDate());
  const month = convertToBanglaDigits(today.getMonth() + 1); // Months are 0-indexed in JS
  const year = convertToBanglaDigits(today.getFullYear());

  // Display the date in Bangla
  document.getElementById('bangla-date').innerText = `${day}/${month}/${year}`;
</script>

@endsection