@extends('layouts.user.main')

@section('content')


@if ($errors->any())
    <div class="container-xxl alert-custom-class">
        <div class="alert alert-danger alert-dismissible" role="alert">
            <ul>
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    </div>
@endif

<script src="{{ asset('assets/js/validation/dgScanner.js') }}"></script>

<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
	<div class="post d-flex flex-column-fluid" id="kt_post">
		<div id="kt_content_container" class="container-xxl">
            <div class="d-flex flex-column gap-7 gap-lg-10">
            <form class="form" method="POST" action="{{route('dg-scanner-rule.store')}}" id="add_dg_scanner_rule_form">
                @csrf
                <div class="card card-flush py-4">
                    <div class="card-header">
                        <div class="card-title">
                            <h2>Add DG Scanner Rule</h2>
                        </div>
                    </div>
                    <div class="card-body pt-0">
                        <div class="d-flex flex-wrap gap-5 mb-10">
                            <div class="fv-row w-100 flex-md-root">
                                <label class="required form-label">Name</label>
                                <input type="text" class="form-control form-control-solid mb-2" name="name" placeholder="Enter Name" value="{{ old('name') }}"/>
                            </div>
                            <div class="fv-row w-100 flex-md-root">
                                <label class="required form-label">Minutes</label>
                                <input type="number" class="form-control form-control-solid mb-2" name="minutes" placeholder="Enter Minutes" value="{{ old('minutes') }}"/>
                            </div>
                            <div class="fv-row w-100 flex-md-root">
                                <label class="required form-label">Ratio</label>
                                <input type="text" class="form-control form-control-solid mb-2" name="ratio" placeholder="Enter Ratio" value="{{ old('ratio') }}"/>
                            </div>
                            <div class="fv-row flex-md-root">
                                <label class="form-label">Users</label>
                                <select class="js-example-basic-multiple form-select form-select-solid multi-select-option mb-2" name="loginIds[]" id="loginIds" data-placeholder="Select User" multiple="multiple">
                                    <option></option>
                                    @foreach ($users as $user)
                                        <option value="{{ $user->id }}">{{ $user->loginId }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="d-flex flex-wrap gap-5 mb-10">
                            <div class="fv-row flex-md-root">
                                <label class="required form-label">Trigger Symbol</label>
                                <select class="js-example-basic-multiple form-select form-select-solid multi-select-option mb-2" name="triggerSymbolId" id="triggerSymbolId" data-placeholder="Select Trigger Symbol">
                                    <option></option>
                                    @foreach ($symbols as $symbol)
                                        <option value="{{ $symbol->id }}">{{ $symbol->symbols}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="fv-row flex-md-root">
                                <label class="required form-label">Trigger Action</label>
                                <select class="js-example-basic-multiple form-select form-select-solid multi-select-option mb-2" name="triggerAction" id="triggerAction" data-placeholder="Select Trigger Action">
                                    <option></option>
                                    @foreach ($tradeActions as $action => $value)
                                        <option value="{{ $value }}" {{ old('triggerAction') == $value ? 'selected' : '' }}>{{ $action }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="fv-row flex-md-root">
                                <label class="required form-label">Target Symbol</label>
                                <select class="js-example-basic-multiple form-select form-select-solid multi-select-option mb-2" name="targetSymbolId" id="targetSymbolId" data-placeholder="Select Target Symbol">
                                    <option></option>
                                    @foreach ($symbols as $symbol)
                                        <option value="{{ $symbol->id }}">{{ $symbol->symbols}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="fv-row flex-md-root">
                                <label class="required form-label">Target Action</label>
                                <select class="js-example-basic-multiple form-select form-select-solid multi-select-option mb-2" name="targetAction" id="targetAction" data-placeholder="Select Target Action">
                                    <option></option>
                                    @foreach ($tradeActions as $action => $value)
                                        <option value="{{ $value }}" {{ old('targetAction') == $value ? 'selected' : '' }}>{{ $action }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="d-flex flex-wrap gap-5 mb-10 ">
                            <div class="w-100 flex-md-root">
                                <label class="required form-label">Mode</label>
                                <div class="form-check form-check-sm form-check-custom form-check-solid me-3 checkbox-inline gap-4">
                                    @php
                                        $oldMode = old('mode');
                                    @endphp
                                    <input class="form-check-input" type="checkbox" name="mode[]" id="system"
                                        value="{{ CommonConstants::DG_SCANNER['MODE_SYSTEM'] }}"
                                        {{ is_null($oldMode) || in_array(CommonConstants::DG_SCANNER['MODE_SYSTEM'], $oldMode) ? 'checked' : '' }} />
                                    <label for="system" style="cursor: pointer">System</label>
                                    <input class="form-check-input" type="checkbox" name="mode[]" id="telegram"
                                        value="{{ CommonConstants::DG_SCANNER['MODE_TELEGRAM'] }}"
                                        {{ !is_null($oldMode) && in_array(CommonConstants::DG_SCANNER['MODE_TELEGRAM'], $oldMode) ? 'checked' : '' }} />
                                    <label for="telegram" style="cursor: pointer">Telegram</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="d-flex">
                            <a href="{{ route('dg-scanner-rule.index') }}" data-kt-contacts-type="cancel" class="btn btn-secondary me-3">Cancel</a>
                            <button type="reset" class="btn btn-secondary me-3 add-btn-reset">Reset</button>
                            <button type="submit" class="btn btn-primary me-3">Submit</button>
                        </div>
                    </div>
                </div>
            </form>
            </div>
		</div>
	</div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#triggerSymbolId, #targetSymbolId').select2({
            placeholder: function() {
                return $(this).data('placeholder');
            }
        });

        function validateSymbols() {
            let triggerVal  = $('#triggerSymbolId').val();
            let targetVal   = $('#targetSymbolId').val();

            if (triggerVal && targetVal && triggerVal == targetVal) {
                $('#targetSymbolId').val(null).trigger('change');
            }
        }

        $('#triggerSymbolId').on('change', function () {
            validateSymbols();
            updateOptions();
        });

        $('#targetSymbolId').on('change', function () {
            validateSymbols();
            updateOptions();
        });

        function updateOptions() {
            let triggerVal = $('#triggerSymbolId').val();
            let targetVal = $('#targetSymbolId').val();

            $('#targetSymbolId option').prop('disabled', false);
            $('#triggerSymbolId option').prop('disabled', false);

            if (triggerVal) {
                $('#targetSymbolId option[value="' + triggerVal + '"]').prop('disabled', true);
            }

            if (targetVal) {
                $('#triggerSymbolId option[value="' + targetVal + '"]').prop('disabled', true);
            }

            $('#triggerSymbolId').trigger('change.select2');
            $('#targetSymbolId').trigger('change.select2');
        }
    });
</script>
@endsection