@extends(BaseHelper::getAdminMasterLayoutTemplate())
@section('content')
    <style>
        .cke_notifications_area {
            pointer-events: none;
            display: none;
        }
        .form-group {
            margin-bottom: 1rem !important;
        }
          .aiz-switch {
            position: relative;
            display: inline-block;
            width: 40px;  
            height: 22px;  
        }

        .aiz-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 16px; 
            width: 16px;    
            left: 3px;      
            bottom: 3px;
            background-color: white;
            transition: .4s;
        }

        input:checked + .slider {
            background-color: #2196F3;
        }

        input:checked + .slider:before {
            transform: translateX(18px); 
        }

        .slider.round {
            border-radius: 22px;
        }

        .slider.round:before {
            border-radius: 50%;
        }
        .form-label{
            align-self: center;
            margin-bottom: .0rem !important;
        }
    </style>

    <div class="col-lg-8 mx-auto">
        <div class="card">
            <div class="card-header">
                <h3 class="mb-0">{{ isset($termcondition) ? 'Edit Term & Condition' : 'Add Term & Condition' }}</h3>
            </div>
            <div class="card-body">
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form action="{{ isset($termcondition) ? route('termcondition.store', $termcondition->id) : route('termcondition.store') }}" method="POST">
                    @csrf
                    @if(isset($termcondition))
                        <input type="hidden" name="id" value="{{ $termcondition->id }}">
                    @endif
                    <div class="form-group row">
                        <label class="col-sm-3 form-label form-label required" for="name">
                           Name
                        </label>
                        <div class="col-sm-9">
                            <input type="text" placeholder="Name" id="name" name="name"
                                class="form-control name" required value="{{ old('name', $termcondition->name ?? '') }}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 form-label form-label required" for="shortname">
                           Shortname
                        </label>
                        <div class="col-sm-9">
                            <input type="text" placeholder="Shortname" id="shortname" name="shortname"
                                class="form-control shortname" required value="{{ old('shortname', $termcondition->shortname ?? '') }}" readonly>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-3">
                            <label class="form-label required" for="description">Description</label>
                        </div>
                        <div class="col-sm-9">
                            <textarea id="editor" name="description" required placeholder="Description">{{ old('description', $termcondition->description ?? '') }}</textarea>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-md-3 form-label form-label">Status</label>
                        <div class="col-md-9">
                            <select class="form-control form-select" id="status" name="status" required>
                                <option value="1" {{ old('status', $termcondition->status ?? 1) == 1 ? 'selected' : '' }}>Active</option>
                                <option value="0" {{ old('status', $termcondition->status ?? 1) == 0 ? 'selected' : '' }}>Inactive</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 form-label form-label" for="code">
                           Remark
                        </label>
                        <div class="col-sm-9">
                            <input type="text" placeholder="remark" id="remark" name="remark"
                                class="form-control" value="{{ old('remark', $termcondition->remark ?? '') }}">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-sm-3 form-label" for="is_default">Is Default</label>
                        <div class="col-sm-9">
                            <label class="aiz-switch aiz-switch-success mb-0">
                                <input type="checkbox" name="is_default" id="is_default" value="1"
                                    {{ old('is_default', $termcondition->is_default ?? false) ? 'checked' : '' }}>
                                <span class="slider round"></span>
                            </label>
                        </div>
                    </div>

                    <div class="form-group row {{ old('is_default', $termcondition->is_default ?? false) ? '' : 'd-none' }}"
                        id="default_modules_container">
                        <label class="col-sm-3 form-label form-label" for="default_modules">Default For Modules</label>
                        <div class="col-sm-9">
                            <select name="default_modules[]" id="default_modules" class="form-control form-select" multiple
                                data-live-search="true">
                                @php
                                    $selectedModules = old('default_modules', json_decode($termcondition->default_modules ?? '[]', true) ?? []);
                                @endphp
                                <option value="purchase" {{ in_array('purchase', $selectedModules) ? 'selected' : '' }}>Purchase</option>
                                <option value="sales" {{ in_array('sales', $selectedModules) ? 'selected' : '' }}>Sales</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group mb-0 text-end">
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('javascript')
    <script src="https://cdn.ckeditor.com/4.20.1/standard/ckeditor.js"></script>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function() {
            if (typeof CKEDITOR !== "undefined") {
                CKEDITOR.replace('editor');

                document.querySelector('form').addEventListener('submit', function(event) {
                    var editorContent = CKEDITOR.instances.editor.getData();
                    document.querySelector('[name="description"]').value = editorContent;
                });
            }
        });

        $(".name").keyup(function() {
            generateshortname(this.value);
        });

        function generateshortname(dInput) {
            dInput = dInput.replace(/[_\W]+/g, "_")
            dInput = dInput.toUpperCase();
            $(".shortname").val(dInput);

        }

        function changeEntries(select) {
            let value = select.value;
            let url = new URL(window.location.href);
            url.searchParams.set('entries', value);
            url.searchParams.set('page', 1);
            window.location.href = url.toString();
        }
        $(document).ready(function() {
            $('#default_modules').select2({
                placeholder: 'Select modules',
                allowClear: true,
                width: '100%'
            });

            function toggleDefaultModules() {
                if ($('#is_default').is(':checked')) {
                    $('#default_modules_container').removeClass('d-none').show();
                    $('#default_modules').attr('required', true);
                } else {
                    $('#default_modules_container').addClass('d-none').hide();
                    $('#default_modules').removeAttr('required');
                }
            }

            toggleDefaultModules();

            $('#is_default').on('change', toggleDefaultModules);
        });
    </script>
@endsection