@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/flagAlert.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('flagAlertsUpdate', $flagAlert->id)}}" id="add_alert_form">
                @csrf
                <div class="card card-flush py-4">
                    <div class="card-header">
                        <div class="card-title">
                            <h2>Edit Flag & Alerts</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="Name" value="{{ $flagAlert->name }}"/>
                            </div>
                            <div class="fv-row w-100 flex-md-root">
                                <!--begin::Label-->
                                <label class="fs-6 fw-bold mb-2">Type
                                    <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip"
                                        title="" data-bs-original-title=""
                                        aria-label=""></i></label>
                                <!--End::Label-->
                                <!--begin::Row-->
                                <div class="row row-cols-1 row-cols-md-3 row-cols-lg-1 row-cols-xl-3 g-9"
                                    data-kt-buttons="true" data-kt-buttons-target="[data-kt-button='true']">
                                    <!--begin::Col-->
                                    <div class="col">
                                        <!--begin::Option-->
                                        <label
                                            class="btn btn-outline btn-outline-dashed btn-outline-default d-flex text-start p-6 {{$flagAlert->type == CommonConstants::FLAG_AND_ALERT['TYPE_SYMBOL'] ? 'active' : ''}}"
                                            data-kt-button="true">
                                            <!--begin::Radio-->
                                            <span
                                                class="form-check form-check-custom form-check-solid form-check-sm align-items-start mt-1">
                                                <input class="form-check-input" type="radio" name="type" value="{{CommonConstants::FLAG_AND_ALERT['TYPE_SYMBOL']}}" {{$flagAlert->type == CommonConstants::FLAG_AND_ALERT['TYPE_SYMBOL'] ? 'checked' : ''}}>
                                            </span>
                                            <!--end::Radio-->
                                            <!--begin::Info-->
                                            <span class="ms-5">
                                                <span class="fs-4 fw-bolder text-gray-800 d-block">Symbol</span>
                                            </span>
                                            <!--end::Info-->
                                        </label>
                                        <!--end::Option-->
                                    </div>
                                    <!--end::Col-->
                                    <!--begin::Col-->
                                    <div class="col">
                                        <!--begin::Option-->
                                        <label
                                            class="btn btn-outline btn-outline-dashed btn-outline-default d-flex text-start p-6 {{$flagAlert->type == CommonConstants::FLAG_AND_ALERT['TYPE_USER'] ? 'active' : ''}}"
                                            data-kt-button="true">
                                            <!--begin::Radio-->
                                            <span
                                                class="form-check form-check-custom form-check-solid form-check-sm align-items-start mt-1">
                                                <input class="form-check-input" type="radio" name="type"
                                                    value="{{CommonConstants::FLAG_AND_ALERT['TYPE_USER']}}"  {{$flagAlert->type == CommonConstants::FLAG_AND_ALERT['TYPE_USER'] ? 'checked' : ''}}>
                                            </span>
                                            <!--end::Radio-->
                                            <!--begin::Info-->
                                            <span class="ms-5">
                                                <span class="fs-4 fw-bolder text-gray-800 d-block">User</span>
                                            </span>
                                            <!--end::Info-->
                                        </label>
                                        <!--end::Option-->
                                    </div>
                                    <div class="col">
                                        <!--begin::Option-->
                                        <label
                                            class="btn btn-outline btn-outline-dashed btn-outline-default d-flex text-start p-6  {{$flagAlert->type == CommonConstants::FLAG_AND_ALERT['TYPE_BOTH'] ? 'active' : ''}}"
                                            data-kt-button="true">
                                            <!--begin::Radio-->
                                            <span
                                                class="form-check form-check-custom form-check-solid form-check-sm align-items-start mt-1">
                                                <input class="form-check-input" type="radio" name="type"
                                                    value="{{CommonConstants::FLAG_AND_ALERT['TYPE_BOTH']}}" {{$flagAlert->type == CommonConstants::FLAG_AND_ALERT['TYPE_BOTH'] ? 'checked' : ''}}>
                                            </span>
                                            <!--end::Radio-->
                                            <!--begin::Info-->
                                            <span class="ms-5">
                                                <span class="fs-4 fw-bolder text-gray-800 d-block">Both</span>
                                            </span>
                                            <!--end::Info-->
                                        </label>
                                        <!--end::Option-->
                                    </div>
                                    <!--end::Col-->
                                </div>
                                <!--end::Row-->
                            </div>
                        </div>
                        <div class="d-flex flex-wrap gap-5 mb-10">
                            <div class="fv-row flex-md-root" id="symbolsDiv">
                                <label class="required form-label">Symbols</label>
                                <select class="js-example-basic-multiple form-select form-select-solid multi-select-option mb-2" name="symbols[]" id="symbols" data-placeholder="Select Symbols" multiple="multiple">
                                    <option></option>
                                    @foreach ($symbols as $symbol)
                                        <option value="{{ $symbol->id }}" {{in_array($symbol->id, $flagAlertSymbolIds) ? 'selected' : ''}}>{{ $symbol->symbols}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="fv-row flex-md-root" id="users">
                                <label class="required 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"multiple="multiple">
                                    <option></option>
                                    @foreach ($users as $user)
                                        <option value="{{ $user->id }}"{{in_array($user->id, $flagAlertAccountIds) ? 'selected' : ''}}>{{ $user->loginId }}</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">
                                        <input class="form-check-input" type="checkbox" name="mode[]" id="system" value="{{CommonConstants::FLAG_AND_ALERT['MODE_SYSTEM']}}" {{$flagAlert->mode == CommonConstants::FLAG_AND_ALERT['MODE_SYSTEM'] || $flagAlert->mode == CommonConstants::FLAG_AND_ALERT['MODE_BOTH'] ? 'checked' : ''}}/>
                                       <label for="system" style="cursor: pointer">System</label>
                                        <input class="form-check-input" type="checkbox" name="mode[]" id="telegram" value="{{CommonConstants::FLAG_AND_ALERT['MODE_TELEGRAM']}}" {{$flagAlert->mode == CommonConstants::FLAG_AND_ALERT['MODE_TELEGRAM'] || $flagAlert->mode == CommonConstants::FLAG_AND_ALERT['MODE_BOTH'] ? 'checked' : ''}}/>
                                       <label for="telegram" style="cursor: pointer">Telegram</label>
                                </div>
                            </div>
                            <div class="fv-row flex-md-root" id="telegramUsersDiv">
                                <label class="required form-label">Telegram Users</label>
                                <select class="js-example-basic-multiple form-select form-select-solid multi-select-option mb-2" name="telegram_users[]" id="telegram_users" data-placeholder="Select Telegram Users" multiple="multiple">
                                    <option></option>
                                    @foreach ($telegramUsers as $telegramUser)
                                        <option value="{{ $telegramUser->id }}"{{in_array($telegramUser->id, $telegramUsersId) ? 'selected' : ''}}>{{ ($telegramUser->nick_name != '' ? $telegramUser->nick_name : $telegramUser->first_name) . ' (' . $telegramUser->chatId . ')'}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="d-flex">
                            <a href="{{ route('flagAlerts') }}" data-kt-contacts-type="cancel" class="btn btn-secondary me-3">Cancel</a>
                            <button type="submit" class="btn btn-primary me-3">Submit</button>
                        </div>
                    </div>
                </div>
            </form>
            </div>
		</div>
	</div>
</div>
<script type="text/javascript">

$("input[type='radio'][name='type").change(function() {
    getTypeSelected();
});

$(document).ready(function() { 
    getTypeSelected();
});

function getTypeSelected() {
    var data = $("input[type='radio'][name='type']:checked");
    var val = data.val();
    
    if (val == "{{CommonConstants::FLAG_AND_ALERT['TYPE_USER']}}") {
        $("#symbolsDiv").attr('style', 'display:none');
        $("#users").attr('style', 'display:inline-block;');
    } else if (val == "{{CommonConstants::FLAG_AND_ALERT['TYPE_BOTH']}}") {
        $("#symbolsDiv").attr('style', 'display:inline-block;');
        $("#users").attr('style', 'display:inline-block;');
    } else {
        $("#users").attr('style', 'display:none');
        $("#symbolsDiv").attr('style', 'display:inline-block;');
    } 
}

$("input[type='checkbox'][name='mode[]']").change(function() {
    getModeSelected();
});

$(document).ready(function() {
    getModeSelected();
});

function getModeSelected() {
    var telegramCheckbox = $("#telegram");
    var telegramUsersDiv = $("#telegramUsersDiv");

    if (telegramCheckbox.is(":checked")) {
        telegramUsersDiv.show();
    } else {
        telegramUsersDiv.hide();
    }
}

</script>

@endsection