@extends('layouts.app')
@section('title', __(''))

@section('content')
     <section class="content-header">
        <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black"> Payments</h1>
    </section>

    <!-- Main content -->
    <section class="content">
        
     <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
                   
                </h2>
    
    <div class="card">

        <div class="p-4">
            

            <!-- Success Message -->
            @if(session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif

            <!-- Business Table -->
            <div class="table-responsive card" style="background:white;border-radius:10px;margin-top:20px;margin-bottom:50%;padding:20px;">
               <!-- Edit Payment Method Form -->
<div class="">

    <h4 class="mb-4">Payments</h4>

   <!-- Payment Form -->
   <form action="{{ route('bsintegrations.payments.save') }}" method="POST">
    @csrf

        <div class="row g-3">
            

        
            <!-- Payment Type -->
            <div class="col-md-6">
                <label for="type" class="form-label">Type *</label>
                <select name="type" id="type" class="form-control" required>
                    <option value="paybill" >Paybill</option>
                    <option value="till" >Till Number</option>
                    <!-- Add more types if needed -->
                </select>
            </div>

            <!-- Display Name -->
            <div class="col-md-6">
                <label for="display_name" class="form-label">Display Name *</label>
                <input type="text" class="form-control" name="display_name" id="display_name" value="{{ old('display_name') }}" required>
            </div>

            <!-- Short Code -->
            <div class="col-md-6">
                <label for="short_code" class="form-label">Short Code</label>
                <input type="text" class="form-control" name="short_code" id="short_code" value="{{ old('short_code') }}">
            </div>
            
            <div id="till_field">
             <!-- Initiator Username -->
            <div class="col-md-6">
                <label for="initiator_username" class="form-label">Till Number</label>
                <input type="text" class="form-control" name="till_no" id="till_no" value="{{ old('till_no') }}">
            </div>
            
            
             <div class="col-md-6">
                <label for="initiator_username" class="form-label">Child Store Number</label>
                <input type="text" class="form-control" name="child_number" id="child_number" value="{{ old('child_number') }}">
            </div>
            </div>

            <!-- Consumer Key -->
            <div class="col-md-6">
                <label for="consumer_key" class="form-label">Consumer Key</label>
                <input type="text" class="form-control" name="consumer_key" id="consumer_key" value="{{ old('consumer_key') }}">
            </div>

            <!-- Consumer Secret -->
            <div class="col-md-6">
                <label for="consumer_secret" class="form-label">Consumer Secret</label>
                <input type="text" class="form-control" name="consumer_secret" id="consumer_secret" value="{{ old('consumer_secret') }}">
            </div>



            <!-- Security Credential -->
            <div class="col-md-6">
                <label for="security_credential" class="form-label">Passkey</label>
                <input type="text" class="form-control" name="passkey" id="passkey" value="{{ old('passkey') }}">
            </div>
            
            <div class="col-md-6">
                <label  class="form-label">Site URL</label>
                <input type="text" class="form-control" name="site_url" id="site_url" value="{{ old('site_url') }}">
            </div>
            
            <style>
                /* Selected tag background */
                .select2-container .select2-selection--multiple .select2-selection__choice {
                    background-color: #ffffff !important; /* white background */
                    color: #000000 !important; /* black text */
                    border: 1px solid #ccc !important;
                }
                
                /* Remove default blue highlight */
                .select2-container .select2-selection--multiple .select2-selection__choice__display {
                    color: #000000 !important;
                }
            </style>

            
           <div class="col-md-6">
            <label for="payment_options" class="form-label">Select Payment Types To Apply</label>
            <select name="payment_options[]" id="payment_options" class="form-control select2" multiple>
    @foreach ($paymentLabels as $key => $label)
        <option value="{{ $key }}" 
            @if(in_array($key, $selectedOptions)) selected @endif>
            {{ $label }}
        </option>
    @endforeach
</select>

        </div>
        
        <!-- Select2 CSS -->
        <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
        
        <!-- Select2 JS -->
        <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
        
        <script>
        $(document).ready(function() {
            $('#payment_options').select2({
                placeholder: "Select Payment Types",
                allowClear: true,
                width: '100%'
            });
        });
        </script>


            
        </div>
    
        <hr>
        <div class="mt-4">
            <button type="submit" class="btn btn-success">
                <i class="bi bi-save2-fill"></i> Save Changes
            </button>
        </div>
    </form>
</div>
 
        </div>

</section>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const typeSelect = document.getElementById('type');
    const tillField = document.getElementById('till_field');

    function toggleTillField() {
        if (typeSelect.value === 'till') {
            tillField.style.display = 'block';
        } else {
            tillField.style.display = 'none';
        }
    }

    // Run on page load
    toggleTillField();

    // Run on change
    typeSelect.addEventListener('change', toggleTillField);
});
</script>

@endsection