@php
    $layout = ($checkBankCreate == "firstTime") ? 'layout.onetime-app' : 'layout.app';
@endphp
@extends($layout)
@section('title','Create Bank Account')

@push('header_script')
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap" rel="stylesheet">
<style>
      :root{
        --ink:#10203D;
        --ink-2:#1C3057;
        --signal:#FF7A1A;
        --signal-soft:#FFE9D2;
        --paper:#F3F5F9;
        --card:#FFFFFF;
        --line:#E3E7EE;
        --muted:#6B7488;
        --complete:#17876B;
        --danger:#E4483C;
        --danger-soft:#FDEEEC;
        --r-card:16px;
        --r-field:9px;
        --shadow-sm:0 1px 2px rgba(16,32,61,.05);
        --shadow-md:0 14px 34px -16px rgba(16,32,61,.22);
        --font-display:'Space Grotesk',sans-serif;
        --font-body:'Inter',sans-serif;
        --font-mono:'IBM Plex Mono',monospace;
      }
      .modern-shell {
        font-family:var(--font-body);font-size:14px;line-height:1.5;
        color:var(--ink);
      }
      
      /* PAGE HEAD */
      .page-head{margin-bottom:32px;}
      .page-head h1{font-family:var(--font-display);font-size:27px;margin:0 0 7px;letter-spacing:-.01em;}
      .page-head p{color:var(--muted);font-size:14px;margin:0;}

      /* SECTION CARDS */
      .section-card{
        background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
        box-shadow:var(--shadow-sm);padding:30px 32px;margin-bottom:22px;
      }
      .section-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:26px;}
      .section-icon{
        width:38px;height:38px;border-radius:10px;background:var(--paper);
        border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
        flex-shrink:0;color:var(--ink);
      }
      .section-eyebrow{
        font-family:var(--font-mono);font-size:11px;color:var(--signal);
        letter-spacing:.06em;margin-bottom:3px;
      }
      .section-title{font-family:var(--font-display);font-weight:600;font-size:16.5px;margin:0 0 3px;}
      .section-desc{font-size:13px;color:var(--muted);margin:0;}

      /* FIELDS */
      .field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(208px,1fr));gap:22px 24px;align-items:start;}
      .field{display:flex;flex-direction:column;min-width:0;}
      .field label{
        font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
        color:var(--muted);margin-bottom:8px;
      }
      .field .req{color:var(--signal);margin-left:3px;}
      .field .hint{font-size:11.5px;color:var(--muted);margin-top:6px;}
      .field.invalid .hint{color:var(--danger);}
      .field.invalid label{color:var(--danger);}

      .modern-shell input[type="text"], .modern-shell input[type="email"], .modern-shell input[type="tel"], 
      .modern-shell input[type="url"], .modern-shell input[type="date"], .modern-shell select, .modern-shell textarea{
        font-family:var(--font-body);font-size:14px;color:var(--ink);background:var(--paper);
        border:1.5px solid transparent;border-radius:var(--r-field);padding:11px 13px;width:100%;
        transition:border-color .15s,background .15s; box-shadow: none; height: 44px; box-sizing: border-box;
      }
      .modern-shell input::placeholder{color:#A6ADBB;}
      .modern-shell input:focus{outline:none;border-color:var(--ink);background:var(--card);}
      .field.invalid input{background:var(--danger-soft);border-color:var(--danger);}
      .mono-field input{font-family:var(--font-mono);letter-spacing:.02em;font-size:13.5px;}

      /* SUBMIT BAR */
      .submit-bar{
        background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
        padding:18px 32px;display:flex;align-items:center;
        justify-content:space-between;margin-top:6px; box-shadow:var(--shadow-sm);
      }
      .sb-text{font-size:13px;color:var(--muted);}
      .sb-text strong{color:var(--ink);}
      .btn-submit{
        background:var(--ink);color:#fff;border:none;padding:13px 32px;border-radius:10px;
        font-family:var(--font-body);font-weight:600;font-size:14px;cursor:pointer;
        transition:background .15s,transform .1s; display: inline-flex; align-items: center; justify-content: center;
      }
      .btn-submit:hover{background:var(--ink-2);}
      .btn-submit:active{transform:translateY(1px);}
      
      .btn-skip{
        background:var(--paper); color:var(--ink); border:1px solid var(--line); text-decoration:none; 
        padding:13px 32px; border-radius:10px; font-family:var(--font-body); font-weight:600; 
        font-size:14px; display:inline-flex; align-items:center; transition:background .15s;
      }
      .btn-skip:hover { background: #e3e7ee; }

      @media (max-width:768px){
        .submit-bar { flex-direction: column; gap: 16px; align-items: flex-start; }
      }
</style>
@endpush

@section('content')
    <div class="modern-shell">
        @if($checkBankCreate != "firstTime")
            <div class="app-hero-header d-flex align-items-center" style="background:var(--card); border-bottom:1px solid var(--line); padding: 15px 28px; margin-bottom: 30px;">
                <ol class="breadcrumb" style="margin:0;">
                    <li class="breadcrumb-item">
                        <a href="javascript:void(0);" style="font-weight:600; color:var(--ink); font-family:var(--font-body);">Create Bank Account</a>
                    </li>
                </ol>
                <div class="ms-auto d-lg-flex flex-row">
                    <a href="{{route('bank-account.index')}}" class="btn-submit" style="text-decoration:none; padding: 8px 16px; font-size: 13px;"><i class="ri-arrow-left-circle-fill" style="margin-right: 6px;"></i> Back</a>
                </div>
            </div>
        @endif
        
        <div class="content" style="max-width:1080px; margin:0 auto; padding:40px 20px;">
            <div class="page-head">
                @if($checkBankCreate == "firstTime")
                <h1>Bank Details</h1>
                <p>Please provide your primary bank account details. This will be used for transactions and settlements.</p>
                @else
                <h1>Create Bank Account</h1>
                <p>Add a new bank account for your fleet operations.</p>
                @endif
            </div>

            {!! Form::open(['route' => ['bank-account.store'], 'id' => 'bankForm', 'class'=>'needs-validation', 'onsubmit'=>'BtnSubmit.disabled = true', 'method' => 'post', 'autocomplete'=>'off']) !!}
                <input type="hidden" name="check_create_time" value="{{$checkBankCreate}}">

                <section class="section-card">
                    <div class="section-head">
                        <div class="section-icon">
                            <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
                                <path d="M10 2.5L2 7v1.5h16V7l-8-4.5z" fill="currentColor"/>
                                <path d="M3 10h2v6H3v-6zm4 0h2v6H7v-6zm4 0h2v6h-2v-6zm4 0h2v6h-2v-6z" fill="currentColor"/>
                                <path d="M2 17.5h16v1.5H2v-1.5z" fill="currentColor"/>
                            </svg>
                        </div>
                        <div>
                            <div class="section-eyebrow">Bank Information</div>
                            <h2 class="section-title">Account Details</h2>
                            <p class="section-desc">Enter the banking details correctly to ensure smooth processing.</p>
                        </div>
                    </div>

                    <div class="field-grid">
                        <div class="field @error('account_holder_name') invalid @enderror">
                            <label for="account_holder_name">Account Holder Name<span class="req">*</span></label>
                            <input type="text" id="account_holder_name" name="account_holder_name" value="{{old('account_holder_name')}}" required>
                            @error('account_holder_name')<span class="hint">{{ $message }}</span>@enderror
                        </div>
                        
                        <div class="field @error('bank_name') invalid @enderror">
                            <label for="bank_name">Bank Name<span class="req">*</span></label>
                            <input type="text" id="bank_name" name="bank_name" value="{{old('bank_name')}}" required>
                            @error('bank_name')<span class="hint">{{ $message }}</span>@enderror
                        </div>

                        <div class="field mono-field @error('account_no') invalid @enderror">
                            <label for="account_no">Account No.<span class="req">*</span></label>
                            <input type="text" class="number" id="account_no" name="account_no" value="{{old('account_no')}}" required>
                            @error('account_no')<span class="hint">{{ $message }}</span>@enderror
                        </div>

                        <div class="field mono-field @error('ifsc_code') invalid @enderror">
                            <label for="ifsc_code">IFSC Code<span class="req">*</span></label>
                            <input type="text" id="ifsc_code" name="ifsc_code" value="{{old('ifsc_code')}}" required>
                            @error('ifsc_code')<span class="hint">{{ $message }}</span>@enderror
                        </div>

                        <div class="field @error('branch') invalid @enderror">
                            <label for="branch">Branch<span class="req">*</span></label>
                            <input type="text" id="branch" name="branch" value="{{old('branch')}}" required>
                            @error('branch')<span class="hint">{{ $message }}</span>@enderror
                        </div>

                        <div class="field @error('remark') invalid @enderror">
                            <label for="remark">Remark</label>
                            <input type="text" id="remark" name="remark" value="{{old('remark')}}">
                            @error('remark')<span class="hint">{{ $message }}</span>@enderror
                        </div>
                    </div>
                </section>
                
                <div class="submit-bar">
                    <span class="sb-text">All required fields are marked with a <strong style="color:var(--signal)">*</strong></span>
                    <div style="display:flex; gap:12px; align-items:center;">
                        @if($checkBankCreate == "firstTime")
                            <a href="{{route('setting-tax.index')}}" class="btn-skip">Skip</a>
                        @endif
                        <button type="submit" id="BtnSubmit" class="btn-submit">Save Bank Details</button>
                    </div>
                </div>
            {!! Form::close() !!}
        </div>
    </div>
@endsection

@push('footer_script')
    <script>
        const requiredEls = [...document.querySelectorAll('#bankForm [required]')];
        
        // Inline validation styling
        requiredEls.forEach(el => {
            el.addEventListener('blur', () => {
                const field = el.closest('.field');
                if (field) field.classList.toggle('invalid', !el.checkValidity() || el.value.trim() === '');
            });
            el.addEventListener('input', () => {
                const field = el.closest('.field');
                if (field && field.classList.contains('invalid') && el.checkValidity() && el.value.trim() !== '') {
                    field.classList.remove('invalid');
                }
            });
        });
        
        // Validation on submit
        document.getElementById('bankForm').addEventListener('submit', function(e) {
            const firstInvalid = requiredEls.find(el => !el.checkValidity() || el.value.trim() === '');
            if (firstInvalid) {
                e.preventDefault();
                document.getElementById('BtnSubmit').disabled = false;
                firstInvalid.closest('.section-card').scrollIntoView({behavior:'smooth', block:'start'});
                firstInvalid.closest('.field').classList.add('invalid');
                setTimeout(() => firstInvalid.focus(), 400);
            }
        });

        // Uppercase for IFSC Code
        const ifscEl = document.getElementById('ifsc_code');
        if (ifscEl) {
            ifscEl.addEventListener('input', function() {
                this.value = this.value.toUpperCase();
            });
            ifscEl.value = ifscEl.value.toUpperCase();
        }

        // Numeric filtering
        $('.number').keyup(function (e) {
            if (/\D/g.test(this.value)) {
                this.value = this.value.replace(/\D/g, '');
            }
        });
    </script>
@endpush