@extends('Admin.layout')
<style>
    .reg-confirm-modal {
        border-radius: 10px;
        border: 1px solid #660066;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    }


    .reg-box {
        border: 2px solid #a24ccf;
        border-radius: 4px;
        padding: 14px 14px 12px 14px;
        position: relative;
    }

    .reg-box-title {
        position: absolute;
        top: -9px;
        left: 12px;
        background: white;
        padding: 0 6px;
        font-size: 11px;
        font-weight: 600;
    }

    .reg-text {
        font-size: 11px;
        line-height: 1.5;
    }

    .reg-label {
        font-weight: 600;
        /* color: #444; */
    }

    .reg-value {
        font-weight: 600;
    }

    .coin-header {
        background: linear-gradient(90deg, #4b1c82, #9b2c88, #0d4d7a);
    }

    .coin-close-btn {
        border: 1px solid #a24ccf !important;
        /* color: #4b1c82 !important; */
    }
</style>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Lora&family=Yeseva+One&display=swap');

    * {
        --hibiscus-love: #fc465c;
        --fine-ii: #f9b198;
        --afl: #f9b198;
        --mexican-sky: #cfdddd;
        --brasillia-peach: #0A1F44;
        --free: #ffc107;
        --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 {
        width: 400px;
        border-radius: 0.6em;
        padding: 20px;
        background-color: var(--form-bg) !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;
        background: var(--form-bg) !important;
        border: var(--quadrary-color) solid 2px !important;
        display: block;
        width: 100%;
        color: var(--text-color) !important;

    }

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


    }

    .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;
    }

    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;
    }

    .btn-submit
    {
        background-color: #ffc107 !important;
        color: black !important;
    }
</style>
@section('content')
<h5>
    <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
        <a href="{{ route('view_bank_details') }}">
            <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 Bank
</h5>

<div class="container shadow-sm border-0">

    <div class="card-body p-4">
<!-- 
        <h6 class="fw-semibold mb-4">
            Add Bank
        </h6> -->
        <form action="{{route('add_bank_form')}}" method="post" id="bankForm">
            @csrf

            <div class="row">

                <div class="col-lg-6 mb-3">
                    <label class="form-label">Account Number </label>
                    <input type="text" class="form-control" name="account_number" id="account_number" value="{{ old('account_number') }}" placeholder="Enter Account Number"
                        oninput="this.value = this.value.replace(/[^0-9.]/g, '');">
                    @error('account_number')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>


                <div class="col-lg-6 mb-3">
                    <label class="form-label">Account Holder Name</label>
                    <input type="text" class="form-control" name="account_holder" id="account_holder" value="{{ old('account_holder') }}" placeholder="Enter Accont holder name">
                    @error('account_holder')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>


                <div class="col-lg-4 mb-3">
                    <label class="form-label">Bank Name</label>
                    <input type="text" class="form-control" name="bank_name" id="bank_name" value="{{ old('bank_name') }}" placeholder="Enter Bank name">
                    @error('bank_name')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>

                <div class="col-lg-4 mb-3">
                    <label class="form-label">Branch Name</label>
                    <input type="text" class="form-control" name="branch_name" id="branch_name" value="{{ old('branch_name') }}" placeholder="Enter Branch name">
                    @error('branch_name')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="col-lg-4 mb-3">
                    <label class="form-label">IFSC code</label>
                    <input type="text" class="form-control" name="ifsc" id="ifsc" value="{{ old('ifsc') }}" placeholder="Enter Ifsc">
                    @error('ifsc')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>

                <div class="d-flex justify-content-center gap-3 mt-4">
                    <!-- <button type="reset" class="btn btn-label-secondary">Discard</button> -->
                    <button type="button" class="btn btn-submit" data-bs-toggle="modal" data-bs-target="#submitModal">
                        Submit
                    </button>
                </div>
            </div>

        </form>
    </div>

</div>
<div class="modal fade" id="submitModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted">Are you confirm to submit?</p>

            <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                    Cancel
                </button>
                <button type="button" id="submit_btn" class="btn btn-success p-3 ms-2 fw-semibold">
                    Yes, Sure
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    document.getElementById('submit_btn').addEventListener('click', function(e) {
        e.preventDefault();
        let btn = this;
        btn.disabled = true;
        btn.innerText = 'Processing...';
        document.getElementById('bankForm').submit();
    });
</script>
@endsection