@extends("front/layout.master")
@php
    $user = Auth::user();
    $sellerac = App\Store::where('user_id','=', $user->id)->first();
@endphp
@section('title', __('staticwords.MyBankAccounts') . ' | ')

@section("body")

<div class="max-w-[1400px] mx-auto px-4 lg:px-6 pt-5">
    <nav class="breadcrumb-row text-[12px] text-slate-500 flex items-center gap-1.5 leading-none">
        <a href="{{ url('/') }}" class="hover:text-brand-600">{{ __('Home') }}</a>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-slate-300 shrink-0"><path d="m9 6 6 6-6 6"/></svg>
        <span class="text-deep font-medium">{{ __('staticwords.MyBankAccounts') }}</span>
    </nav>
</div>

<section class="max-w-[1400px] mx-auto px-4 lg:px-6 mt-5 grid lg:grid-cols-[300px_1fr] gap-5 pb-12">
    <aside class="lg:sticky lg:top-28 lg:self-start">
        @include('user.sidebar')
    </aside>

    <div class="space-y-5">
        <div class="bg-white rounded-2xl shadow-card p-6 lg:p-8">
            <div class="flex items-center justify-between flex-wrap gap-3 mb-5">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 bg-emerald-50 rounded-xl grid place-items-center text-emerald-600">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 21h18M5 21V8l7-5 7 5v13M9 21V12h6v9"/></svg>
                    </div>
                    <div>
                        <h1 class="font-display font-extrabold text-2xl">{{ __('staticwords.MyBankAccounts') }}</h1>
                        <p class="text-[13px] text-slate-500">{{ auth()->user()->banks->count() }} {{ __('saved accounts') }}</p>
                    </div>
                </div>
                <button type="button" data-sh-modal-open="addnewbank" class="bg-brand-500 hover:bg-brand-600 text-white font-bold px-5 py-2 rounded-lg flex items-center gap-2 text-[13px]">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
                    {{ __('staticwords.ADDNewbank') }}
                </button>
            </div>

            @if(auth()->user()->banks->count() > 0)
                <div class="grid sm:grid-cols-2 gap-4">
                    @foreach(Auth::user()->banks as $bank)
                        <div class="rounded-2xl p-5 bg-gradient-to-br from-deep to-brand-700 text-white relative overflow-hidden">
                            <div class="absolute -right-8 -top-8 w-32 h-32 bg-saffron/20 rounded-full blur-2xl"></div>
                            <div class="relative">
                                <div class="text-[11px] uppercase tracking-wider opacity-70">{{ __('Bank') }}</div>
                                <div class="font-display font-extrabold text-xl mt-0.5">{{ $bank->bankname }}</div>
                                <div class="font-mono text-[18px] tracking-widest mt-5 tabular">•••• {{ substr($bank->acno, -4) }}</div>
                                <div class="flex justify-between items-end mt-4 text-[12px]">
                                    <div>
                                        <div class="opacity-60 text-[10px] uppercase tracking-wider">{{ __('Holder') }}</div>
                                        <div class="font-semibold">{{ $bank->acname }}</div>
                                    </div>
                                    <div class="text-right">
                                        <div class="opacity-60 text-[10px] uppercase tracking-wider">{{ __('IFSC/SWIFT') }}</div>
                                        <div class="font-semibold tabular">{{ $bank->ifsc }}</div>
                                    </div>
                                </div>
                                <div class="flex items-center gap-2 mt-4 pt-4 border-t border-white/15">
                                    <button type="button" data-sh-modal-open="editbank{{ $bank->id }}" class="text-[12px] font-semibold text-saffron hover:underline flex items-center gap-1">
                                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>{{ __('Edit') }}
                                    </button>
                                    @if(env('DEMO_LOCK')==0)
                                    <button type="button" data-sh-modal-open="deletebank{{ $bank->id }}" class="text-[12px] font-semibold text-rose-300 hover:underline flex items-center gap-1">
                                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1.5 14a2 2 0 0 1-2 1.8h-7a2 2 0 0 1-2-1.8L5 6"/></svg>{{ __('Delete') }}
                                    </button>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="text-center py-10">
                    <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" class="mx-auto text-slate-300"><path d="M3 21h18M5 21V8l7-5 7 5v13M9 21V12h6v9"/></svg>
                    <h3 class="font-display font-bold text-lg mt-4">{{ __('No bank accounts yet') }}</h3>
                    <p class="text-[13px] text-slate-500 mt-1">{{ __('Save bank account details for refunds and payouts.') }}</p>
                    <button type="button" data-sh-modal-open="addnewbank" class="inline-block mt-4 bg-brand-500 hover:bg-brand-600 text-white font-bold px-5 py-2.5 rounded-full text-[13px]">{{ __('staticwords.ADDNewbank') }}</button>
                </div>
            @endif
        </div>
    </div>
</section>

{{-- Add bank modal --}}
<div id="addnewbank" class="sh-modal" role="dialog" aria-modal="true">
    <div class="sh-modal__backdrop" data-sh-close></div>
    <div class="sh-modal__panel">
        <div class="flex items-center justify-between p-5 border-b border-slate-100">
            <span class="font-display font-extrabold text-lg">{{ __('Add New Bank Ac') }}</span>
            <button type="button" data-sh-close class="w-9 h-9 grid place-items-center rounded-full hover:bg-slate-100"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
        </div>
        <div class="p-5">
            <form action="{{ route('user.bank.add') }}" method="POST" class="space-y-3">
                @csrf
                <div>
                    <label class="block text-[13px] font-semibold mb-1">{{ __('Ac Holder Name') }} *</label>
                    <input value="{{ old('acname') }}" required type="text" name="acname" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                    <div class="text-rose-500 text-[12px] mt-1">{{ $errors->first('acname') }}</div>
                </div>
                <div>
                    <label class="block text-[13px] font-semibold mb-1">{{ __('Bank Name') }} *</label>
                    <input value="{{ old('bankname') }}" required type="text" name="bankname" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                    <div class="text-rose-500 text-[12px] mt-1">{{ $errors->first('bankname') }}</div>
                </div>
                <div>
                    <label class="block text-[13px] font-semibold mb-1">{{ __('Account No') }} *</label>
                    <input pattern="[0-9]+" value="{{ old('acno') }}" required type="text" name="acno" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px] tabular">
                    <div class="text-rose-500 text-[12px] mt-1">{{ $errors->first('acno') }}</div>
                </div>
                <div>
                    <label class="block text-[13px] font-semibold mb-1">{{ __('IFSC / SWIFT Code') }} *</label>
                    <input value="{{ old('ifsc') }}" required type="text" name="ifsc" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                    <div class="text-rose-500 text-[12px] mt-1">{{ $errors->first('ifsc') }}</div>
                </div>
                <div class="flex items-center gap-2 pt-2">
                    <button type="submit" class="bg-brand-500 hover:bg-brand-600 text-white font-bold px-5 py-2 rounded-lg">{{ __('staticwords.Save') }}</button>
                    <button type="button" data-sh-close class="bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold px-5 py-2 rounded-lg">{{ __('Close') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Edit & delete bank modals --}}
@foreach(Auth::user()->banks as $bank)
    <div id="editbank{{ $bank->id }}" class="sh-modal" role="dialog" aria-modal="true">
        <div class="sh-modal__backdrop" data-sh-close></div>
        <div class="sh-modal__panel">
            <div class="flex items-center justify-between p-5 border-b border-slate-100">
                <span class="font-display font-extrabold text-lg">{{ $bank->bankname }} ({{ $bank->acno }})</span>
                <button type="button" data-sh-close class="w-9 h-9 grid place-items-center rounded-full hover:bg-slate-100"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
            </div>
            <div class="p-5">
                <form action="{{ route('user.bank.update', $bank->id) }}" method="POST" class="space-y-3">
                    @csrf
                    <div>
                        <label class="block text-[13px] font-semibold mb-1">{{ __('Ac Holder Name') }} *</label>
                        <input value="{{ $bank->acname }}" required type="text" name="acname" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                    </div>
                    <div>
                        <label class="block text-[13px] font-semibold mb-1">{{ __('Bank Name') }} *</label>
                        <input value="{{ $bank->bankname }}" required type="text" name="bankname" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                    </div>
                    <div>
                        <label class="block text-[13px] font-semibold mb-1">{{ __('Account No') }} *</label>
                        <input pattern="[0-9]+" value="{{ $bank->acno }}" required type="text" name="acno" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px] tabular">
                    </div>
                    <div>
                        <label class="block text-[13px] font-semibold mb-1">{{ __('IFSC / SWIFT Code') }} *</label>
                        <input value="{{ $bank->ifsc }}" required type="text" name="ifsc" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                    </div>
                    <div class="flex items-center gap-2 pt-2">
                        <button @if(env('DEMO_LOCK')==0) type="submit" @else type="button" disabled @endif class="bg-brand-500 hover:bg-brand-600 text-white font-bold px-5 py-2 rounded-lg">{{ __('Save') }}</button>
                        <button type="button" data-sh-close class="bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold px-5 py-2 rounded-lg">{{ __('Close') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="deletebank{{ $bank->id }}" class="sh-modal" role="dialog" aria-modal="true">
        <div class="sh-modal__backdrop" data-sh-close></div>
        <div class="sh-modal__panel max-w-md">
            <div class="p-6 text-center">
                <div class="w-16 h-16 rounded-full mx-auto bg-rose-50 grid place-items-center text-rose-500 mb-3">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1.5 14a2 2 0 0 1-2 1.8h-7a2 2 0 0 1-2-1.8L5 6"/></svg>
                </div>
                <h3 class="font-display font-extrabold text-xl">{{ __('Are You Sure ?') }}</h3>
                <p class="text-[13px] text-slate-500 mt-1.5">{{ __('Do you really want to delete this bank account') }} <b>{{ $bank->bankname }}</b>? {{ __('This process cannot be undone') }}.</p>
                <form method="POST" action="{{ route('user.bank.delete', $bank->id) }}" class="flex items-center gap-2 justify-center mt-5">
                    @csrf
                    @method("DELETE")
                    <button type="button" data-sh-close class="bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold px-5 py-2 rounded-lg">{{ __('No') }}</button>
                    <button type="submit" class="bg-rose-500 hover:bg-rose-600 text-white font-bold px-5 py-2 rounded-lg">{{ __('Yes') }}, {{ __('Delete') }}</button>
                </form>
            </div>
        </div>
    </div>
@endforeach

@include('front.partials.change-password-modal')
@endsection

@section('script')
<script src="{{ url('js/profile.js') }}"></script>
<script src="{{ url('js/bank.js') }}"></script>
@endsection