@extends('layouts.app')
@section('title', 'Depletion Job Import')
@section('content')
   <div class="row justify-content-center">
      <div class="col-md-12 mt-4">
         <div class="card">
            <div class="card-body">
               <h2>Depletion Job Import</h2>
               @if (session('error') || $errors->any())
               <div class="alert alert-danger" role="alert">
                  @if (session('error'))
                  <div class="mb-2">{{ session('error') }}</div>
                  @endif
                  @foreach ($errors->all() as $error)
                  <div class="mb-1">{!! $error !!}</div>
                  @endforeach
               </div>
               @endif
               @if (session('success'))
               <div class="alert alert-success" role="alert">
                  {{ session('success') }}
               </div>
               @endif
               
               <form action="{{ route('depletion.import') }}" method="POST" enctype="multipart/form-data">
                  @csrf
                  <div class="form-group">
                     <label for="file-input">Choose File:</label>
                     <input type="file" id="file-input" name="file" accept=".xlsx" class="form-control" required>
                  </div>
                  <button type="submit" class="btn btn-primary" style="background-color: var(--Brand-1); border-color: var(--Brand-1);">Import</button>
               </form>
               <div class="mt-3">
                  <a href="{{ asset('files/depletion_plan_import_template.xlsx') }}" class="btn btn-primary" id="download-sample" style="background-color: var(--Brand-1); border-color: var(--Brand-1);">
                  <i class="bi bi-download"></i> Download Sample File
                  </a>
               </div>
               <div class="alert alert-info mt-3">
                  <h4>Instructions for Depletion Job Import</h4>
                  {{-- <ul>
                     <li>Prepare your Excel file with the following columns:</li>
                     <ul>
                        <li><strong>Policy Ref Number</strong>: The reference number of the policy.</li>
                        <li><strong>Premium Paid Date</strong>: The date when the premium was paid (format: dd-mm-yyyy).</li>
                        <li><strong>Total Premium to be Paid</strong>: The pending amount of premium to be paid.</li>
                        <li><strong>Premium Paid</strong>: The amount actually paid as premium.</li>
                     </ul>
                     <li>Ensure the Excel file is saved in either .xlsx or .xls format.</li>
                     <li>Use the provided upload form to select your Excel file.</li>
                     <li>Click the "Upload" button to import the cash payment data.</li>
                  </ul> --}}
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
@endsection
@push('js')
<script>
   document.addEventListener('DOMContentLoaded', function () {
          var alerts = document.querySelectorAll('.alert-dismissible');
   
          setTimeout(function() {
              alerts.forEach(function(alert) {
                  alert.classList.add('fade-out');              
                  alert.addEventListener('transitionend', function() {
                      alert.remove();
                  });
              });
          }, 5000);
      });
   
      var style = document.createElement('style');
      style.innerHTML = `
          .fade-out {
              opacity: 0;
              transition: opacity 1s ease-out;
          }
      `;
      document.head.appendChild(style);
</script>
<style>
   .jq-toast-wrap.top-right {
   display: none;
   }
</style>
@endpush