@extends('layouts.master')
@section('title') {{__("admin.new_notification")}} @endsection
@section('css')
<!--Internal  Datetimepicker-slider css -->
<link href="{{URL::asset('assets/plugins/amazeui-datetimepicker/css/amazeui.datetimepicker.css')}}" rel="stylesheet">
<link href="{{URL::asset('assets/plugins/jquery-simple-datetimepicker/jquery.simple-dtpicker.css')}}" rel="stylesheet">
<link href="{{URL::asset('assets/plugins/pickerjs/picker.min.css')}}" rel="stylesheet">
<!-- Internal Spectrum-colorpicker css -->
<link href="{{URL::asset('assets/plugins/spectrum-colorpicker/spectrum.css')}}" rel="stylesheet">
@endsection

@section('content')
@component('components.breadcrumb')
@slot('li_1')
<a class="btn bg-primary text-white btn-sm ml-2" title="{{__("admin.back")}}" href="{{route('admin.notifications.index')}}">
    <i class="fas fa-arrow-left"></i>
</a>
@endslot
@slot('title') {{__("admin.new_notification")}} @endslot
@endcomponent

<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title m-0">{{__("admin.add_notification")}}</h4>
            </div>
            <div class="card-body">
                <form class="needs-validation" action="{{route('admin.notifications.store')}}" method="POST">
                    @csrf
                    @include("layouts.session")
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label" for="type">{{__("admin.send_to")}} <span class="text-danger fw-bolder">*</span></label>
                                <select type="input" class="form-control @error('type') is-invalid @enderror" id="type" name="type" required>
                                    <option value="" disabled selected>{{__("admin.choose_type")}}</option>
                                    @for($i=0; $i<2; $i++)
                                    <option value="{{$i}}" @selected(@old('type') == "$i")>{{__('admin.user_type_' . $i)}}</option>
                                    @endfor
                                </select>
                                @error('type')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="row" id="phone" @if(old('type') != "0") style="display: none;" @endif>
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label" for="phone">{{__("admin.phone")}} <span class="text-danger fw-bolder">*</span></label>
                                <input type="input" class="form-control @error('phone') is-invalid @enderror" name="phone" placeholder="{{__("admin.phone")}}" value="{{old('phone')}}">
                                @error('phone')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label" for="title">{{__("admin.title")}} <span class="text-danger fw-bolder">*</span></label>
                                <input type="text"class="form-control @error("title") is-invalid @enderror" id="title" name="title" placeholder="{{__("admin.title")}}" value="{{old("title")}}" required>
                                @error("title")
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="mb-3">
                                <label class="form-label" for="message">{{__("admin.message")}} <span class="text-danger fw-bolder">*</span></label>
                                <textarea class="form-control @error("message") is-invalid @enderror" id="message" name="message">{{old("message")}}</textarea>
                                @error("message")
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <button class="btn btn-primary" type="submit">{{__("admin.add_notification")}}</button>
                </form>
            </div>
        </div>
        <!-- end card -->
    </div> <!-- end col -->
</div>
@endsection
@section('js')
<!--Internal  Datepicker js -->
<script src="{{URL::asset('assets/plugins/jquery-ui/ui/widgets/datepicker.js')}}"></script>
<!--Internal  jquery.maskedinput js -->
<script src="{{URL::asset('assets/plugins/jquery.maskedinput/jquery.maskedinput.js')}}"></script>
<!--Internal  spectrum-colorpicker js -->
<script src="{{URL::asset('assets/plugins/spectrum-colorpicker/spectrum.js')}}"></script>
<!-- Internal Select2.min js -->
<script src="{{URL::asset('assets/plugins/select2/js/select2.min.js')}}"></script>
<!--Internal Ion.rangeSlider.min js -->
<script src="{{URL::asset('assets/plugins/ion-rangeslider/js/ion.rangeSlider.min.js')}}"></script>
<!--Internal  jquery-simple-datetimepicker js -->
<script src="{{URL::asset('assets/plugins/amazeui-datetimepicker/js/amazeui.datetimepicker.min.js')}}"></script>
<!-- Ionicons js -->
<script src="{{URL::asset('assets/plugins/jquery-simple-datetimepicker/jquery.simple-dtpicker.js')}}"></script>
<!--Internal  pickerjs js -->
<script src="{{URL::asset('assets/plugins/pickerjs/picker.min.js')}}"></script>
<!-- Internal form-elements js -->
<script src="{{URL::asset('assets/js/form-elements.js')}}"></script>
<script>
    var type = document.getElementById("type");
    var phone = document.getElementById("phone");

    function togglePhoneInput() {
        if(type.value == "0") {
            phone.style.display = "block";
        } else {
            phone.style.display = "none";
        }
    }

    type.addEventListener("change", togglePhoneInput);
</script>
@endsection