@extends('Admin.layout')

@section('content')
    <style>
        .page-header {
            background: linear-gradient(135deg, #d98a9e, #e07a94);
            border-radius: 18px;
            padding: 28px 35px;
            color: #fff;
            margin-bottom: 25px;
            box-shadow: 0 18px 34px -18px rgba(125, 41, 66, 0.4);
        }

        .page-header h3 {
            color: #fff;
            font-weight: 700;
            margin-bottom: 5px;
        }

        .contact-card {
            border: none;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
        }

        .contact-card .card-header {
            border-bottom: 1px solid #eef2f7;
            padding: 22px 28px;
        }

        .contact-card .card-body {
            padding: 30px;
        }

        .form-label {
            font-weight: 600;
            margin-bottom: 8px;
        }

        .form-control {
            border-radius: 10px;
            min-height: 48px;
            box-shadow: none;
        }

        .btn-save {
            border-radius: 10px;
            padding: 12px 30px;
            font-weight: 600;
        }
    </style>

    <div class="container-fluid mt-4">
        <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('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 Details
            </h5>
        </div>

        <form action="{{ route('store_bank_details') }}" method="POST" enctype="multipart/form-data" id="bankDetailsForm">
            @csrf
            <div class="card contact-card">
                <div class="card-header">
                    <h5 class="mb-0 fw-bold"><i class="ti tabler-building-bank me-2"></i> Bank Account Form</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-4">
                            <label class="form-label" for="qr_image">QR Code</label>
                            <div class="d-flex align-items-center gap-2">
                                <input type="file" name="qr_image" id="qr_image"
                                    class="form-control @error('qr_image') is-invalid @enderror" accept=".jpg,.jpeg,.png">
                               <div id="qrPreviewContainer" style="display: none;">
    <div class="border rounded d-flex align-items-center justify-content-center p-1 cursor-pointer" 
         style="width: 42px; height: 42px; flex-shrink: 0; cursor: pointer;"
         data-bs-toggle="modal" 
         data-bs-target="#qrModal">
        <img id="qrPreview" src="" alt="QR Preview" style="max-width: 100%; max-height: 100%; object-fit: contain;">
    </div>
</div>

<!-- QR Full Image Modal -->
<div class="modal fade" id="qrModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width: 350px;">
        <div class="modal-content text-white p-3 text-center ">
            <div class="d-flex justify-content-end mb-2">
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="d-flex align-items-center justify-content-center" style="height: 300px; width: 100%;">
                <img id="qrModalImage" src="" alt="Full QR Code" style="max-width: 100%; max-height: 100%; object-fit: contain;">
            </div>
        </div>
    </div>
</div>
                            </div>
                            <small class="text-muted d-block mt-1">JPG, JPEG, PNG — Maximum 3MB</small>
                            @error('qr_image')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-4">
                            <label class="form-label" for="upi_id">UPI ID</label>
                            <input type="text" name="upi_id" id="upi_id"
                                class="form-control @error('upi_id') is-invalid @enderror" placeholder="example@upi"
                                value="{{ old('upi_id') }}">
                            @error('upi_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-4">
                            <label class="form-label" for="bank_name">Bank Name</label>
                            <input type="text" name="bank_name" id="bank_name"
                                class="form-control @error('bank_name') is-invalid @enderror" placeholder="Enter bank name"
                                value="{{ old('bank_name') }}">
                            @error('bank_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-4">
                            <label class="form-label" for="account_holder_name">Account Holder Name</label>
                            <input type="text" name="account_holder_name" id="account_holder_name"
                                class="form-control @error('account_holder_name') is-invalid @enderror"
                                placeholder="Enter account holder name" value="{{ old('account_holder_name') }}">
                            @error('account_holder_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-4">
                            <label class="form-label" for="account_number">Account Number</label>
                            <input type="text" name="account_number" id="account_number"
                                class="form-control @error('account_number') is-invalid @enderror"
                                placeholder="Enter account number" value="{{ old('account_number') }}">
                            @error('account_number')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-4">
                            <label class="form-label" for="ifsc_code">IFSC Code</label>
                            <input type="text" name="ifsc_code" id="ifsc_code"
                                class="form-control @error('ifsc_code') is-invalid @enderror" placeholder="CNRB0001234"
                                value="{{ old('ifsc_code') }}">
                            @error('ifsc_code')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-4">
                            <label class="form-label" for="branch">Branch</label>
                            <input type="text" name="branch" id="branch"
                                class="form-control @error('branch') is-invalid @enderror" placeholder="Enter branch"
                                value="{{ old('branch') }}">
                            @error('branch')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="text-center border-top py-3 px-4">
                    <!-- <a href="{{ route('bank_details') }}" class="btn btn-secondary me-2">Cancel</a> -->
                    <button type="submit" class="btn btn-primary btn-save" id="saveButton">
                        <i class="ti tabler-device-floppy me-1"></i> Save Bank Details
                    </button>
                </div>
            </div>
        </form>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function() {
    $('#qr_image').on('change', function(event) {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $('#qrPreview').attr('src', e.target.result);
                $('#qrModalImage').attr('src', e.target.result);
                $('#qrPreviewContainer').show();
            };
            reader.readAsDataURL(file);
        }
    });
});
        document.getElementById('qr_image').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('qrPreview').src = e.target.result;
                    document.getElementById('qrPreviewContainer').style.display = 'block';
                };
                reader.readAsDataURL(file);
            }
        });

        document.getElementById('bankDetailsForm').addEventListener('submit', function() {
            const saveButton = document.getElementById('saveButton');
            saveButton.disabled = true;
            saveButton.innerHTML = `<span class="spinner-border spinner-border-sm me-1"></span> Saving...`;
        });
    </script>
@endsection