@extends('layouts.admin')

@section('title', 'Edit Year Folder')

@section('content')
<style>
  :root {
    --primary-gradient: linear-gradient(135deg, #4e54c8 0%, #8f94fb 100%);
  }
  .edit-container {
    max-width: 700px;
    margin: 0 auto;
  }
  .card-modern {
    border: none;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
    overflow: hidden;
  }
  .card-header-modern {
    background: var(--primary-gradient);
    color: white;
    padding: 2.5rem 2rem;
    text-align: center;
  }
  .card-header-modern i {
    font-size: 3rem;
    opacity: 0.9;
    margin-bottom: 1rem;
    display: block;
  }
  .form-floating-lg label {
    font-size: 1.05rem;
    font-weight: 500;
  }
  .form-control-modern, .form-select-modern {
    border-radius: 12px !important;
    border: 2px solid #e9ecef !important;
    padding: 1rem 1.25rem !important;
    height: 68px;
    font-size: 1rem;
    transition: all 0.3s ease;
  }
  .form-control-modern:focus, .form-select-modern:focus {
    border-color: var(--primary-gradient) !important;
    box-shadow: 0 0 0 0.25rem rgba(78, 84, 200, 0.1) !important;
  }
  .btn-modern {
    border-radius: 12px;
    font-weight: 600;
    padding: 0.875rem 2rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: none;
  }
  .btn-primary-modern {
    background: var(--primary-gradient);
    box-shadow: 0 6px 20px rgba(78, 84, 200, 0.3);
  }
  .btn-primary-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(78, 84, 200, 0.4);
  }
  .btn-secondary-modern {
    background: #6c757d;
    color: white;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
  }
  .btn-secondary-modern:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(108, 117, 125, 0.4);
    color: white;
  }
  .back-section {
    margin-bottom: 2rem;
  }
  .page-title {
    font-size: 2.25rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-gradient));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
</style>

<div class="container-fluid py-5">
  <!-- Back & Title -->
  <div class="back-section">
    <div class="d-flex align-items-center gap-3 mb-4">
      <a href="{{ route('year-folders.index') }}" class="btn btn-outline-secondary btn-modern px-4 py-2 shadow-sm">
        <i class="bi bi-arrow-left me-2"></i>Years List
      </a>
      <div>
        <h1 class="page-title mb-1">
          Edit Year {{ $yearFolder->display_year ?? $yearFolder->year }}
        </h1>
        <p class="text-muted mb-0">Update financial year details for <strong>{{ $yearFolder->company->name ?? 'N/A' }}</strong></p>
      </div>
    </div>
  </div>

  <!-- Main Form Card -->
  <div class="edit-container">
    <div class="card-modern">
      <div class="card-header-modern">
        <i class="bi bi-calendar-check-fill"></i>
        <h3 class="mb-1 fw-bold">Financial Year Details</h3>
        <p class="mb-0 opacity-90">All fields are required</p>
      </div>
      
      <div class="card-body p-5">
        <form action="{{ route('year-folders.update', $yearFolder) }}" method="POST">
          @csrf @method('PUT')

          <div class="row g-4">
            <!-- Year Field -->
            <div class="col-lg-6">
              <div class="form-floating form-floating-lg">
                <input type="number" 
                       class="form-control form-control-modern @error('year') is-invalid @enderror" 
                       id="yearInput" 
                       name="year" 
                       value="{{ old('year', $yearFolder->year) }}" 
                       min="2000" 
                       max="2100" required>
                <label for="yearInput">
                  <i class="bi bi-calendar3 me-2 text-primary"></i>Financial Year
                </label>
                @error('year')
                  <div class="invalid-feedback">{{ $message }}</div>
                @enderror
              </div>
            </div>

            <!-- Company Field -->
            <div class="col-lg-6">
              <div class="form-floating form-floating-lg">
                <select class="form-select form-select-modern @error('company_id') is-invalid @enderror" 
                        id="companyInput" 
                        name="company_id" required>
                  <option value="">Select Company</option>
                  @foreach($companies as $company)
                    <option value="{{ $company->id }}" {{ old('company_id', $yearFolder->company_id) == $company->id ? 'selected' : '' }}>
                      {{ $company->name }}
                    </option>
                  @endforeach
                </select>
                <label for="companyInput">
                  <i class="bi bi-building me-2 text-primary"></i>Company Name
                </label>
                @error('company_id')
                  <div class="invalid-feedback">{{ $message }}</div>
                @enderror
              </div>
            </div>
          </div>

          <!-- Action Buttons -->
          <div class="d-flex gap-3 justify-content-end mt-5 pt-4 border-top">
            <a href="{{ route('year-folders.index') }}" class="btn btn-secondary-modern btn-modern px-5 py-3">
              <i class="bi bi-arrow-left me-2"></i>Cancel
            </a>
            <button type="submit" class="btn btn-primary-modern btn-modern px-5 py-3">
              <i class="bi bi-check-lg me-2"></i>Update Year Folder
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Live validation
  const yearInput = document.getElementById('yearInput');
  const companyInput = document.getElementById('companyInput');
  
  yearInput.addEventListener('input', function() {
    if (this.value && this.value >= 2000 && this.value <= 2100) {
      this.classList.remove('is-invalid');
      this.classList.add('is-valid');
    } else {
      this.classList.remove('is-valid');
      this.classList.add('is-invalid');
    }
  });

  companyInput.addEventListener('change', function() {
    if (this.value) {
      this.classList.remove('is-invalid');
      this.classList.add('is-valid');
    } else {
      this.classList.remove('is-valid');
      this.classList.add('is-invalid');
    }
  });

  // Form submit confirmation
  document.querySelector('form').addEventListener('submit', function() {
    if (!yearInput.value || !companyInput.value) {
      event.preventDefault();
      Swal.fire({
        icon: 'warning',
        title: 'Complete All Fields',
        text: 'Please fill year and company before submitting.',
        confirmButtonColor: '#4e54c8'
      });
    }
  });
});
</script>
@endsection