@extends('user.layout')

@section('content')
    <style>
        .bankcard.shadow-sm.p-4 {
            max-width: 500px;
            height: auto;
            background: #fff;
            border-radius: 10px;
        }

        .bank-history {
            width: 100%;
            margin-top: 20px;
        }


        .btn {
            font-family: Poppins, sans-serif;
            font-size: 14px;
            font-weight: 500;
        }


        .bank-details-card {
            background: linear-gradient(to right, #030f0c, #115544);
            color: white;
        }

        .bank-details-card .card-header {
            background-color: transparent;
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        }

        .bank-details-card .card-body {
            background-color: transparent;
        }

        .bank-details-card i {
            font-size: 1.5rem;
            color: white;
        }
    </style>

    <div class="row mb-3">
        <div class="col d-flex justify-content-between">
            <h4 class="page-top-heading">Add Bank Details</h4>
            {{-- <a href="{{ route('user.bank_history') }}" class="btn btn-primary py-2 px-4">History</a> --}}
        </div>
    </div>

    @if ($bankDetails)
        <div class="row d-flex justify-content-center mt-3">
            <div class="col-lg-6 mt-3">
                <div class="card bank-details-card shadow-sm">
                    <div class="card-body">
                        <h5 class="fw-bold mb-0">Bank Account Details</h5>
                        <div class="my-3">
                            <p><strong>Account Holder Name:</strong> {{ $bankDetails->acc_holder_name ?? '--' }}</p>
                            <p><strong>Bank Name:</strong> {{ $bankDetails->bank_name ?? '--' }}</p>
                            <p><strong>Account Number:</strong> {{ $bankDetails->acc_no ?? '--' }}</p>
                            <p><strong>IFSC Code:</strong> {{ $bankDetails->ifsc ?? '--' }}</p>
                            <p><strong>Branch Name:</strong> {{ $bankDetails->branch_name ?? '--' }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @else
        <div class="row d-flex justify-content-center">
            <div class="bankcard shadow-sm p-4">
                <form action="{{ route('add_bank_form') }}" method="POST" enctype="multipart/form-data" id="addbankForm">
                    @csrf
                    <div class="my-4">
                        <label for="accountHolderName" class="form-label fw-bold">Account Holder Name</label>
                        <input type="text" id="accountHolderName" name="acc_holder_name" class="form-control"
                            placeholder="Enter Account Holder Name" />
                    </div>

                    <div class="my-4">
                        <label for="bankName" class="form-label fw-bold">Bank Name</label>
                        <input type="text" id="bankName" class="form-control" name="bank_name"
                            placeholder="Enter Bank Name" />
                    </div>

                    <div class="my-4">
                        <label for="accountNumber" class="form-label fw-bold">Account Number</label>
                        <input type="text" id="accountNumber" class="form-control" name="acc_no"
                            placeholder="Enter Account Number" />
                    </div>
                    <div class="my-4">
                        <label for="accountNumber" class="form-label fw-bold">Re-Enter Account Number</label>
                        <input type="text" id="accountNumberxx" class="form-control" name="con_acc_no"
                            placeholder="Enter Account Number" />
                    </div>
                    <div class="my-4">
                        <label for="ifscCode" class="form-label fw-bold">IFSC Code</label>
                        <input type="text" id="ifscCode" class="form-control" name="ifsc"
                            placeholder="Enter IFSC Code" />
                    </div>
                    <div class="my-4">
                        <label for="ifscCode" class="form-label fw-bold">Re-Enter IFSC Code</label>
                        <input type="text" id="ifscCodexx" class="form-control" name="con_ifsc"
                            placeholder="Enter IFSC Code" />
                    </div>
                    <div class="my-4">
                        <label for="branchName" class="form-label fw-bold">Branch Name</label>
                        <input type="text" id="branchName" class="form-control" name="branch_name"
                            placeholder="Enter Branch Name" />
                    </div>

                    <button type="button" class="btn btn-primary w-100 p-3" data-bs-toggle="modal"
                        data-bs-target="#confirmationModal">Submit</button>
                </form>
            </div>
        </div>
    @endif
    @if ($panDetails)
    <div class="row d-flex justify-content-center mt-3">
        <div class="col-lg-6 mt-3">
            <div class="card bank-details-card shadow-sm">
                <div class="card-body">
                    <h5 class="fw-bold mb-0">Pan Card Details</h5>
                    <div class="my-3 text-center">
                        <p><strong>PAN Card Number:</strong> {{ $panDetails->pan_number ?? '--' }}</p>
                        <img src="{{ asset('' . $panDetails->pan_image) }}" class="img-fluid" alt="Pan Card Image" /
                            style="width:200px">
                    </div>
                </div>
            </div>
        </div>
    </div>
    @else
        <p>No PAN card details found.</p>
    @endif

    <!-- Confirmation Modal -->
    <div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body text-center p-5">
                    <h4 class="mb-3 fw-bold">Are you sure?</h4>
                    <hr>
                    <h6 class="mb-4 fw-regular mt-3">Are you sure you want to submit bank details?</h6>
                    <div class="d-flex justify-content-center gap-3 mt-4">
                        <button type="button" class="btn btn-outline-primary py-3 w-50"
                            data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-primary py-3 w-50" id="submitButton"
                            onclick="disableButton(this)">Yes, Proceed</button>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script>
        function disableButton(button) {
            button.disabled = true;
            button.innerText = 'Processing...';
            document.getElementById('addbankForm').submit();
        }
    </script>
@endsection