@extends('layouts.admin', ['header' => true, 'nav' => true, 'demo' => true])

{{-- Custom CSS --}}
@section('custom-css')
<style>
    .page-title {
        color: cornflowerblue !important;
    }
    .d-flex-end {
        display: flex !important;
        align-items: flex-end !important;
    }
</style>
@endsection

@section('content')
<div class="page-wrapper">
    <!-- Page title -->
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <div class="page-pretitle">
                        {{ __('Overview') }}
                    </div>
                    <h2 class="page-title mb-2">
                        {{ __('Sender Api Settings') }}
                    </h2>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body">
        <div class="container-xl">
            {{-- Settings --}}
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('admin.update.sender.api') }}" method="post"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <!-- Card Cover -->
                        <div class="col-xl-6 mb-2">
                            <div class="mb-6">
                                <label class="form-label">{{ __('MARKETING API KEY') }}</label>
                                <input class="form-control" required name="api_key" placeholder="{{ __('Api Key') }}" value="{{ $settings->sender_api_key ?? '' }}">
                            </div>
                        </div>
                        <div class="col-xl-6 mb-2">
                            <div class="mb-2">
                                <label class="form-label">{{ __('GROUP IDs') }}</label>
                                @if($sender_groups->count() == 0)
                                    <div class="group-ids-container" style="display: flex;">
                                        <input type="text" placeholder="Group ID" class="form-control" name="group_ids[]" required>
                                        <div class="form-label switch-text m-2">Signup</div>
                                        <div class="clearfix"></div>
                                        <label class="form-check form-switch m-2">
                                            <input class="register-switch-value" value="other" type="hidden" name="register[]">
                                            <input class="form-check-input toggle-switch register-switch"  type="checkbox">
                                        </label>
                                    </div>
                                @endif
                                <div class="group-ids-list">
                                    @if($sender_groups->count() > 0)
                                        @foreach($sender_groups as $group)
                                            <div class="group-id-item" style="display: flex;margin-top: 10px;">
                                                <input type="text" placeholder="Group ID" class="form-control" name="group_ids[]" value="{{$group->group_id}}" required>
                                                <div class="form-label switch-text m-2">Signup</div>
                                                <div class="clearfix"></div>
                                                <label class="form-check form-switch m-2">
                                                    <input class="register-switch-value" value="{{$group->type}}" type="hidden" name="register[]">
                                                    <input class="form-check-input toggle-switch register-switch"  type="checkbox" {{$group->type == 'signup' ? 'checked' : ''}}>
                                                </label>
                                                <button type="button" class="btn btn-delete btn-sm btn-danger small-btn" type="button" >remove</button>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-12" style="text-align: right;">
                                <button class="btn btn-add btn-primary small-btn" type="button" >more</button>
                            </div>
                        </div>
                        <div class="text-end bottom-fix">
                            <div class="d-flex">
                                <button type="submit" class="btn btn-primary btn-md ms-auto">
                                    {{ __('Update') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Footer --}}
    @include('admin.includes.footer')
</div>
@endsection
@section('scripts')
    <script>
       $(document).ready(function() {
            $(document).on('click', '.btn-add', function() {
                var html = '<div class="group-id-item"  style="display: flex;margin-top: 10px;">\
                                <input type="text" placeholder="Group ID" class="form-control" name="group_ids[]" required>\
                                <div class="form-label switch-text m-2">Signup</div>\
                                <div class="clearfix"></div>\
                                <label class="form-check form-switch m-2">\
                                    <input class="register-switch-value" value="other" type="hidden" name="register[]">\
                                    <input class="form-check-input toggle-switch register-switch" type="checkbox">\
                                </label>\
                                <button class="btn btn-delete btn-danger  small-btn" type="button" >remove</button>\
                            </div>';
                $('.group-ids-list').append(html);
            });

            $(document).on('click', '.btn-delete', function() {
                $(this).parent('.group-id-item').remove();
            });
            $(document).on('change', '.register-switch', function() {
                let value = $(this).is(':checked') ? 'signup' : 'other'
                $(this).prev('.register-switch-value').val(value);
            });
            
        });
</script>
@endsection