@extends('admin.layout')
<style>
    * {
        --hibiscus-love: #fc465c;
        --fine-ii: #f9b198;
        --afl: #f9b198;
        --mexican-sky: #cfdddd;
        --brasillia-peach: #133d45;
        --free: #ffd700;
        --captured: #2b2120;

        --form-bg: var(--brasillia-peach);
        --secondary-color: var(--hibiscus-love);
        --tertiary-color: var(--fine-ii);
        --quadrary-color: var(--afl);
        --bg-color: var(--mexican-sky);
        --text-color: var(--free);
        --header-color: var(--captured);
        --error-color: var(--hibiscus-love);
        --success-color: #73d12e;

        box-sizing: border-box;
    }

    .container {
        border-radius: 0.6em;
        padding: 20px;
        background-color: #133d45 !important;
        margin: 20px auto;
    }

    .form {
        padding: 30px 40px;
    }

    .form h2 {
        text-align: center;
        margin: 0 0 20px;
    }

    .form-control {
        margin-bottom: 10px;
        /* padding-bottom: 20px; */
        position: relative;
        color: var(--text-color) !important;

    }

    .form-label {
        color: White !important;
        display: block;
        margin-bottom: 5px;
    }

    .form-control {
        border-radius: 6px;
        border: var(--quadrary-color) solid 2px !important;
        display: block;
        width: 100%;
        color: var(--text-color) !important;

    }

    .form-select {
        border-radius: 6px;
        background-color: #133d45 !important;
        border: var(--quadrary-color) solid 2px !important;
        color: var(--text-color) !important;


    }

    input::placeholder,
    textarea::placeholder {
        color: #a8a6a6 !important;
        opacity: 0.7;
    }

    .form-control input:focus {
        outline: 0;
        border-color: var(--tertiary-color);
    }

    .form-control.success input {
        border-color: var(--success-color);
    }

    .form-control.error input {
        border-color: var(--error-color);
    }

    .form-control small {
        color: var(--error-color);
        position: absolute;
        bottom: 0;
        left: 0;
        visibility: hidden;
    }

    .form-control.error small {
        visibility: visible;
    }

    .btn-submit {
        cursor: pointer;
        background: #ffd700 !important;
        font-size: 16px;
        color: black !important;
        padding: 0.618em 1.2em;
        border-radius: 0.4em;

    }

    .btn-submit {
        outline: 0;
        background-color: #ffd700;
    }

    .card {
        background-color: #133d45 !important;
        color: White !important;
    }

    .form-label {
        color: White !important;
    }


    input:-webkit-autofill,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:hover,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
        -webkit-text-fill-color: #ffc107 !important;
        transition: background-color 5000s ease-in-out 0s;
    }

    .section-title {
        position: relative;
        margin: 25px 0 15px;
        text-align: center;
    }

    .section-title span {
        background: var(--form-bg);
        padding: 6px 20px;
        font-weight: 600;
        color: var(--text-color);
        letter-spacing: 1px;
        border-radius: 30px;
        border: 1px solid var(--quadrary-color);
        font-size: 14px;
        z-index: 1;
        position: relative;
    }

    .section-title::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 1px;
        background: var(--quadrary-color);
        z-index: 0;
    }
</style>
@section('content')
<div class="row align-items-center justify-content-between mb-3 mt-3">
    <div class="col-auto">
        <h5>
            <!-- <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                        <a href="{{ route('user.dashboard') }}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                                stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                class="icon icon-tabler">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                <path d="M15 6l-6 6l6 6" />
                            </svg>
                        </a>
                    </button> -->
            Add Banks
        </h5>
    </div>
</div>

<div class="card p-5">
    <form method="POST" action="{{ route('admin.store_bank') }}" id="submitForm">
        @csrf

        <div class="section-title mt-1">
            <span><i class="ti tabler-building-bank me-1"></i> Bank Details</span>
        </div>
        <div class="row">

            <div class="col-md-4 mb-3">
                <label class="form-label">Account Number <span class="text-danger">*</span></label>
                <input type="text" name="account_number"
                    value="{{ old('account_number') }}"
                    class="form-control @error('account_number') is-invalid @enderror">

                @error('account_number')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-4 mb-3">
                <label class="form-label">Account Holder Name <span class="text-danger">*</span></label>
                <input type="text" name="account_holder"
                    value="{{ old('account_holder') }}"
                    class="form-control @error('account_holder') is-invalid @enderror">

                @error('account_holder')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-4 mb-3">
                <label class="form-label">Bank Name <span class="text-danger">*</span></label>
                <input type="text" name="bank_name"
                    value="{{ old('bank_name') }}"
                    class="form-control @error('bank_name') is-invalid @enderror">

                @error('bank_name')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-6 mb-3">
                <label class="form-label">Branch Name <span class="text-danger">*</span></label>
                <input type="text" name="branch_name"
                    value="{{ old('branch_name') }}"
                    class="form-control @error('branch_name') is-invalid @enderror">

                @error('branch_name')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-6 mb-3">
                <label class="form-label">IFSC Code <span class="text-danger">*</span></label>
                <input type="text" name="ifsc"
                    value="{{ old('ifsc') }}"
                    class="form-control @error('ifsc') is-invalid @enderror">

                @error('ifsc')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="text-center">
                <button class="btn btn-primary" id="submitBtn">Submit</button>
            </div>
        </div>

    </form>


</div>







<div class="table-responsive pt-0 pb-2">

    <table id="usersTable" class="table table-bordered align-middle users-table w-100">
        <thead>
            <tr>
                <th>SNO</th>
                <th>Bank Name</th>
                <th>Account Name</th>
                <th>Branch Name</th>
                <th>Account Holder</th>
                <th>Ifsc</th>

            </tr>
        </thead>

    </table>

</div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
{{--
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css"> --}}

<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script>
    document.getElementById("submitForm").addEventListener("submit", function() {

        let btn = document.getElementById("submitBtn");

        btn.disabled = true;
        btn.innerText = "Submitting...";

    });
</script>
<script>
    $(document).ready(function() {

        let table = $('#usersTable').DataTable({
            processing: true,
            serverSide: true,

            ajax: "{{ route('admin.admin_bank_list') }}",

            lengthChange: false,

            dom: 'ftip', 

            columns: [{
                    data: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'bank_name'
                },
                {
                    data: 'account_number'
                },
                {
                    data: 'branch_name'
                },
                {
                    data: 'account_holder'
                },
                {
                    data: 'ifsc'
                }
            ]
        });

        // 🔍 SEARCH
        $('#customSearch').on('keyup', function() {
            table.search(this.value).draw();
        });

        // 📄 PAGINATION
        $('#pageLength').on('change', function() {
            table.page.len(this.value).draw();
        });

    });
</script>
@endsection