@extends('admin.layouts.default')
@section('title', 'Create Payment Gateway')
@section('content')

<div class="main-content app-content">
    <div class="container-fluid">
        <br>
        <div class="card">
            <div class="card-header justify-content-between">
                <h3 class="card-title">Create Payment Gateways</h3>
                <div class="page-rightheader">
                    <a href="{{ route('paymentgateway-list') }}" class="btn btn-secondary">Back</a>
                </div>
            </div>
            <div class="card-body">
                <form action="{{ route('paymentgateway-store') }}" method="post">
                    @csrf

                    <!-- Name Field -->
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>

                    <!-- API Key Field -->
                    <div class="form-group mt-3">
                        <label for="api_key">API Key</label>
                        <input type="text" class="form-control" id="api_key" name="api_key" required>
                    </div>

                    <!-- Secret Key Field -->
                    <div class="form-group mt-3">
                        <label for="secret_key">Secret Key</label>
                        <input type="text" class="form-control" id="secret_key" name="secret_key" required>
                    </div>

                    <div class="form-group mt-3">
                        <label for="status" class="form-label">Status</label>
                        <div class="col-md-6">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="status" id="status-active" value="1" checked>
                                <label class="form-check-label" for="status-inactive">Active</label>

                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="status" id="status-inactive" value="0">
                                <label class="form-check-label" for="status-active">Inactive</label>
                            </div>
                        </div>
                    </div>


                    <!-- Submit Button -->
                    <button type="submit" class="btn btn-primary mt-4">Save Changes</button>
                    <a href="{{ route('paymentgateway-list') }}" class="btn btn-secondary mt-4">Cancel</a>
                </form>
            </div>
        </div>

    </div>
</div>

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>

    $(document).ready(function() {
        $('.roles').select2({
            placeholder: "Select roles", // Your desired placeholder text
            allowClear: true // Optional: Adds a clear button to the select
        });

        $('.assign_to').select2({
            placeholder: "Select Assign To", // Your desired placeholder text
            allowClear: true // Optional: Adds a clear button to the select
        });

        $('.website_id').select2({
            placeholder: "Select Website", // Your desired placeholder text
            allowClear: true // Optional: Adds a clear button to the select
        });
    });
</script>
@endsection