@extends('layouts.base')

@section('title', 'කොළඹ මහා නගර සභා - ශිෂ්‍ය පාසල් ආධාර 2026')

@push('styles')
<style>
    :root {
    --gold: #C9A84C;
    --gold-light: #E8C97A;
    --gold-pale: #F9F2E1;
    --deep: #1A2340;
    --deep-mid: #243055;
    --mid: #3D5080;
    --accent: #7B9EC8;
    --white: #FFFFFF;
    --off-white: #F7F5F0;
    --border: #D6C9A8;
    --text: #2C3A5A;
    --text-light: #5A6A8A;
    --success: #2E7D52;
    --shadow-sm: 0 2px 10px rgba(26,35,64,0.07);
    --radius: 14px;
    --radius-sm: 8px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: 'Noto Sans Sinhala', sans-serif;
    background: linear-gradient(135deg, #0F1A30 0%, #1A2F52 50%, #0F2040 100%);
    min-height: 100vh;
    padding: 40px 20px;
    color: var(--text);
  }

  .page-wrapper {margin: 0 auto; }
  /* max-width: 860px; */

  /* ── HEADER ── */
  .form-header {
    background: linear-gradient(135deg, var(--deep) 0%, var(--deep-mid) 100%);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 30px 40px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    overflow: hidden;
    border-bottom: 3px solid var(--gold);
  }
  .form-header::before {
    content:''; position:absolute; top:-60px; right:-60px;
    width:220px; height:220px; border-radius:50%;
    background:radial-gradient(circle,rgba(201,168,76,.15) 0%,transparent 70%);
  }
  .header-logo {
    width:72px; height:72px;
    background:linear-gradient(135deg,var(--gold) 0%,var(--gold-light) 100%);
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:32px; flex-shrink:0;
    box-shadow:0 0 0 4px rgba(201,168,76,.25),0 8px 24px rgba(0,0,0,.3);
    position:relative; z-index:1;
  }
  .header-text { position:relative; z-index:1; flex:1; }
  .header-text .org-name {
    color:var(--gold-light); font-size:11px; font-weight:500;
    letter-spacing:1px; text-transform:uppercase; margin-bottom:3px; opacity:.9;
  }
  .header-text h1 {
    color:var(--white); font-size:19px; font-weight:700; line-height:1.35; margin-bottom:4px;
  }
  .header-text .subtitle { color:var(--gold); font-size:13px; font-weight:500; line-height:1.5; }

  /* top-right ref boxes */
  .form-number-badge {
    margin-left:auto; display:flex; flex-direction:column;
    gap:8px; position:relative; z-index:2; flex-shrink:0;
  }
  .ref-row { display:flex; align-items:center; gap:8px; }
  .ref-row .ref-label {
    color:var(--gold-light); font-size:11px; font-weight:600;
    white-space:nowrap; opacity:.85; letter-spacing:.5px; min-width:44px; text-align:right;
  }
  .ref-box {
    background:rgba(255,255,255,.08); border:1.5px solid rgba(201,168,76,.45);
    border-radius:6px; color:var(--gold); font-family:'Noto Sans Sinhala',sans-serif;
    font-size:13px; font-weight:600; padding:6px 12px; min-width:96px; width:96px;
    outline:none; text-align:center; transition:border-color .2s,background .2s;
  }
  .ref-box-display {
    background:rgba(255,255,255,.08); border:1.5px solid rgba(201,168,76,.45);
    border-radius:6px; color:var(--gold); font-family:'Noto Sans Sinhala',sans-serif;
    font-size:13px; font-weight:600; padding:6px 12px; min-width:96px; width:96px;
    text-align:center; opacity:.85;
  }
  .ref-box:focus { border-color:var(--gold); background:rgba(255,255,255,.13); }
  .ref-box[readonly] { cursor:default; opacity:.75; }
  .ref-box[readonly]:focus { border-color:rgba(201,168,76,.45); background:rgba(255,255,255,.08); box-shadow:none; }
  .ref-box::placeholder { color:rgba(201,168,76,.35); font-weight:400; }
  .ref-box.wide { min-width:168px; width:168px; }
  .ref-box.division { min-width:140px; width:140px; }
  .division-input {
    background:white; border:1.5px solid var(--border); border-radius:var(--radius-sm);
    padding:11px 15px; font-family:'Noto Sans Sinhala',sans-serif;
    font-size:13.5px; color:var(--text); width:140px;
    transition:border-color .2s,box-shadow .2s; outline:none; text-align:center;
  }
  .division-input:focus { border-color:var(--mid); box-shadow:0 0 0 3px rgba(61,80,128,.1); }
  .division-input.is-invalid { border-color:#C0392B; box-shadow:0 0 0 3px rgba(192,57,43,.12); }
  .ref-box.date-box { width:140px; }

  /* ── PROGRESS ── */
  .progress-barX { background:var(--deep); padding:0 40px; display:flex; }
  .progress-step {
    flex:1; padding:13px 8px; text-align:center; font-size:11px; font-weight:600;
    color:rgba(255,255,255,.4); cursor:pointer; border-bottom:3px solid transparent;
    transition:all .3s; letter-spacing:.4px;
  }
  .progress-step.active { color:var(--gold); border-bottom-color:var(--gold); }
  .progress-step.done  { color:var(--accent); border-bottom-color:var(--accent); }

  /* ── SECTIONS ── */
  .form-section { display:none; padding:32px 40px; animation:fadeSlide .4s ease; }
  .form-section.active { display:block; }
  @keyframes fadeSlide { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

  .section-title {
    display:flex; align-items:center; gap:12px;
    margin-bottom:24px; padding-bottom:14px; border-bottom:2px solid var(--border);
  }
  .section-num {
    width:34px; height:34px;
    background:linear-gradient(135deg,var(--deep) 0%,var(--mid) 100%);
    color:var(--gold); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:14px; flex-shrink:0;
    box-shadow:0 3px 10px rgba(26,35,64,.2);
  }
  .section-title h2 { font-size:16px; font-weight:700; color:var(--deep); }

  /* grids */
  .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
  .grid-4 { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:14px; }
  .col-full { grid-column:1/-1; }
  .col-2   { grid-column:span 2; }
  .col-3   { grid-column:span 3; }

  /* card */
  .card {
    background:white; border-radius:var(--radius-sm); padding:18px;
    margin-bottom:18px; box-shadow:var(--shadow-sm); border:1px solid var(--border);
  }
  .card-title {
    font-size:12px; font-weight:700; color:var(--mid);
    letter-spacing:.5px; margin-bottom:14px;
    display:flex; align-items:center; gap:8px;
  }
  .card-title::before {
    content:''; width:4px; height:14px;
    background:linear-gradient(to bottom,var(--gold),var(--accent)); border-radius:2px;
  }

  /* field */
  .field { display:flex; flex-direction:column; gap:5px; }
  .field label { font-size:11.5px; font-weight:600; color:var(--text-light); letter-spacing:.2px; }
  .req { color:#C0392B; font-weight:700; margin-left:2px; }
  .loan-table th .req { color:#C0392B; font-weight:700; margin-left:2px; }
  .field input,.field select,.field textarea {
    background:white; border:1.5px solid var(--border); border-radius:var(--radius-sm);
    padding:11px 15px; font-family:'Noto Sans Sinhala',sans-serif;
    font-size:13.5px; color:var(--text);
    transition:border-color .2s,box-shadow .2s; outline:none; width:100%;
    min-height:44px;
  }
  .field input:focus,.field select:focus,.field textarea:focus {
    border-color:var(--mid); box-shadow:0 0 0 3px rgba(61,80,128,.1);
  }
  .field textarea { resize:vertical; min-height:75px; }
  .field .field-error {
    color:#C0392B; font-size:12px; font-weight:600; line-height:1.4; margin-top:2px;
  }
  .field:has(.field-error) input,
  .field:has(.field-error) select,
  .field:has(.field-error) textarea,
  .field:has(.is-invalid) input,
  .field:has(.is-invalid) select,
  .field:has(.is-invalid) textarea {
    border-color:#C0392B; box-shadow:0 0 0 3px rgba(192,57,43,.12);
  }
  .is-invalid { border-color:#C0392B !important; box-shadow:0 0 0 3px rgba(192,57,43,.12) !important; }
  .field:has(.is-invalid) .sig-pad-wrap,
  .sig-pad-wrap.is-invalid {
    border-color:#C0392B; box-shadow:0 0 0 3px rgba(192,57,43,.12);
  }
  .radio-group.is-invalid,
  .checkbox-option.is-invalid {
    outline:2px solid rgba(192,57,43,.35); outline-offset:2px; border-radius:100px;
  }
  .loan-table td .field-error {
    display:block; color:#C0392B; font-size:10px; font-weight:600;
    line-height:1.3; margin-top:4px;
  }
  .loan-table td input.is-invalid {
    border-bottom:1.5px solid #C0392B !important; background:rgba(192,57,43,.04);
  }
  .field select {
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6A8A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 13px center; padding-right:36px;
  }

  /* radio / checkbox */
  .radio-group,.checkbox-group { display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }
  .radio-option,.checkbox-option {
    display:flex; align-items:center; gap:7px; cursor:pointer;
    padding:7px 13px; border-radius:100px; border:1.5px solid var(--border);
    background:white; transition:all .2s; font-size:13px; color:var(--text); font-weight:500;
  }
  .radio-option:has(input:checked),.checkbox-option:has(input:checked) {
    border-color:var(--mid); background:rgba(61,80,128,.06); color:var(--deep);
  }
  .radio-option input,.checkbox-option input { display:none; }
  .radio-dot {
    width:15px; height:15px; border-radius:50%; border:2px solid var(--border);
    display:flex; align-items:center; justify-content:center; transition:all .2s; flex-shrink:0;
  }
  .radio-option:has(input:checked) .radio-dot { border-color:var(--mid); background:var(--mid); }
  .radio-option:has(input:checked) .radio-dot::after {
    content:''; width:5px; height:5px; border-radius:50%; background:white;
  }
  .check-sq {
    width:15px; height:15px; border-radius:3px; border:2px solid var(--border);
    display:flex; align-items:center; justify-content:center; transition:all .2s; flex-shrink:0;
    font-size:10px; color:transparent;
  }
  .checkbox-option:has(input:checked) .check-sq {
    border-color:var(--mid); background:var(--mid); color:white;
  }

  /* table */
  .loan-table { width:100%; border-collapse:collapse; }
  .loan-table th {
    background:var(--deep); color:var(--gold-light);
    padding:9px 11px; font-size:11.5px; font-weight:600; text-align:left; letter-spacing:.3px;
  }
  .loan-table th:first-child { border-radius:var(--radius-sm) 0 0 0; }
  .loan-table th:last-child  { border-radius:0 var(--radius-sm) 0 0; }
  .loan-table td { padding:9px 11px; border-bottom:1px solid var(--border); font-size:13px; }
  .loan-table tr:nth-child(even) td { background:var(--gold-pale); }
  .loan-table tr:last-child td { border-bottom:none; }
  .loan-table td input {
    border:none; background:transparent; font-family:'Noto Sans Sinhala',sans-serif;
    font-size:13px; color:var(--text); width:100%; outline:none;
    padding:4px 0; border-bottom:1px dashed var(--border); min-width:48px;
  }
  /* info note */
  .info-note {
    background:rgba(61,80,128,.06); border-left:3px solid var(--accent);
    border-radius:0 var(--radius-sm) var(--radius-sm) 0;
    padding:11px 14px; font-size:12px; color:var(--text-light); line-height:1.7; margin:14px 0;
  }

  /* signature */
  .signature-row { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:18px; }
  .sig-box { display:flex; flex-direction:column; align-items:stretch; gap:7px; }
  .sig-field { width:100%; }
  .sig-line {
    width:100%; height:56px; border-bottom:2px solid var(--deep); position:relative;
  }
  .sig-line::after {
    content:''; position:absolute; bottom:-1px; left:50%; transform:translateX(-50%);
    width:6px; height:6px; border-radius:50%; background:var(--gold);
  }
  .sig-label { font-size:12px; color:var(--text-light); font-weight:600; }
  .sig-pad-wrap {
    position:relative; background:white;
    border:1.5px solid var(--border); border-radius:var(--radius-sm);
    overflow:hidden; min-height:120px;
  }
  .sig-pad-wrap:focus-within { border-color:var(--mid); box-shadow:0 0 0 3px rgba(61,80,128,.1); }
  .sig-canvas {
    display:block; width:100%; height:120px;
    cursor:crosshair; touch-action:none;
  }
  .btn-clear-sig {
    position:absolute; top:6px; right:6px;
    padding:3px 10px; font-family:'Noto Sans Sinhala',sans-serif;
    font-size:11px; font-weight:600; color:var(--text-light);
    background:rgba(255,255,255,.92); border:1px solid var(--border);
    border-radius:100px; cursor:pointer; transition:all .2s;
  }
  .btn-clear-sig:hover { color:var(--deep); border-color:var(--mid); }
  .sig-upload-btn {
    display:inline-flex; align-items:center; gap:6px; margin-top:8px;
    font-family:'Noto Sans Sinhala',sans-serif;
    font-size:11.5px; font-weight:600; color:var(--mid); cursor:pointer;
    padding:6px 12px; border:1.5px dashed var(--border); border-radius:100px;
    transition:all .2s; width:fit-content;
  }
  .sig-upload-btn:hover { color:var(--deep); border-color:var(--mid); background:rgba(61,80,128,.05); }

  /* office box */
  .office-box {
    background:white; border:2px solid var(--deep);
    border-radius:var(--radius-sm); padding:16px; margin-top:18px;
  }
  .office-box-title {
    font-size:12px; font-weight:700; color:var(--deep);
    margin-bottom:12px; display:flex; align-items:center; gap:8px;
  }

  /* nav */
  .form-nav {
    display:flex; justify-content:space-between; align-items:center;
    padding:22px 40px; background:white; border-top:1px solid var(--border);
    border-radius:0 0 var(--radius) var(--radius); gap:16px;
  }
  .btn {
    padding:11px 26px; border-radius:100px; font-family:'Noto Sans Sinhala',sans-serif;
    font-size:13.5px; font-weight:600; cursor:pointer; transition:all .25s; border:none;
    display:flex; align-items:center; gap:8px;
  }
  .btn-back { background:transparent; color:var(--text-light); border:1.5px solid var(--border); }
  .btn-back:hover { border-color:var(--mid); color:var(--mid); }
  .btn-next {
    background:linear-gradient(135deg,var(--deep) 0%,var(--mid) 100%);
    color:white; box-shadow:0 4px 16px rgba(26,35,64,.25);
  }
  .btn-next:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(26,35,64,.3); }
  .btn-submit {
    background:linear-gradient(135deg,var(--gold) 0%,#B8933C 100%);
    color:var(--deep); box-shadow:0 4px 16px rgba(201,168,76,.35);
  }
  .btn-submit:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(201,168,76,.45); }
  .step-indicator { font-size:13px; color:var(--text-light); font-weight:500; }

  /* add-row btn */
  .btn-add-row {
    display:flex; align-items:center; gap:8px; margin-top:10px;
    padding:8px 16px; background:transparent; border:1.5px dashed var(--mid);
    border-radius:100px; color:var(--mid); font-family:'Noto Sans Sinhala',sans-serif;
    font-size:13px; font-weight:600; cursor:pointer; transition:all .2s;
  }
  .btn-add-row:hover { background:rgba(61,80,128,.07); border-color:var(--deep); color:var(--deep); }
  .btn-add-row .plus {
    width:20px; height:20px; background:var(--mid); color:white; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:15px; line-height:1;
    transition:background .2s;
  }
  .btn-add-row:hover .plus { background:var(--deep); }
  .btn-del-row {
    background:none; border:none; cursor:pointer; color:#C0392B;
    font-size:15px; padding:3px 5px; border-radius:4px; transition:background .15s; line-height:1;
  }
  .btn-del-row:hover { background:rgba(192,57,43,.1); }

  /* success */
  .success-screen {
    display:none; text-align:center; padding:56px 40px;
    background:var(--off-white); border-radius:0 0 var(--radius) var(--radius);
  }
  .success-icon {
    width:76px; height:76px;
    background:linear-gradient(135deg,var(--success) 0%,#3DAF71 100%);
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:34px; margin:0 auto 22px;
    box-shadow:0 8px 32px rgba(46,125,82,.3);
    animation:popIn .5s cubic-bezier(.175,.885,.32,1.275);
  }
  @keyframes popIn { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }
  .success-screen h2 { font-size:22px; color:var(--deep); margin-bottom:10px; }
  .success-screen p  { color:var(--text-light); font-size:14px; line-height:1.8; }

  /* divider label */
  .divider-label {
    font-size:11px; font-weight:700; color:var(--text-light);
    letter-spacing:.8px; text-transform:uppercase;
    margin:18px 0 10px; padding-bottom:6px; border-bottom:1px dashed var(--border);
  }

  @media(max-width:640px){
    .form-header{flex-direction:column;padding:22px 18px;text-align:center;}
    .form-number-badge{margin:0 auto;}
    .form-section{padding:22px 18px;}
    .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
    .form-nav{padding:18px;}
    .progress-barX{padding:0 8px;}
    .progress-step{font-size:9px;padding:11px 3px;}
  }
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
@endpush

@section('content')

{{-- Pass $currentStep from controller; defaults to 0 for fresh load --}}
@php
    $currentStep = $currentStep ?? 0;

    if ($errors->any()) {
        $stepForField = function (string $field): int {
            if (preg_match('/^(my_|spouse_|guardian_|addr_|residence_type|ref_box)/', $field)) {
                return 0;
            }
            if (str_starts_with($field, 'children')) {
                return 1;
            }
            if (preg_match('/^(aid|trade_|declaration|parent_signature|declaration_date|number_of_children|phone|whatsapp|email)/', $field)) {
                return 2;
            }

            return 3;
        };

        $currentStep = min(array_map($stepForField, $errors->keys()));
    }
@endphp

@php
    $validationErrors = $errors->getMessages();
    $headerDivisionParts = explode('-', old('addr_colombo', ''), 2);
    $headerDivision1 = old('ref_box1', $headerDivisionParts[0] ?? '') ?: '—';
    $headerDivision2 = old('ref_box2', $headerDivisionParts[1] ?? '') ?: '—';
@endphp

<div class="page-wrapper">

    {{-- ══ HEADER ══ --}}
    <div class="form-header">
        <div class="header-logo">🏛️</div>
        <div class="header-text">
            <div class="org-name">Colombo Municipal Council</div>
            <h1>කොළඹ මහා නගර සභා<br>මහජන ආධාර දෙපාර්තමේන්තුව</h1>
            {{-- <div class="subtitle">
                2026 වසර සදහා කොළඹ මහා නගර සභාව ශිෂ්‍ය පාසල් අහෝෂ<br>
                අයදුම් පත්‍ර ඉල්ලීම
            </div> --}}
        </div>
        <div class="form-number-badge">
            <div class="ref-row">
                <span class="ref-label">අංකය</span>
                <input class="ref-box wide" type="text" name="ref_number" value="{{ $refNumber ?? '' }}" readonly autocomplete="off" tabindex="-1">
            </div>
            <div class="ref-row">
                <span class="ref-label">කොට්ඨාසය</span>
                <input class="ref-box division" type="text" id="division1" name="ref_box1" placeholder="—"
                       value="{{ $headerDivision1 === '—' ? '' : $headerDivision1 }}"
                       form="cmcForm" autocomplete="off">
                <input class="ref-box division" type="text" id="division2" name="ref_box2" placeholder="—"
                       value="{{ $headerDivision2 === '—' ? '' : $headerDivision2 }}"
                       form="cmcForm" autocomplete="off">
            </div>
        </div>
    </div>

    {{-- ══ PROGRESS BAR ══ --}}
    <div class="progress-barX">
        @foreach(['01. ඉල්ලුම්කරුගේ විස්තර', '03. පාසල් යන දරුවන්ගේ විස්තර', '04. දැනට ලභාගන්නා සහනාධාර', '05. සාක්ෂිකරුවා සහ නිලධාරී'] as $i => $label)
            <div class="progress-step {{ $i === $currentStep ? 'active' : ($i < $currentStep ? 'done' : '') }}"
                 data-step="{{ $i }}">
                {{ $label }}
            </div>
        @endforeach
    </div>

    {{-- ══ FORM ══ --}}
    <form method="POST" action="{{ route('cmc.store') }}" id="cmcForm">
        @csrf

        @include('cmc.partials.step-01')
        @include('cmc.partials.step-02')
        @include('cmc.partials.step-03')
        @include('cmc.partials.step-04')

        {{-- ══ SUCCESS SCREEN ══ --}}
        <div class="success-screen" id="successScreen">
            <div class="success-icon">✓</div>
            <h2>ඔබේ අයදුම්පත සාර්ථකව ඉදිරිපත් කෙරිණ!</h2>
            <p>ඔබගේ 2026 ශිෂ්‍ය පාසල් ආධාර අයදුම්පත ලැබී ඇත.<br>
               කාර්යාලය විසින් ඔබව ඉක්මනින් සම්බන්ධ කරගනු ඇත.<br>
               <strong style="color:var(--deep)">ස්තූතිය!</strong></p>
            <a href="{{ route('cmc.index') }}" class="btn btn-next" style="margin:26px auto 0;display:inline-flex color: white;">
                ← නව අයදුම්පත්
            </a>
        </div>

        {{-- ══ NAVIGATION ══ --}}
        <div class="form-nav" id="formNav">
            <button type="button" class="btn btn-back" id="btnBack"
                    style="visibility:hidden">← ආපසු</button>
            <span class="step-indicator" id="stepInd">පියවර 1 / 5</span>
            <button type="button" class="btn btn-next" id="btnNext" style="color: white;">ඉදිරියට →</button>
        </div>

    </form>

</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.2.0/dist/signature_pad.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    @if (session('success'))
        Swal.fire({
            icon: 'success',
            title: 'සාර්ථකයි!',
            text: @json(session('success')),
            confirmButtonText: 'හරි',
            confirmButtonColor: '#C9A84C',
        });
    @endif

    @if (session('error'))
        Swal.fire({
            icon: 'error',
            title: 'දෝෂයක්!',
            text: @json(session('error')),
            confirmButtonText: 'හරි',
            confirmButtonColor: '#1A2340',
        });
    @endif

    @if ($errors->any())
        Swal.fire({
            icon: 'error',
            title: 'යොමු කිරීම අසාර්ථකයි',
            html: '<ul style="text-align:left;margin:0;padding-left:1.25rem;list-style:disc;">'
                + @json($errors->all()).map(msg => `<li style="color:#C0392B;font-weight:600;margin-bottom:6px;">${msg}</li>`).join('')
                + '</ul>',
            confirmButtonText: 'හරි',
            confirmButtonColor: '#1A2340',
        }).then(() => scrollToFirstValidationError());
    @endif

    const validationErrors = @json($validationErrors);
    const hasValidationErrors = Object.keys(validationErrors).length > 0;

    function stepForField(field) {
        if (/^(my_|spouse_|guardian_|addr_|residence_type|ref_box)/.test(field)) return 0;
        if (field === 'children' || field.startsWith('children')) return 1;
        if (/^(aid|trade_|declaration|parent_signature|declaration_date|phone|whatsapp|email)/.test(field)) return 2;
        return 3;
    }

    function fieldElementForKey(field) {
        const byId = document.getElementById(field);
        if (byId) return byId;

        const childMatch = field.match(/^children\.(\d+)\.(.+)$/);
        if (childMatch) {
            const [, index, key] = childMatch;
            return document.querySelector(`[name="children[${index}][${key}]"]`);
        }

        if (field === 'children') {
            return document.querySelector('#childRows input[name^="children["]');
        }

        if (field.startsWith('aid')) {
            return document.querySelector('[name="aid[]"]');
        }

        return document.querySelector(`[name="${CSS.escape(field)}"]`);
    }

    function appendFieldError(container, message) {
        if (!container || container.querySelector('.field-error')) return;
        const span = document.createElement('span');
        span.className = 'field-error';
        span.textContent = message;
        container.appendChild(span);
    }

    function markFieldError(field, message) {
        if (field === 'residence_type') {
            document.querySelector('.radio-group')?.classList.add('is-invalid');
            appendFieldError(document.querySelector('.radio-group')?.closest('.field'), message);
            return;
        }

        if (field === 'declaration') {
            const checkbox = document.querySelector('[name="declaration"]');
            checkbox?.closest('.checkbox-option')?.classList.add('is-invalid');
            appendFieldError(checkbox?.closest('.card') ?? checkbox?.parentElement?.parentElement, message);
            return;
        }

        if (field === 'parent_signature') {
            const wrap = document.getElementById('parentSignaturePad')?.closest('.field');
            wrap?.querySelector('.sig-pad-wrap')?.classList.add('is-invalid');
            appendFieldError(wrap, message);
            return;
        }

        if (field === 'witness_signature') {
            const wrap = document.getElementById('witnessSignaturePad')?.closest('.field');
            wrap?.querySelector('.sig-pad-wrap')?.classList.add('is-invalid');
            appendFieldError(wrap, message);
            return;
        }

        if (field === 'official_seal') {
            const wrap = document.getElementById('officialSealPad')?.closest('.field');
            wrap?.querySelector('.sig-pad-wrap')?.classList.add('is-invalid');
            appendFieldError(wrap, message);
            return;
        }

        const el = fieldElementForKey(field);
        if (!el) return;

        el.classList.add('is-invalid');
        appendFieldError(el.closest('.field') ?? el.closest('td') ?? el.parentElement, message);
    }

    function applyValidationErrors(errors) {
        Object.keys(errors)
            .sort((a, b) => stepForField(a) - stepForField(b))
            .forEach(field => markFieldError(field, errors[field][0]));
    }

    function scrollToFirstValidationError() {
        const firstError = document.querySelector('#cmcForm .field-error');
        if (!firstError) return;

        const section = firstError.closest('.form-section');
        if (section?.dataset.step !== undefined) {
            currentStep = parseInt(section.dataset.step, 10);
            updateUI();
        }

        requestAnimationFrame(() => {
            firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
            const focusTarget = firstError.closest('.field, td')?.querySelector('.is-invalid:not([type="hidden"])');
            focusTarget?.focus({ preventScroll: true });
        });
    }

    let currentStep = {{ $currentStep }};
    const totalSteps = 4;
    const loanYears = @json($loanYears ?? []);
    const yearLabel = loanYears.join(' / ');

    let activeYearRow = null;

    function yearAmountHiddenInputs(idx, values = {}) {
        return loanYears.map(year =>
            `<input type="hidden" name="children[${idx}][amounts][${year}]" value="${values[year] ?? ''}">`
        ).join('');
    }

    function combinedDivisionValue() {
        const a = document.getElementById('division1')?.value.trim() ?? '';
        const b = document.getElementById('division2')?.value.trim() ?? '';
        if (a && b) return `${a}-${b}`;
        return a || b;
    }

    function syncDivisionToForm() {
        const value = combinedDivisionValue();
        const addrColombo = document.getElementById('addr_colombo');
        if (addrColombo) addrColombo.value = value;
        // Pre-fill only empty child colombo fields — user edits are kept
        document.querySelectorAll('[name$="[colombo]"]').forEach(el => {
            if (!el.value.trim()) el.value = value;
        });
    }

    function bindDivisionInputs() {
        ['division1', 'division2'].forEach(id => {
            document.getElementById(id)?.addEventListener('input', syncDivisionToForm);
        });
    }

    function addChildRow() {
        const tbody = document.getElementById('childRows');
        const idx   = tbody.rows.length;
        const tr    = document.createElement('tr');
        const division = combinedDivisionValue();
        const yearCell = loanYears.length ? `
            <td>
                ${yearAmountHiddenInputs(idx)}
                <button type="button"
                        class="btn btn-sm btn-outline-primary btn-year-amounts w-100"
                        data-bs-toggle="modal"
                        data-bs-target="#yearAmountModal">
                    පෙර වර්ෂ
                </button>
            </td>` : '';
        tr.innerHTML = `
            <td style="text-align:center;color:var(--text-light);font-weight:600">${idx + 1}</td>
            <td><input type="text" name="children[${idx}][birth_cert_no]" placeholder="අංකය"></td>
            <td><input type="text" name="children[${idx}][student_name]"  placeholder="නම"></td>
            <td><input type="text" name="children[${idx}][school]"  placeholder="පාසල"></td>
            <td><input type="text" name="children[${idx}][colombo]" placeholder="කොළඹ"></td>
            <td><input type="text" name="children[${idx}][grade]"   placeholder="ශ්‍රේණිය"></td>
            ${yearCell}
            <td><button type="button" class="btn-del-row">✕</button></td>
        `;
        tr.style.animation = 'fadeSlide .3s ease';
        tbody.appendChild(tr);
        const colomboInput = tr.querySelector('[name$="[colombo]"]');
        if (colomboInput) colomboInput.value = division;
    }

    document.getElementById('yearAmountModal')?.addEventListener('show.bs.modal', function (e) {
        activeYearRow = e.relatedTarget?.closest('tr') ?? null;
        if (!activeYearRow) return;

        document.querySelectorAll('#yearAmountModalBody .modal-year-amount').forEach(input => {
            const year = input.dataset.year;
            input.value = activeYearRow.querySelector(`[name$="[amounts][${year}]"]`)?.value ?? '';
        });
    });

    document.getElementById('saveYearAmounts')?.addEventListener('click', function () {
        if (!activeYearRow) return;

        document.querySelectorAll('#yearAmountModalBody .modal-year-amount').forEach(input => {
            const year = input.dataset.year;
            const hidden = activeYearRow.querySelector(`[name$="[amounts][${year}]"]`);
            if (hidden) hidden.value = input.value;
        });

        bootstrap.Modal.getInstance(document.getElementById('yearAmountModal')).hide();
    });

    function delChildRow(btn) {
        const tr = btn.closest('tr');
        tr.style.transition = 'opacity .2s';
        tr.style.opacity = '0';
        setTimeout(() => {
            tr.remove();
            document.querySelectorAll('#childRows tr').forEach((r, i) => {
                r.cells[0].textContent = i + 1;
                // reindex name attributes
                r.querySelectorAll('input').forEach(inp => {
                    inp.name = inp.name.replace(/children\[\d+\]/, `children[${i}]`);
                });
            });
        }, 200);
    }

    function nextStep() {
        if (currentStep < totalSteps - 1) {
            syncAllSignatures();
            syncDivisionToForm();
            currentStep++;
            updateUI();
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }
    }

    function prevStep() {
        if (currentStep > 0) {
            syncAllSignatures();
            syncDivisionToForm();
            currentStep--;
            updateUI();
        }
    }

    function goTo(i) {
        if (hasValidationErrors || i <= currentStep) {
            syncDivisionToForm();
            currentStep = i;
            updateUI();
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }
    }

    function handleNextClick() {
        if (currentStep === totalSteps - 1) {
            syncAllSignatures();
            syncDivisionToForm();
            document.getElementById('cmcForm').submit();
            return;
        }
        nextStep();
    }

    function bindNavigation() {
        document.getElementById('btnNext')?.addEventListener('click', handleNextClick);
        document.getElementById('btnBack')?.addEventListener('click', prevStep);
        document.querySelectorAll('.progress-step[data-step]').forEach(step => {
            step.addEventListener('click', () => goTo(parseInt(step.dataset.step, 10)));
        });
        document.querySelector('.btn-add-row')?.addEventListener('click', addChildRow);
        document.getElementById('childRows')?.addEventListener('click', (e) => {
            const btn = e.target.closest('.btn-del-row');
            if (btn) delChildRow(btn);
        });
    }

    // ── Digital signature pads ──
    function createSigPad({ canvasId, dataId, clearId, uploadId, step }) {
        const canvas    = document.getElementById(canvasId);
        const dataInput = document.getElementById(dataId);
        if (!canvas || !dataInput) return null;

        let pad   = null;
        let ready = false;

        function init() {
            if (ready || typeof SignaturePad === 'undefined') return;
            pad = new SignaturePad(canvas, { penColor: '#1A2340', minWidth: 0.8, maxWidth: 2.2 });
            pad.addEventListener('endStroke', sync);
            document.getElementById(clearId)?.addEventListener('click', clear);
            document.getElementById(uploadId)?.addEventListener('change', handleUpload);
            ready = true;
        }

        function restoreDataURL(data) {
            if (!data || !pad) return;

            const img = new Image();
            img.onload = () => {
                const cw = canvas.offsetWidth;
                const ch = canvas.offsetHeight;
                const scale = Math.min(cw / img.naturalWidth, ch / img.naturalHeight);
                const dw = img.naturalWidth * scale;
                const dh = img.naturalHeight * scale;

                pad.clear();
                pad.fromDataURL(data, {
                    width:   dw,
                    height:  dh,
                    xOffset: (cw - dw) / 2,
                    yOffset: (ch - dh) / 2,
                }).catch(() => { /* ignore invalid restore */ });
            };
            img.onerror = () => { /* ignore invalid restore */ };
            img.src = data;
        }

        function resize() {
            if (!canvas.offsetWidth) return;
            init();
            if (!pad) return;

            const ratio = Math.max(window.devicePixelRatio || 1, 1);
            const data  = pad.isEmpty() ? (dataInput.value || null) : pad.toDataURL('image/png');
            canvas.width  = canvas.offsetWidth * ratio;
            canvas.height = canvas.offsetHeight * ratio;
            canvas.getContext('2d').scale(ratio, ratio);
            pad.clear();
            restoreDataURL(data);
        }

        function sync() {
            if (!pad) return;
            dataInput.value = pad.isEmpty() ? '' : pad.toDataURL('image/png');
        }

        function clear() {
            pad?.clear();
            sync();
            const upload = document.getElementById(uploadId);
            if (upload) upload.value = '';
        }

        function handleUpload(e) {
            const file = e.target.files?.[0];
            if (!file) return;
            const reader = new FileReader();
            reader.onload = (ev) => {
                dataInput.value = ev.target.result;
                if (canvas.offsetWidth) resize();
            };
            reader.readAsDataURL(file);
        }

        function ensureVisible() {
            if (currentStep !== step) return;
            requestAnimationFrame(() => requestAnimationFrame(resize));
        }

        return { step, resize, sync, ensureVisible };
    }

    const sigPads = [
        createSigPad({
            canvasId: 'parentSignaturePad',
            dataId:   'parentSignatureData',
            clearId:  'clearParentSignature',
            uploadId: 'uploadParentSignature',
            step:     2,
        }),
        createSigPad({
            canvasId: 'witnessSignaturePad',
            dataId:   'witnessSignatureData',
            clearId:  'clearWitnessSignature',
            uploadId: 'uploadWitnessSignature',
            step:     3,
        }),
        createSigPad({
            canvasId: 'officialSealPad',
            dataId:   'officialSealData',
            clearId:  'clearOfficialSeal',
            uploadId: 'uploadOfficialSeal',
            step:     3,
        }),
    ].filter(Boolean);

    function ensureSigPadsVisible() {
        sigPads.forEach(p => p.ensureVisible());
    }

    function syncAllSignatures() {
        sigPads.forEach(p => p.sync());
    }

    window.addEventListener('resize', () => {
        sigPads.filter(p => p.step === currentStep).forEach(p => p.resize());
    });
    document.getElementById('cmcForm')?.addEventListener('submit', syncAllSignatures);

    function updateUI() {
        document.querySelectorAll('.form-section').forEach((s, i) =>
            s.classList.toggle('active', i === currentStep));
        document.querySelectorAll('.progress-step').forEach((s, i) => {
            s.classList.toggle('active', i === currentStep);
            s.classList.toggle('done',   i < currentStep);
        });
        document.getElementById('stepInd').textContent = `පියවර ${currentStep + 1} / ${totalSteps}`;
        document.getElementById('btnBack').style.visibility = currentStep > 0 ? 'visible' : 'hidden';

        const btnNext = document.getElementById('btnNext');
        if (currentStep === totalSteps - 1) {
            btnNext.textContent = '✓ ඉදිරිපත් කරන්න';
            btnNext.className   = 'btn btn-submit';
        } else {
            btnNext.textContent = 'ඉදිරියට →';
            btnNext.className   = 'btn btn-next';
        }

        ensureSigPadsVisible();
    }

    const aidOtherCheckbox = document.getElementById('aidOtherCheckbox');
    const aidOtherField = document.getElementById('aidOtherField');
    const aidOtherTextarea = document.getElementById('aid_estimate');

    function toggleAidOtherField() {
        if (!aidOtherCheckbox || !aidOtherField) return;
        const show = aidOtherCheckbox.checked;
        aidOtherField.style.display = show ? 'block' : 'none';
        if (aidOtherTextarea) aidOtherTextarea.disabled = !show;
    }

    aidOtherCheckbox?.addEventListener('change', toggleAidOtherField);
    toggleAidOtherField();

    bindDivisionInputs();
    bindNavigation();
    syncDivisionToForm();

    updateUI();

    if (hasValidationErrors) {
        applyValidationErrors(validationErrors);
    }
</script>
@endpush