@php
// เนื่องจาก Controller ส่งมาเป็น Collection (จาก ->get()) เราต้องดึงตัวแรกออกมาใช้งาน
if ($bank instanceof \Illuminate\Support\Collection) {
    $bank = $bank->first();
}

if (empty($bank)) {
    // กรณีสร้างใหม่ (Insert) - กำหนดค่าว่างเริ่มต้น
    $bank_id = '';
    $bank_name = '';
    $bank_branch = ''; 
    $bank_account_name = ''; 
    $bank_account_no = ''; 
     
} else {
    // กรณีแก้ไข (Update) - ดึงค่าจาก Object $bank
    $bank_id = $bank->bank_id;
    $bank_name = $bank->bank_name;
    $bank_branch = $bank->bank_branch;
    $bank_account_name = $bank->bank_account_name;
    $bank_account_no = $bank->bank_account_no;
   
}

 $breadcrumbs = [
        'Bank List' => url('/bank_use_list'),
        'Bank ' => url('/bank_use_getedit')
    ];
@endphp

@extends('layouts.master')



@section('title')
    bank Management
@endsection

@section('style')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<style>
    .quotation-card { border-radius: 12px; border: 1px solid #d1d9e6; background-color: #ffffff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important; }
    .label-main { color: #000; font-weight: 700; font-size: 0.9rem; margin-bottom: 5px; display: block; }
    .input-custom-black { color: #000000 !important; font-weight: 600; border-color: #cbd5e0; }
    .input-custom-black:focus { border-color: #3f78e0; color: #000000 !important; box-shadow: none; }
    .label-sub-purple { color: #6f42c1 !important; font-weight: 600; font-size: 0.85rem; }
    .form-control-custom { height: 40px; font-size: 0.9rem; border-radius: 6px; }
    .custom-hr { border-top: 1px solid #edf2f7; margin: 1.5rem 0; }
    .table-header-bg { background-color: #f8f9fa; border-bottom: 2px solid #343f52; padding: 10px; font-weight: 700; color: #60697b; }
    .btn-add-service { background-color: #f3effb; color: #6f42c1; border: 1px dashed #6f42c1; font-size: 0.85rem; font-weight: 600; transition: all 0.2s; }
    .btn-add-service:hover { background-color: #6f42c1; color: #fff; }
    .sub-item-row { padding-left: 20px; }
    .remove-btn { color: #d90429; cursor: pointer; font-size: 1.2rem; line-height: 40px; }
    .btn-sync { padding: 2px 8px; font-size: 0.7rem; vertical-align: middle; margin-left: 5px; }
    .datepicker table tr td.active { background-color: #343f52 !important; border-color: #343f52 !important; }
    .input-group-text { border-color: #cbd5e0; background-color: #f8f9fa; cursor: pointer; }
</style>
<style>
    .bank-wrapper {
        position: relative;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        border: 1px solid #d1d9e6;
        border-radius: 8px;
        background: #fff;
    }
    .bank-pad {
        width: 100%;
        height: 200px;
        cursor: crosshair;
    }
    .bank-controls {
        padding: 10px;
        border-top: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .color-option {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: inline-block;
        margin: 0 5px;
        cursor: pointer;
        border: 1px solid #ddd;
    }

    
</style>
@endsection

@section('content')
{{-- @include('layouts.header') --}}

{{-- <div class="w-full bg-light border-bottom py-3" style="background-color: #f8f9fa;">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0 flex-nowrap" style="font-size: 14px; background: transparent; padding: 0;">
                <li class="breadcrumb-item">
                    <a href="{{ url('/') }}" class="text-muted text-decoration-none hover:text-dark">Home</a>
                </li>
                <li class="breadcrumb-item active text-dark fw-bold" aria-current="page">
                    <a href="{{ url('/bank_list') }}" class="text-muted text-decoration-none hover:text-dark">bank List</a>
                </li>
                <li class="breadcrumb-item active text-dark fw-bold" aria-current="page">
                    bank Editor
                </li>
            </ol>
        </nav>
    </div>
</div> --}}

<section class="wrapper bg-light">
    <div class="container py-10">
        <div class="row">
            <div class="col-lg-12 col-xl-10 mx-auto">
                <div class="mb-4">
                    <h2 style="font-size: 1.3rem; color: #000;">Bank</h2>
                </div>

                <div class="card quotation-card">
                    <div class="card-body p-8 p-lg-10">
                        <form class="contact-form" method="post" action="{{ url('/bank_use_edit') }}" enctype="multipart/form-data">
                            {{ csrf_field() }}
                            
                            <input type="hidden" id="bank_id" name="bank_id" value="{{ $bank_id }}">

                                <div class="row">

                                    <div class="col-6">
                                            <label class="label-main">Bank Name:</label>
                                            <input type="text" class="form-control form-control-custom input-custom-black" name="bank_name" value="{{ $bank_name }}" placeholder="Bank Name">
                                    </div>
                                
                                    <div class="col-6">
                                            <label class="label-main">Branch:</label>
                                            <input type="text" class="form-control form-control-custom input-custom-black" name="bank_branch" value="{{ $bank_branch }}" placeholder="Branch">
                                    </div>

                                    <div class="col-6">
                                            <label class="label-main">Bank Account Name:</label>
                                            <input type="text" class="form-control form-control-custom input-custom-black" name="bank_account_name" value="{{ $bank_account_name }}" placeholder="Bank Account Name">
                                    </div>
                                
                                    <div class="col-6">
                                            <label class="label-main">Bank Account No:</label>
                                            <input type="text" class="form-control form-control-custom input-custom-black" name="bank_account_no" value="{{ $bank_account_no }}" placeholder="Bank Account No">
                                    </div>

                                </div>    
                       
                           

                            <div class="text-center mt-10">
                                <button type="submit" class="btn btn-dark rounded-pill px-12 py-2">
                                    <i class="uil uil-save me-1"></i> Save 
                                </button>
                            </div>
                        </form>
                    </div>
                </div> 
            </div>
        </div>
    </div>
</section>

{{-- @include('layouts.footer') --}}
@endsection

@section('script')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>

<script>

</script>

@endsection