@extends('layouts.app')
@section('title', 'Edit Payment Settings')

@section('content')

<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">Edit Payment Settings</h1>
</section>

<section class="content">

 <div class="table-responsive card" style="background:white;border-radius:10px;margin-top:20px;margin-bottom:50%;padding:20px;">

        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

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

            <div class="row g-3">

               <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" 
                            {{ old('type', $paymentSettings->type ?? '') == 'paybill' ? 'selected' : '' }}>
                            Paybill
                        </option>
                
                        <option value="till" 
                            {{ old('type', $paymentSettings->type ?? '') == 'till' ? 'selected' : '' }}>
                            Till Number
                        </option>
                
                        <!-- Add more types if needed -->
                
                    </select>
                </div>


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

                <div class="col-md-6 mtc">
                    <label>Short Code</label>
                    <input type="text" name="short_code" class="form-control"
                           value="{{ old('short_code', $paymentSettings->short_code ?? '') }}">
                </div>
                
                <div id="till_field">
                <div class="col-md-6" >
                    <label>Till Number</label>
                    <input type="text" name="till_no" class="form-control"
                           value="{{ old('till_no', $paymentSettings->till_no ?? '') }}">
                </div>
                
                <div class="col-md-6">
                    <label>Child Store Number</label>
                    <input type="text" name="child_number" class="form-control"
                           value="{{ old('child_number', $paymentSettings->child_number ?? '') }}">
                </div>
                </div>

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

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

                <div class="col-md-6">
                    <label>Passkey</label>
                    <input type="text" name="passkey" class="form-control"
                           value="{{ old('passkey', $paymentSettings->passkey ?? '') }}">
                </div>
                
                
                <div class="col-md-6">
                    <label>Site URL</label>
                    <input type="text" name="site_url" class="form-control"
                           value="{{ old('site_url', $paymentSettings->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;
                }
                
                .mtc {
                    margin-top:0px;
                }
            </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>
                        @php
                            $selectedOptions = old('payment_options', $paymentSettings->payment_options ?? []);
                        @endphp
                
                       @foreach ($paymentLabels as $key => $label)
                            <option value="{{ $key }}" 
                                @if(!empty($selectedOptions) && 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 class="btn btn-success" type="submit">Save Changes</button>
                <a href="{{ route('bsintegrations.index') }}" class="btn btn-secondary">Cancel</a>
            </div>

        </form>

    </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